/*
Theme Name: Creole Learning
Theme URI: https://creolemauritius.com
Author: Creole Mauritius
Description: A custom theme for Creole Mauritius
Version: 1.9
*/

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. CSS VARIABLES & BASE
   ========================================================================== */

:root {
    --mauritius-red: #EA2839;
    --mauritius-blue: #1A206D;
    --mauritius-yellow: #FFD500;
    --mauritius-green: #00A551;
    --home-container-border: rgba(100, 116, 139, 0.52);
    --home-container-border-strong: rgba(71, 85, 105, 0.72);
    --home-container-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    --home-container-shadow-hover: 0 24px 52px rgba(15, 23, 42, 0.18);
    --home-section-gap: 3.5rem;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-synthesis-weight: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    --site-header-height: 4.3rem;
    --site-header-top: 0px;
    background-color: #ffffff;
    min-height: 100vh;
    padding-top: var(--site-header-height);
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1f2937;
    overflow-x: hidden;
    max-width: 100%;
}

body.admin-bar {
    --site-header-top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --site-header-top: 46px;
    }
}

@media (min-width: 768px) {
    body {
        --site-header-height: 5.3rem;
    }
}

.site-header a,
.footer a,
.home-latest a,
.vocab-page a,
.vocab-card,
.vocab-card a,
.lesson-card a,
.blog-card a,
.hub-slider-card,
.hub-essential-card {
    text-decoration: none !important;
}

/* ==========================================================================
   2. ANIMATIONS
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
    overflow: visible;
}

/* ==========================================================================
   4. GRADIENT TEXT
   ========================================================================== */

.mauritius-gradient {
    background: linear-gradient(to right,
            var(--mauritius-red) 0%,
            var(--mauritius-blue) 33%,
            var(--mauritius-yellow) 66%,
            var(--mauritius-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   5. GLASS CARD, GLASS BUTTON, PRIMARY BUTTON
   ========================================================================== */

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        inset 0 0 20px rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
}

.glass-button {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.glass-button:hover,
.glass-button:focus {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--mauritius-blue);
}

.btn-primary {
    background: linear-gradient(135deg, var(--mauritius-blue) 0%, #2a3494 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(26, 32, 109, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 32, 109, 0.4);
    filter: brightness(110%);
}

/* ==========================================================================
   6. TABLE STYLING (WordPress Blocks)
   ========================================================================== */

body .wp-block-table,
body figure.wp-block-table {
    margin: 2rem 0;
    overflow: visible !important;
}

body .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

body .wp-block-table td,
body .wp-block-table th {
    border: none !important;
}

body .wp-block-table th {
    background: var(--mauritius-blue);
    color: white;
    font-weight: 700;
    text-align: left;
    padding: 1rem 1.5rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}

body .wp-block-table td {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #4b5563;
}

body .wp-block-table tbody tr:nth-child(even) td {
    background: rgba(26, 32, 109, 0.04);
}

body .wp-block-table tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.6);
}

body .wp-block-table tr:last-child td {
    border-bottom: none !important;
}

body .wp-block-table tr:hover td {
    background: rgba(26, 32, 109, 0.08);
}

/* ==========================================================================
   7. RESPONSIVE TABLE SCROLL WRAPPER (.creole-table-wrap)
   Injected by JS in functions.php — this is the ONLY element that scrolls.
   ========================================================================== */

.creole-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    border: 1px solid rgba(26, 32, 109, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: relative;
    background: white;
    max-width: 100%;
}

/* Hide native scrollbar — the scroll indicator bar replaces it visually */
.creole-table-wrap { scrollbar-width: none; }
.creole-table-wrap::-webkit-scrollbar { display: none; }

.creole-table-wrap > table,
.creole-table-wrap > .wp-block-table table,
.creole-table-wrap table {
    width: auto !important;
    min-width: 100%;
    overflow: visible !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.creole-table-wrap th,
.creole-table-wrap td {
    min-width: 110px;
    white-space: normal;
    word-break: break-word;
}

.creole-table-wrap th:first-child,
.creole-table-wrap td:first-child {
    min-width: 90px;
}

/* Scroll indicator bar — sits flush below the table wrapper */
.creole-scroll-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--mauritius-blue);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    margin-top: -1px;
    border-radius: 0 0 0.75rem 0.75rem;
    border: 1px solid rgba(26, 32, 109, 0.15);
    border-top: none;
    user-select: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.creole-scroll-bar svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.creole-scroll-bar.is-visible {
    display: flex;
}

.creole-scroll-bar.is-fading {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

@media (max-width: 768px) {
    .creole-table-wrap th,
    .creole-table-wrap td,
    body .wp-block-table th,
    body .wp-block-table td {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.82rem;
    }

    /* Keep tables contained within the article on mobile */
    .prose .wp-block-table,
    .prose figure.wp-block-table {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   8. CATEGORY BUTTONS
   ========================================================================== */

.category-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-btn.active {
    background: linear-gradient(135deg, var(--mauritius-blue) 0%, #2a3494 100%);
    box-shadow: 0 4px 12px rgba(26, 32, 109, 0.25);
}

/* ==========================================================================
   9. SCROLLBAR (global)
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(26, 32, 109, 0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 32, 109, 0.4);
}

/* ==========================================================================
   10. PROSE TYPOGRAPHY
   ========================================================================== */

.prose > * + * {
    margin-top: 1.5em;
}

.prose h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--mauritius-blue);
    margin-top: 2em;
    margin-bottom: 1em;
}

.prose h3 {
    font-size: 1.25em;
    font-weight: 500 !important;
    color: var(--mauritius-blue);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.prose h4 {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--mauritius-blue);
    margin-top: 1.35em;
    margin-bottom: 0.65em;
    line-height: 1.35;
}

.prose h5,
.prose h6 {
    font-size: 1em;
    font-weight: 700;
    color: #111827;
    margin-top: 1.25em;
    margin-bottom: 0.6em;
    line-height: 1.35;
}

.prose p {
    line-height: 1.75;
    margin-bottom: 1.25em;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.625em;
    margin-bottom: 1.25em;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.625em;
    margin-bottom: 1.25em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose blockquote {
    font-weight: 500;
    font-style: italic;
    color: #111827;
    border-left-width: 0.25rem;
    border-left-color: var(--mauritius-yellow);
    quotes: "\201C" "\201D" "\2018" "\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
}

.prose strong {
    font-weight: 700 !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   11. BLOG POST LINKS
   ========================================================================== */

article.prose a,
.prose a {
    color: var(--mauritius-red) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    transition: color 0.2s;
}

article.prose a:hover,
.prose a:hover {
    color: var(--mauritius-blue) !important;
}

/* ==========================================================================
   12. WP BLOCK GROUP
   ========================================================================== */

.wp-block-group {
    margin-bottom: 2rem;
}

/* ==========================================================================
   13. RANKMATH TABLE OF CONTENTS
   ========================================================================== */

#rank-math-toc,
.wp-block-rank-math-toc-block {
    background: #ffffff !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(100, 116, 139, 0.55) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
}

#rank-math-toc::before {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 150px !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(234, 40, 57, 0.1) 0%, transparent 70%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

#rank-math-toc h2 {
    font-size: 1.25rem !important;
    color: var(--mauritius-blue) !important;
    margin: 0 0 1rem 0 !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(234, 40, 57, 0.1);
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    position: relative !important;
    z-index: 1 !important;
}

#rank-math-toc nav {
    position: relative !important;
    z-index: 1 !important;
}

#rank-math-toc nav ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

#rank-math-toc nav ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#rank-math-toc nav > ul > li {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
}

#rank-math-toc nav > ul > li:first-child {
    margin-top: 0 !important;
}

#rank-math-toc nav ul li a {
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 6px 8px !important;
    border-radius: 6px;
    line-height: 1.4;
    background: transparent !important;
}

#rank-math-toc nav > ul > li > a::before {
    content: '\25C8' !important;
    color: var(--mauritius-red) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    display: inline-block !important;
    min-width: 14px;
    opacity: 1 !important;
    transform: none !important;
}

#rank-math-toc nav ul ul {
    margin: 4px 0 8px 10px !important;
    padding-left: 12px !important;
    border-left: 2px solid rgba(26, 32, 109, 0.1) !important;
}

#rank-math-toc nav ul ul li a {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 2px 8px !important;
    line-height: 1.3 !important;
}

#rank-math-toc nav ul ul li a::before {
    content: '\21AA' !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    margin-top: 2px;
}

#rank-math-toc nav ul li a:hover {
    background: rgba(26, 32, 109, 0.05) !important;
    color: var(--mauritius-blue) !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

#rank-math-toc nav ul ul li a:hover::before {
    color: var(--mauritius-blue) !important;
}

/* ==========================================================================
   14. STICKY SIDEBAR
   ========================================================================== */

.sticky {
    z-index: 40;
}

/* ==========================================================================
   15. PROSE IMAGES
   ========================================================================== */

.prose img {
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 4px solid rgba(255, 255, 255, 0.8);
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%;
    height: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.prose img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.prose img.emoji,
.prose img.icon {
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: inline-block;
    width: auto;
    margin: 0;
}

/* ==========================================================================
   16. PAGINATION
   ========================================================================== */

ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.page-numbers:hover,
.page-numbers:focus {
    border-color: var(--mauritius-blue);
    color: var(--mauritius-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.page-numbers.current {
    background: var(--mauritius-blue);
    border-color: var(--mauritius-blue);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(26, 32, 109, 0.3);
}

.page-numbers.prev,
.page-numbers.next {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    height: auto;
    min-width: 0;
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
    transform: none;
    background: transparent;
    color: inherit;
}

/* ==========================================================================
   17. UTILITY: HIDE SCROLLBAR
   ========================================================================== */

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   18. SINGLE BLOG TEMPLATE
   ========================================================================== */

body.single-creole_blog article.prose a,
body.single-creole_blog .prose a {
    color: #EA2839 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
}

body.single-creole_blog article.prose a:hover,
body.single-creole_blog .prose a:hover {
    color: #1A206D !important;
}

body.single-creole_blog article.prose strong,
body.single-creole_blog .prose strong {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 700 !important;
    color: inherit !important;
}

/* Tighten image/caption spacing in single blog content */
body.single-creole_blog .prose .wp-block-image,
body.single-creole_blog .prose figure {
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

body.single-creole_blog .prose figure figcaption,
body.single-creole_blog .prose figcaption.wp-element-caption,
body.single-creole_blog .prose .wp-caption .wp-caption-text {
    margin-top: 0.08rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
}

body.single-creole_blog .comment-form input[type="text"],
body.single-creole_blog .comment-form input[type="email"],
body.single-creole_blog .comment-form input[type="url"],
body.single-creole_blog .comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(26, 32, 109, 0.2);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

body.single-creole_blog .comment-form input:focus,
body.single-creole_blog .comment-form textarea:focus {
    border-color: #1A206D;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.1);
}

body.single-creole_blog .comment-form .submit {
    background: linear-gradient(135deg, #1A206D 0%, #2a3494 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 32, 109, 0.3);
}

body.single-creole_blog .comment-form .submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 32, 109, 0.4);
    filter: brightness(110%);
}

body.single-creole_blog .comment-notes,
body.single-creole_blog .logged-in-as {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

body.single-creole_blog #comments {
    margin-bottom: 2rem;
}

body.single-creole_blog .comments-title,
body.single-creole_blog .comment-reply-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1A206D !important;
    margin-bottom: 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid rgba(26, 32, 109, 0.1);
    padding-bottom: 0.5rem;
}

body.single-creole_blog .comment-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.single-creole_blog .comment-list .comment {
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

body.single-creole_blog .comment-list .children {
    list-style: none !important;
    padding-left: 2rem !important;
    margin-top: 1.5rem !important;
    border-left: 2px dashed rgba(26, 32, 109, 0.15);
}

body.single-creole_blog .comment-author img {
    border-radius: 50% !important;
    margin-right: 1rem;
    float: left;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body.single-creole_blog .comment-author .fn {
    font-weight: 800;
    color: #1A206D;
    font-size: 1.1rem;
    font-style: normal;
}

body.single-creole_blog .comment-author .fn a {
    color: #1A206D !important;
    text-decoration: none !important;
}

body.single-creole_blog .comment-metadata {
    font-size: 0.75rem;
    margin-bottom: 1rem;
    margin-left: 4.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

body.single-creole_blog .comment-metadata a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

body.single-creole_blog .comment-metadata a:hover {
    color: #1A206D !important;
}

body.single-creole_blog .comment-content {
    clear: both;
    color: #475569;
    line-height: 1.6;
    margin-top: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
}

body.single-creole_blog .comment-content p {
    margin-bottom: 0.5rem;
}

body.single-creole_blog .reply {
    margin-top: 1rem;
}

body.single-creole_blog .reply a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    background: rgba(26, 32, 109, 0.05) !important;
    color: #1A206D !important;
    padding: 0.35rem 1rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

body.single-creole_blog .reply a:hover {
    background: #1A206D !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(26, 32, 109, 0.2) !important;
}

body.single-creole_blog #cancel-comment-reply-link {
    color: #EA2839 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    margin-left: 1rem !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(234, 40, 57, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

body.single-creole_blog #cancel-comment-reply-link:hover {
    background: #EA2839 !important;
    color: white !important;
}

/* Article Reactions */
.creole-article-reactions {
    margin-top: 3rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
    background:
        linear-gradient(135deg, rgba(26, 32, 109, 0.06), rgba(234, 40, 57, 0.05)),
        rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.creole-reactions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.creole-reactions-eyebrow {
    display: inline-flex;
    margin-bottom: 0.35rem;
    color: #EA2839;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.creole-reactions-header h2 {
    margin: 0 !important;
    color: #1A206D !important;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
}

.creole-reactions-total {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(26, 32, 109, 0.12);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
}

.creole-reactions-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
}

.creole-reaction-button {
    appearance: none;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 6rem;
    padding: 0.85rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    color: #1e293b;
    cursor: pointer;
    font: inherit;
    text-align: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.creole-reaction-button:hover,
.creole-reaction-button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--reaction-color);
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    outline: none;
}

.creole-reaction-button.is-selected {
    border-color: var(--reaction-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
    box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.12), 0 16px 30px rgba(15, 23, 42, 0.1);
}

.creole-reaction-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.creole-reaction-emoji {
    display: block;
    font-size: 1.65rem;
    line-height: 1;
}

.creole-reaction-label {
    display: block;
    max-width: 100%;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.1;
}

.creole-reaction-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    min-height: 1.35rem;
    padding: 0.18rem 0.45rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.creole-reaction-button.is-selected .creole-reaction-count {
    background: var(--reaction-color);
    color: #ffffff;
}

.creole-reactions-message {
    min-height: 1.25rem;
    margin: 0.85rem 0 0 !important;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .creole-article-reactions {
        margin-top: 2rem;
        padding: 0.85rem;
        border-radius: 1.25rem;
    }

    .creole-reactions-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .creole-reactions-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .creole-reaction-button {
        gap: 0.2rem;
        min-height: 4.25rem;
        padding: 0.55rem 0.25rem;
        border-radius: 0.8rem;
    }

    .creole-reaction-emoji {
        font-size: 1.25rem;
    }

    .creole-reaction-label {
        font-size: 0.62rem;
    }

    .creole-reaction-count {
        min-width: 1.25rem;
        min-height: 1.05rem;
        padding: 0.12rem 0.28rem;
        font-size: 0.62rem;
    }
}

/* Homepage Native Layout */
body.page-template-page-home > main:nth-of-type(1),
body.page-template-page-home-php > main:nth-of-type(1),
body.home > main:nth-of-type(1) {
    display: none !important;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.animate-fade-up {
    transform: translateY(40px);
}

.animate-slide-left {
    transform: translateX(-50px);
}

.animate-slide-right {
    transform: translateX(50px);
}

.animate-scale-up {
    transform: scale(0.95);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.animate-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.animate-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.animate-stagger.is-visible > *:nth-child(1) { transition-delay: 100ms; }
.animate-stagger.is-visible > *:nth-child(2) { transition-delay: 200ms; }
.animate-stagger.is-visible > *:nth-child(3) { transition-delay: 300ms; }
.animate-stagger.is-visible > *:nth-child(4) { transition-delay: 400ms; }
.animate-stagger.is-visible > *:nth-child(5) { transition-delay: 500ms; }
.animate-stagger.is-visible > *:nth-child(6) { transition-delay: 600ms; }

.home-latest-grid.animate-fade-up {
    transform: none;
}

.home-fill-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-zoom-image {
    transition: transform 0.7s ease;
}

a:hover .home-zoom-image {
    transform: scale(1.1);
}

.home-gradient-text {
    background: linear-gradient(to right, #EA2839 0%, #1A206D 33%, #FFD500 66%, #00A551 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-mission .home-gradient-text {
    background: linear-gradient(90deg, #ea2839 0%, #5d68d8 34%, #d39b00 66%, #009b63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-hero {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #f8fbfd;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    opacity: 0.98;
}

.home-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(34rem, 1.14fr);
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 5rem);
    width: 100%;
    max-width: 118rem;
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(4.75rem, 6.5vh, 5.75rem) clamp(2rem, 7vw, 9.5rem) 0;
}

.home-hero-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 37% 54%, rgba(220, 234, 242, 0.46) 0, rgba(220, 234, 242, 0.2) 20rem, transparent 38rem),
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 30%, rgba(255, 255, 255, 0.75) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 56%);
}

.home-hero-copy {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 46rem;
    padding: 0 0 3.4rem;
    text-align: left;
    transform: translateY(-18%);
}

.home-hero-title {
    position: relative;
    margin: 0 0 clamp(2rem, 4vh, 3.25rem);
    color: #071833;
    letter-spacing: 0;
    line-height: 0.86;
}

.home-hero-title span {
    display: block;
}

.home-hero-title-mauritius {
    position: relative;
    font-size: clamp(4.9rem, 6.6vw, 9.25rem);
    font-weight: 800;
    letter-spacing: -0.055em;
}

.home-hero-title-beyond {
    font-size: clamp(4.35rem, 6.9vw, 7.15rem);
    font-weight: 300;
    letter-spacing: -0.065em;
}

.home-hero-title-postcard {
    position: relative;
    display: inline-block !important;
    width: max-content;
    color: #4a9857;
    font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
    font-size: clamp(4.1rem, 5.2vw, 7.5rem);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.05;
}

.home-hero-title-postcard::after {
    content: "";
    position: absolute;
    right: -0.65rem;
    bottom: -0.22rem;
    left: 0.45rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #edc83a;
    transform: rotate(-1.2deg);
}

.home-hero-subtitle {
    max-width: 37.5rem;
    margin: 0 0 2.35rem;
    color: #1d2430;
    font-size: clamp(1.35rem, 1.35vw, 1.78rem);
    font-weight: 500;
    line-height: 1.55;
}


.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.home-hero-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 7.25rem;
    min-height: 2.05rem;
    padding: 0.46rem 0.85rem;
    border: 1.25px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-hero-button:hover {
    transform: translateY(-0.2rem);
}

.home-hero-button-primary {
    background: #43944e;
    color: #ffffff;
    box-shadow: 0 1rem 2rem -1rem rgba(26, 102, 42, 0.55);
}

.home-hero-button-primary:hover {
    background: #327d3e;
}

.home-hero-button-secondary {
    border-color: rgba(67, 148, 78, 0.65);
    background: #ffffff;
    color: #071833;
}

.home-hero-button-secondary:hover {
    border-color: #43944e;
    background: #f7fbf8;
}

.home-hero-art {
    position: relative;
    z-index: 2;
    min-height: 100%;
    pointer-events: none;
}

.home-hero-art::before {
    content: none;
}

.home-hero-note {
    position: absolute;
    top: 56%;
    left: -7.4rem;
    z-index: 7;
    color: #111827;
    font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.35;
    transform: rotate(-4deg);
}

.home-hero-note::after {
    content: "";
    display: block;
    width: 8.6rem;
    height: 0.22rem;
    margin: 0.55rem 0 0 2.4rem;
    border-radius: 9999px;
    background: #111827;
    transform: rotate(-7deg);
}

.home-main {
    position: relative;
    z-index: 10;
    margin-top: 0;
}

.home-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.home-section-heading {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}

.home-section-eyebrow-wrap {
    margin-bottom: 1rem;
}

.home-section-eyebrow {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-section-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.home-path-grid {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-path-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.home-path-card {
    position: relative;
    display: flex;
    flex: 0 0 75vw;
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 2rem;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.home-path-card:hover {
    transform: translateY(-0.5rem);
}

.home-path-card-media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    height: 9rem;
    overflow: hidden;
    background: #e2e8f0;
}

.home-path-card-media-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.home-path-card-body {
    position: relative;
    z-index: 10;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: -2.5rem;
    padding: 0 1.5rem 1.5rem;
}

.home-path-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.home-path-card-icon img,
.home-path-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.home-path-card-label {
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.home-path-card-title {
    margin: 0 0 0.75rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    transition: color 0.2s ease;
}

.home-path-card-desc {
    margin: 0 0 1.5rem;
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.65;
}

.home-path-card-footer {
    margin-top: auto;
}

.home-path-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap 0.2s ease;
}

.home-path-card-link svg {
    width: 1rem;
    height: 1rem;
}

.home-path-card-link:hover {
    gap: 0.75rem;
}

.home-path-card--mauritius-red .home-path-card-icon,
.home-path-card--mauritius-red .home-path-card-link,
.home-path-card--mauritius-red:hover .home-path-card-title {
    color: #EA2839;
}

.home-path-card--mauritius-yellow .home-path-card-icon,
.home-path-card--mauritius-yellow .home-path-card-link,
.home-path-card--mauritius-yellow:hover .home-path-card-title {
    color: #b88a00;
}

.home-path-card--mauritius-green .home-path-card-icon,
.home-path-card--mauritius-green .home-path-card-link,
.home-path-card--mauritius-green:hover .home-path-card-title {
    color: #00A551;
}

.home-explore-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 4rem;
    padding: 0;
}

.home-explore-card {
    position: relative;
    display: block;
    min-height: 17.5rem;
    overflow: hidden;
    border-radius: 1.35rem;
    background: #0f172a;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.home-explore-card:hover {
    transform: translateY(-0.25rem);
}

.home-explore-card-media {
    position: absolute;
    inset: 0;
}

.home-explore-card-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    min-height: 22%;
    padding: 2.75rem 1.35rem 1.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 42% 42% 0 0 / 14% 14% 0 0;
    background: var(--home-explore-color);
    text-align: left;
}

.home-explore-card--blue { --home-explore-color: #1f4f96; --home-explore-icon-color: #1f4f96; }
.home-explore-card--red { --home-explore-color: #d83b36; --home-explore-icon-color: #d83b36; }
.home-explore-card--yellow { --home-explore-color: #efc23a; --home-explore-icon-color: #efb81f; }
.home-explore-card--green { --home-explore-color: #3f913f; --home-explore-icon-color: #3f913f; }

.home-explore-card-icon {
    position: absolute;
    top: -1.8rem;
    left: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--home-explore-icon-color);
    box-shadow: 0 0.65rem 1.4rem rgba(15, 23, 42, 0.16);
}

.home-explore-card-icon svg,
.home-explore-card-icon i,
.home-explore-card-icon img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    stroke-width: 2.8;
}

.home-explore-card-text {
    width: 100%;
    min-width: 0;
}

.home-explore-card h3 {
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2.55rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-explore-card p {
    max-width: 13.5rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
}

.home-explore-card-arrow {
    position: absolute;
    right: 1.3rem;
    bottom: 1.6rem;
    width: 1.55rem;
    height: 1.55rem;
    color: rgba(255, 255, 255, 0.78);
    transition: transform 0.2s ease;
}

.home-explore-card:hover .home-explore-card-arrow {
    transform: translateX(0.25rem);
}

.home-empty-state {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    color: #64748b;
    text-align: center;
}

.hidden {
    display: none !important;
}

.creole-no-x {
    overflow-x: hidden;
}

.site-gradient-text {
    background: linear-gradient(to right, #EA2839, #1A206D, #ca8a04);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-header-nav {
    position: fixed;
    top: var(--site-header-top);
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-header-shell {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header-shell:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.site-header-gradient-line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0;
    background: linear-gradient(to right, transparent, #EA2839, #1A206D, #FFD500, #00A551, transparent);
    opacity: 0.9;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.5rem;
    color: inherit;
    text-decoration: none !important;
}

.site-brand-logo {
    position: relative;
    flex: 0 0 auto;
    width: 9.375rem;
    height: 3rem;
    aspect-ratio: 772 / 247;
    transition: transform 0.3s ease;
}

.site-brand:hover .site-brand-logo {
    transform: scale(1.1);
}

.site-brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}

.site-desktop-nav {
    display: none;
}

.site-desktop-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.site-nav-link.is-active {
    color: #1A206D;
}

.site-nav-link.is-inactive {
    color: #4b5563;
}

.site-nav-link.is-inactive:hover {
    color: #EA2839;
}

.site-nav-link-label,
.site-nav-chevron {
    position: relative;
    z-index: 10;
}

.site-nav-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.site-nav-dropdown:hover .site-nav-chevron {
    transform: rotate(180deg);
}

.site-nav-underline {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(to right, #EA2839, #1A206D, #FFD500, #00A551);
    opacity: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
    transition: opacity 0.3s ease;
}

.site-nav-link:hover .site-nav-underline,
.site-nav-underline.is-visible {
    opacity: 1;
}

.site-nav-dropdown {
    position: relative;
}

.site-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 50;
    display: none;
    width: 15rem;
    padding-top: 1rem;
    transform: translateX(-50%);
}

.site-nav-dropdown:hover .site-dropdown-panel {
    display: block;
}

.site-dropdown-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(24px);
}

.site-dropdown-link {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-dropdown-link.has-border {
    border-bottom: 1px solid #cbd5e1;
}

.site-dropdown-link:hover {
    background: #1A206D;
    color: #ffffff;
}

.site-dropdown-link-red:hover {
    background: #EA2839;
}

.site-nav-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.5rem;
    background: #cbd5e1;
}

.site-nav-divider-compact {
    display: none;
}

.site-search-form {
    position: relative;
    z-index: 70;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
}

.site-search-form.is-open {
    position: static;
}

.site-search-wrap {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    isolation: isolate;
    transition: width 0.25s ease;
}

.site-search-form.is-open .site-search-wrap {
    position: absolute;
    top: 50%;
    right: 3.25rem;
    width: 16rem;
    transform: translateY(-50%);
}

.site-search-wrap:focus-within {
    width: 16rem;
}

.site-search-input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 2.75rem 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: color 0.2s ease, opacity 0.18s ease;
}

.site-search-form.is-open .site-search-input,
.site-search-wrap:focus-within .site-search-input {
    opacity: 1;
    pointer-events: auto;
}

.site-search-input::placeholder {
    color: #94a3b8;
}

.site-search-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.3s ease;
}

.site-search-form.is-open .site-search-bg,
.site-search-wrap:focus-within .site-search-bg {
    border-color: rgba(26, 32, 109, 0.35);
    background: #f1f5f9;
    opacity: 1;
}

.site-search-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.2s ease, background 0.2s ease;
}

.site-search-input {
    position: relative;
    z-index: 1;
}

.site-search-toggle:hover,
.site-search-toggle:focus {
    color: #1A206D;
    outline: none;
}

.site-search-icon {
    width: 1rem;
    height: 1rem;
}

.site-search-form.is-open .site-search-toggle,
.site-search-wrap:focus-within .site-search-icon {
    color: #1A206D;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    left: 0;
    z-index: 100;
    max-height: min(30rem, 80vh);
    overflow: hidden auto;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 32, 109, 0.35) transparent;
}

.site-search-form .search-results-dropdown {
    left: auto;
    width: min(24rem, calc(100vw - 2rem));
}

.site-mobile-search .search-results-dropdown,
.blog-search-inner .search-results-dropdown {
    right: 0;
    left: 0;
    width: auto;
}

.search-results-dropdown::-webkit-scrollbar {
    width: 0.45rem;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(26, 32, 109, 0.3);
}

.search-results-dropdown.is-hidden {
    display: none;
}

.search-results-dropdown.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.search-dropdown-list {
    display: grid;
    grid-template-columns: 1fr;
}

.search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}

.search-dropdown-item:hover,
.search-dropdown-item:focus {
    background: #f8fafc;
    outline: none;
}

.search-dropdown-thumb {
    position: relative;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #e2e8f0;
}

.search-dropdown-thumb img,
.search-dropdown-thumb span {
    display: block;
    width: 100%;
    height: 100%;
}

.search-dropdown-thumb img {
    object-fit: cover;
}

.search-dropdown-body {
    min-width: 0;
}

.search-dropdown-body > span {
    display: block;
    margin-bottom: 0.2rem;
    color: #1A206D;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.search-dropdown-body h4 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.search-dropdown-item:hover h4,
.search-dropdown-item:focus h4 {
    color: #EA2839;
}

.search-dropdown-empty {
    padding: 1.5rem;
    color: #64748b;
    text-align: center;
}

.search-dropdown-empty p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.search-dropdown-footer {
    padding: 0.8rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    text-align: center;
}

.search-dropdown-footer button {
    border: 0;
    background: transparent;
    color: #1A206D;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.search-dropdown-footer button:hover,
.search-dropdown-footer button:focus {
    color: #EA2839;
    outline: none;
}

.site-user-menu {
    position: relative;
    display: none;
    flex: 0 0 auto;
}

.site-user-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.6);
    color: #475569;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.site-user-button:hover {
    border-color: rgba(26, 32, 109, 0.35);
    color: #1A206D;
}

.site-user-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.site-user-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    display: none;
    width: 14rem;
    padding-top: 1rem;
    pointer-events: none;
}

.site-user-menu:hover .site-user-panel {
    display: block;
    pointer-events: auto;
}

.site-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.site-mobile-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #1A206D;
    transition: background 0.2s ease;
}

.site-mobile-icon-button:hover {
    background: rgba(255, 255, 255, 0.25);
}

.site-mobile-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.site-mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem 0;
}

.site-mobile-panel-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(24px);
}

.site-mobile-user-inner {
    gap: 0.25rem;
}

.site-mobile-link,
.site-mobile-parent-link,
.site-mobile-submenu-link {
    display: block;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #1A206D;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-mobile-parent-link {
    flex-grow: 1;
    font-weight: 800;
}

.site-mobile-link:hover,
.site-mobile-parent-link:hover {
    background: rgba(26, 32, 109, 0.05);
    color: #EA2839;
}

.site-mobile-menu-item {
    display: flex;
    flex-direction: column;
}

.site-mobile-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.site-mobile-parent-row:hover {
    background: rgba(26, 32, 109, 0.05);
}

.site-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: #1A206D;
    outline: none;
    transition: color 0.2s ease;
}

.site-mobile-submenu-toggle:hover {
    color: #EA2839;
}

.site-mobile-submenu-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}

.site-mobile-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
    margin-left: 0;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(26, 32, 109, 0.1);
}

.site-mobile-submenu.hidden {
    display: none !important;
}

.site-mobile-submenu-link {
    color: #4b5563;
    font-size: 0.875rem;
}

.site-mobile-submenu-link:hover {
    background: rgba(26, 32, 109, 0.05);
    color: #1A206D;
}

#mobile-menu .site-mobile-link,
#mobile-menu .site-mobile-parent-link {
    font-weight: 800;
}

#mobile-menu .site-mobile-submenu-link {
    font-weight: 600;
}

.site-mobile-search {
    position: relative;
    margin-top: 0.5rem;
}

.site-mobile-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid #111827;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    color: #1e293b;
    font-size: 0.875rem;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    transition: background 0.2s ease;
}

.site-mobile-search-input:focus {
    background: #ffffff;
}

.site-mobile-search-input::placeholder {
    color: #64748b;
}

.site-mobile-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #1e293b;
    transform: translateY(-50%);
}

.site-main {
    min-height: 100vh;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
}

.site-footer {
    position: relative;
    margin-top: auto;
    overflow: hidden;
    padding: 5rem 0 2.5rem;
    background: #050a14;
    color: #cbd5e1;
    font-family: Inter, system-ui, sans-serif;
}

.site-footer-bg,
.site-footer-curves,
.site-footer-flag-line {
    position: absolute;
    z-index: 0;
}

.site-footer-bg {
    inset: 0;
    background: linear-gradient(135deg, #020617, #050a14, #000000);
}

.site-footer-glow {
    position: absolute;
    z-index: 0;
    border-radius: 9999px;
    pointer-events: none;
    mix-blend-mode: screen;
}

.site-footer-glow-blue {
    top: 0;
    right: 0;
    width: 50rem;
    height: 50rem;
    background: rgba(30, 58, 138, 0.2);
    filter: blur(120px);
    opacity: 0.6;
    transform: translate(50%, -50%);
}

.site-footer-glow-red {
    bottom: 0;
    left: 0;
    width: 37.5rem;
    height: 37.5rem;
    background: rgba(127, 29, 29, 0.1);
    filter: blur(100px);
    opacity: 0.5;
    transform: translate(-33%, 50%);
}

.site-footer-curves {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

.site-footer-flag-line {
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(to right, #EA2839, #1A206D, #FFD500, #00A551);
    box-shadow: 0 0 25px rgba(234, 40, 57, 0.5);
}

.site-footer-inner {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.site-footer-brand-col,
.site-footer-menu-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.site-footer-brand:hover {
    transform: scale(1.05);
}

.site-footer-brand-logo {
    position: relative;
    flex: 0 0 auto;
    width: 7.8125rem;
    height: 2.5rem;
    aspect-ratio: 772 / 247;
}

.site-footer-brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}

.site-footer-desc {
    margin: 0;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.65;
}

.site-footer-menu-col h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-footer-menu-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    box-shadow: 0 0 10px currentColor;
}

.site-footer-menu-dot.theme-mauritius-red {
    background: #EA2839;
    color: #EA2839;
}

.site-footer-menu-dot.theme-mauritius-blue {
    background: #1A206D;
    color: #1A206D;
}

.site-footer-menu-dot.theme-mauritius-yellow {
    background: #FFD500;
    color: #FFD500;
}

.site-footer-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu-container ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.3s ease;
}

.footer-menu-container ul li a:hover {
    padding-left: 12px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.footer-menu-container ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.footer-menu-container ul li a:hover::before {
    transform: translateY(-50%) scaleX(1);
}

.theme-mauritius-red ul li a:hover { color: #fca5a5; }
.theme-mauritius-red ul li a::before { background-color: #EA2839; }
.theme-mauritius-blue ul li a:hover { color: #93c5fd; }
.theme-mauritius-blue ul li a::before { background-color: #1A206D; }
.theme-mauritius-yellow ul li a:hover { color: #fde047; }
.theme-mauritius-yellow ul li a::before { background-color: #FFD500; }

.site-footer-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 2px solid #334155;
    font-size: 0.875rem;
}

.site-footer-credit {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.site-footer-copy {
    color: #e2e8f0;
    font-weight: 500;
}

.site-footer-copy span {
    color: #ffffff;
    font-weight: 800;
}

.site-footer-made {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: #cbd5e1;
    font-size: 0.75rem;
}

.site-footer-made svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #EA2839;
    fill: currentColor;
}

.site-footer-actions {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

.site-footer-legal {
    display: flex;
    gap: 1.5rem;
    color: #e2e8f0;
    font-weight: 500;
}

.site-footer-legal a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-legal a:hover {
    color: #ffffff;
}

.site-footer-action-divider {
    display: none;
    width: 1px;
    height: 1rem;
    background: #334155;
}

.site-footer-socials {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.site-footer-social svg {
    width: 1rem;
    height: 1rem;
}

.site-footer-social:hover {
    transform: scale(1.05);
    background: #ffffff;
}

.site-footer-social-facebook:hover {
    color: #1877F2;
}

.site-footer-social-instagram:hover {
    color: #db2777;
}


@media (min-width: 768px) {
    .site-brand-logo {
        width: 12.5rem;
        height: 4rem;
    }

    .site-desktop-nav {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.25rem;
        padding: 0.375rem 0.25rem 0.375rem 2rem;
        border: 1px solid rgba(226, 232, 240, 0.6);
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        backdrop-filter: blur(12px);
    }

    .site-user-menu {
        display: block;
    }

    .site-mobile-actions {
        display: none;
    }

    .site-mobile-panel {
        display: none !important;
    }

    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-right: 0;
        padding-left: 0;
    }

    .site-footer-bottom {
        flex-direction: row;
    }

    .site-footer-credit {
        order: 1;
        text-align: left;
    }

    .site-footer-made {
        justify-content: flex-start;
    }

    .site-footer-actions {
        order: 2;
        flex-direction: row;
        justify-content: flex-end;
        width: auto;
    }

    .site-footer-action-divider {
        display: block;
    }

}

@media (min-width: 1024px) {
    .site-footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-footer-brand-col {
        padding-right: 2rem;
    }
}

.home-ad-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto 3rem;
    min-height: 300px;
    contain: layout;
    transform: none !important;
    transition: opacity 0.25s ease;
}

.home-ad-wrap-middle {
    margin-top: 0;
    margin-bottom: var(--home-section-gap);
}

.home-ad-box {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    margin: 0 auto;
    padding: 1rem 0.25rem;
    background: rgba(255, 255, 255, 0.62);
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(12px);
}

.home-ad-box ins.adsbygoogle,
.home-ad-wrap ins.adsbygoogle {
    display: block !important;
    width: 100%;
    min-height: 250px;
}

.home-ad-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(to right, rgba(26, 32, 109, 0.05), rgba(234, 40, 57, 0.05));
    opacity: 0.5;
    filter: blur(48px);
    transform: translate(-50%, -50%);
}

.home-ad-label {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-guides-section {
    position: relative;
    overflow: hidden;
    padding: 1rem 0 2rem;
    background: transparent;
}

.home-guides-heading {
    margin-bottom: 2.5rem;
}

.home-guides-slider {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.home-guides-track {
    display: flex;
    gap: 1.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.6rem 4.5rem 2.25rem;
    scroll-padding-inline: 4.5rem;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-guides-track::-webkit-scrollbar {
    display: none;
}

.home-guide-card {
    --guide-accent: #1769c2;
    position: relative;
    display: grid;
    flex: 0 0 min(30rem, 78vw);
    grid-template-columns: 52% 48%;
    min-height: 20rem;
    overflow: hidden;
    border-radius: 1.45rem;
    background: #ffffff;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 1024px) {
    .home-guide-card {
        flex-basis: calc((100% - 2.9rem) / 2.45);
    }
}

.home-guide-card:hover {
    transform: translateY(-0.25rem);
}

.home-guide-card--blue {
    --guide-accent: #2f6edb;
}

.home-guide-card--green {
    --guide-accent: #5ca654;
}

.home-guide-card--red {
    --guide-accent: #d94c45;
}

.home-guide-card--yellow {
    --guide-accent: #FFD500;
}

.home-guide-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0.36rem;
    background: var(--guide-accent);
}

.home-guide-image {
    position: relative;
    display: block;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #e2e8f0;
    clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
}

.home-guide-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.12) 100%);
    pointer-events: none;
}

.home-guide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-guide-category {
    position: absolute;
    top: 1.45rem;
    left: 1.45rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: calc(100% - 2.9rem);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: var(--guide-accent);
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(10px);
}

.home-guide-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--guide-accent);
}

.home-guide-category-icon svg,
.home-guide-category-icon img {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
    stroke-width: 2.6;
}

.home-guide-copy {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2.35rem 5.3rem 0.35rem;
    background:
        linear-gradient(105deg, rgba(255,255,255,0.62) 0%, #ffffff 22%, #ffffff 100%);
}

.home-guide-copy::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3rem;
    width: 6rem;
    background: #ffffff;
    transform: skewX(-8deg);
    transform-origin: center;
}

.home-guide-copy > * {
    position: relative;
    z-index: 1;
}

.home-guide-card h3 {
    margin: 0 0 0.85rem;
    color: #071833;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1.35rem, 1.45vw, 1.75rem);
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.16;
}

.home-guide-title-rule {
    display: block;
    width: 2rem;
    height: 0.16rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: var(--guide-accent);
}

.home-guide-card p {
    max-width: 13rem;
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.55;
}

.home-guide-arrow {
    position: absolute;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 999px;
    background: var(--guide-accent);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.home-guide-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.home-guides-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(255,255,255,0.68);
    color: #071833;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
}

.home-guides-nav--prev {
    left: 0.75rem;
}

.home-guides-nav--next {
    right: 0.75rem;
}

.home-guides-nav svg {
    width: 1.4rem;
    height: 1.4rem;
}

@media (max-width: 767px) {
    .home-guides-section {
        padding-top: 0;
    }

    .home-guides-heading {
        margin-bottom: 2rem;
    }

    .home-guides-track {
        gap: 0.9rem;
        padding: 0.4rem 3.6rem 2rem 1rem;
        scroll-padding-inline: 1rem;
    }

    .home-guide-card {
        flex-basis: min(19rem, 78vw);
        grid-template-columns: 1fr;
        min-height: 28rem;
    }

    .home-guide-image {
        height: 14rem;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }

    .home-guide-copy {
        justify-content: flex-start;
        padding: 1.3rem 1.4rem 5rem;
    }

    .home-guide-copy::before {
        content: none;
    }

    .home-guide-card h3 {
        font-size: 1.3rem;
    }

    .home-guides-nav {
        display: inline-flex;
        width: 2.65rem;
        height: 2.65rem;
        background: rgba(255, 255, 255, 0.76);
    }

    .home-guides-nav--prev {
        left: 0.45rem;
    }

    .home-guides-nav--next {
        right: 0.45rem;
    }

    .home-guides-nav svg {
        width: 1.15rem;
        height: 1.15rem;
    }
}

.home-learn-section {
    margin-bottom: 4rem;
}

.home-language-panel {
    position: relative;
    display: grid;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 213, 0, 0.14), transparent 24rem),
        linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 247, 0.94));
}

.home-language-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 213, 0, 0.36) 1.4px, transparent 1.4px);
    background-size: 0.9rem 0.9rem;
    background-position: right 3rem top 3.5rem;
    mask-image: linear-gradient(90deg, transparent 55%, #000 90%);
    opacity: 0.55;
    pointer-events: none;
}

.home-language-copy,
.home-language-visual {
    position: relative;
    z-index: 1;
}

.home-language-copy {
    z-index: 3;
}

.home-language-eyebrow {
    display: block;
    margin-bottom: 1rem;
    color: #2f9b58;
    font-size: clamp(0.78rem, 1.1vw, 0.96rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-language-title {
    margin: 0 0 1.35rem;
    color: #071833;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.0;
}

.home-language-title span {
    display: block;
}

.home-language-title span:last-child {
    position: relative;
    display: inline-block;
    color: #4f9855;
    font-weight: 520;
    font-style: italic;
}

.home-language-title span:last-child::after {
    content: "";
    position: absolute;
    right: 0.1em;
    bottom: -0.12em;
    left: 0.04em;
    height: 0.13em;
    border-radius: 999px;
    background: #e5bd3b;
    transform: rotate(-1deg);
}

.home-language-intro {
    max-width: 34rem;
    margin: 0 0 2.25rem;
    color: #344256;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.55;
}

.home-language-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 42rem;
    margin-bottom: 2rem;
}

.home-language-feature {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    color: #243044;
    text-align: center;
    text-decoration: none !important;
}

.home-language-feature svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.1rem;
    stroke-width: 2.2;
}

.home-language-feature--green svg {
    color: #2f9b58;
}

.home-language-feature--yellow svg {
    color: #efc23a;
}

.home-language-feature--blue svg {
    color: #1f4f96;
}

.home-language-feature--red svg {
    color: #d83b36;
}

.home-language-feature strong {
    margin: 0;
    color: #16243a;
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.2;
}

.home-language-feature span {
    max-width: 9rem;
    color: #556174;
    font-size: 0.86rem;
    font-weight: 520;
    line-height: 1.35;
}

.home-language-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 3.7rem;
    padding: 0 1.65rem;
    border: 1px solid rgba(0, 121, 64, 0.18);
    border-radius: 9999px;
    background: #329b55;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(47, 155, 88, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.home-language-button:hover {
    transform: translateY(-2px);
    background: #287f47;
    color: #ffffff;
    box-shadow: 0 16px 26px rgba(47, 155, 88, 0.28);
}

.home-language-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.home-language-visual {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: min(56%, 50rem);
    min-height: 24rem;
    pointer-events: none;
}

.home-language-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 2rem 2rem 0;
    background: transparent;
    box-shadow: none;
}

.home-language-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.home-language-image-wrap::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.86) 16%, rgba(255, 255, 255, 0.42) 34%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.08));
}

.home-language-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-language-bubbles {
    position: absolute;
    top: 3rem;
    left: clamp(1rem, 8vw, 5.5rem);
    z-index: 4;
    display: grid;
    gap: 0.9rem;
}

.home-language-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 10rem;
    min-height: 3.75rem;
    padding: 0.55rem 1.5rem;
    border-radius: 999px;
    color: #ffffff;
    font-size: clamp(1.55rem, 2.7vw, 2.45rem);
    font-weight: 520;
    font-style: italic;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
}

.home-language-bubble::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    bottom: -0.7rem;
    border-width: 0.9rem 0.75rem 0 0;
    border-style: solid;
    border-color: var(--language-bubble-color) transparent transparent transparent;
    transform: rotate(-10deg);
}

.home-language-bubble--green {
    --language-bubble-color: #329b55;
    margin-left: 1rem;
    background: #329b55;
    color: #ffffff;
}

.home-language-bubble--red {
    --language-bubble-color: #d83b36;
    margin-left: 5rem;
    background: #d83b36;
    color: #ffffff;
}

.home-language-bubble--blue {
    --language-bubble-color: #1f4f96;
    margin-left: 2.6rem;
    background: #1f4f96;
    color: #ffffff;
}

.home-language-bubble--yellow {
    --language-bubble-color: #efc23a;
    margin-left: 10rem;
    min-width: 4.6rem;
    width: 4.6rem;
    height: 4.6rem;
    padding: 0;
    background: #efc23a;
    color: #ffffff;
}

.home-language-bubble svg {
    width: 1.8rem;
    height: 1.8rem;
    color: #071833;
    stroke-width: 2.6;
}

@media (max-width: 767px) {
    .home-language-panel {
        gap: 1.5rem;
        padding: 1.5rem;
        border-radius: 1.75rem;
    }

    .home-language-panel::before {
        background-position: right 1.25rem top 48%;
        mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
    }

    .home-language-title {
        margin-bottom: 1rem;
        font-size: clamp(2.35rem, 11vw, 3.7rem);
    }

    .home-language-intro {
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

    .home-language-features {
        gap: 0.85rem 0.6rem;
        margin-bottom: 1.5rem;
    }

    .home-language-feature svg {
        width: 1.55rem;
        height: 1.55rem;
    }

    .home-language-feature strong {
        font-size: 0.82rem;
    }

    .home-language-feature span {
        max-width: 7.5rem;
        font-size: 0.73rem;
        line-height: 1.25;
    }

    .home-language-button {
        width: 100%;
        min-height: 3.15rem;
        padding: 0 1.25rem;
        font-size: 0.93rem;
    }

    .home-language-visual {
        display: none;
    }

    .home-language-image-wrap {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .home-language-bubbles {
        top: 0.3rem;
        left: 0.1rem;
        gap: 0.65rem;
    }

    .home-language-bubble {
        min-width: 7.5rem;
        min-height: 2.85rem;
        padding: 0.45rem 1rem;
        font-size: 1.35rem;
    }

    .home-language-bubble--green {
        margin-left: 0.25rem;
    }

    .home-language-bubble--red {
        margin-left: 3.8rem;
    }

    .home-language-bubble--blue {
        margin-left: 1.6rem;
    }

    .home-language-bubble--yellow {
        margin-left: 7rem;
        width: 3.5rem;
        height: 3.5rem;
        min-width: 3.5rem;
    }

    .home-language-bubble svg {
        width: 1.35rem;
        height: 1.35rem;
    }
}

.home-mission {
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
    border-radius: 3rem;
    background: #0f172a;
    color: #ffffff;
}

.home-mission-bg,
.home-mission-overlay {
    position: absolute;
    inset: 0;
}

.home-mission-bg {
    background: #1f2937;
}

.home-mission-image {
    width: 100%;
    height: 100%;
    background-image: url("https://creolemauritius.com/wp-content/uploads/2025/11/mauritiusbeach.webp");
    background-position: center;
    background-size: cover;
    opacity: 0.6;
}

.home-mission-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0));
}

.home-mission-content {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    padding: 2rem;
}

.home-mission h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.home-mission p {
    margin: 0 0 1.75rem;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.65;
}

.home-mission-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.home-mission-link:hover {
    transform: translateY(-0.25rem);
    background: #1A206D;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(26, 32, 109, 0.5);
}

.home-mission-link svg {
    width: 1rem;
    height: 1rem;
}

.home-newsletter {
    position: relative;
    overflow: visible; /* Allow petals to overlap outer edges */
    margin: 5rem auto 3rem;
    background: #43944e; /* Mockup Green */
    border-radius: 2rem; /* Matched to other containers */
    width: 100%;
    max-width: 100%; /* Spans full width of container */
}

.home-newsletter-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.25rem 3.5rem;
    width: 100%;
}

.home-newsletter-copy-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1 auto;
}

.home-newsletter-icon-circle {
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.home-newsletter-icon-circle svg {
    width: 32px;
    height: 32px;
    stroke: #43944e;
}

.home-newsletter-icon-circle img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.home-newsletter-copy-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.home-newsletter-copy-text h2 {
    color: #ffffff !important;
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
}

.home-newsletter-copy-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    max-width: 460px;
}

.home-newsletter-form-wrap {
    position: relative;
    flex: 0 1 450px;
    min-width: 320px;
    z-index: 20;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

.home-newsletter-form-pill,
.home-newsletter-form-pill .fluentform,
.home-newsletter-form-pill .fluentform-wrapper,
.home-newsletter-form-pill .fluentform_wrapper,
.home-newsletter-form-pill .frm-fluentform,
.home-newsletter-form-pill .frm-fluent-form,
.home-newsletter-form-pill form,
.subscribe-newsletter,
.subscribe-newsletter .fluentform,
.subscribe-newsletter .fluentform-wrapper,
.subscribe-newsletter .fluentform_wrapper,
.subscribe-newsletter .frm-fluentform,
.subscribe-newsletter .frm-fluent-form,
.subscribe-newsletter form {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.home-newsletter-form-pill .frm-fluentform,
.home-newsletter-form-pill .frm-fluent-form,
.home-newsletter-form-pill form,
.subscribe-newsletter .frm-fluentform,
.subscribe-newsletter .frm-fluent-form,
.subscribe-newsletter form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: transparent !important;
    border-radius: 32px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Hide/override default columns, cell tables and layout structures of Fluent Form */
.home-newsletter-form-pill .ff-t-container,
.home-newsletter-form-pill .ff-t-row,
.home-newsletter-form-pill .ff-t-cell,
.home-newsletter-form-pill .ff-el-group,
.home-newsletter-form-pill .ff-el-input--wrap,
.subscribe-newsletter .ff-t-container,
.subscribe-newsletter .frm-fluentform .ff-t-container,
.subscribe-newsletter .frm-fluent-form .ff-t-container,
.frm-fluent-form .ff-t-container,
#fluentform_2.frm-fluent-form .ff-t-container {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}

.home-newsletter-form-pill .fluentform .ff-el-group {
    margin-bottom: 0 !important; /* Reset default fluentform bottom spacing */
}

/* Override column widths configured in the plugin (e.g. 50/50 split) */
.home-newsletter-form-pill .ff-t-column-1 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
}

.home-newsletter-form-pill .ff-t-column-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
}

/* Ensure submit button wrapper inside column 2 takes full size */
.home-newsletter-form-pill .ff-t-column-2 .ff-el-group,
.home-newsletter-form-pill .ff-t-column-2 .ff-el-submit-button,
.home-newsletter-form-pill .ff-submit-btn-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
}

/* The actual input field */
.home-newsletter-form-pill .ff-el-form-control {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important; /* Transparent so it uses the form wrapper's white background */
    color: #333333 !important;
    padding: 0 24px !important;
    font-size: 1rem !important;
    border-radius: 9999px 0 0 9999px !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.home-newsletter-form-pill .ff-el-form-control:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.home-newsletter-form-pill .ff-el-form-control::placeholder {
    color: #888888 !important;
    font-weight: 400 !important;
}

/* Submit button wrapper */
.home-newsletter-form-pill .ff-el-submit-button,
.home-newsletter-form-pill .ff-submit-btn-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    height: 100% !important;
}

/* Submit button */
.home-newsletter-form-pill .ff-btn-submit {
    height: 100% !important;
    background: #F4C748 !important; /* Yellow-gold color matching the mockup */
    color: #1a1a1a !important; /* Dark text */
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
    border-radius: 0 9999px 9999px 0 !important;
    padding: 0 36px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-newsletter-form-pill .ff-btn-submit:hover {
    background: #E6B736 !important; /* Slightly darker gold on hover */
    color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Error message positioning to float below the pill */
.home-newsletter-form-pill .error,
.home-newsletter-form-pill .ff-error-text {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 20px !important;
    color: #ffcdd2 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* Success message styling */
.home-newsletter-form-pill .ff-message-success {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    z-index: 100 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Petals element positioning */
.home-newsletter-petals {
    position: absolute;
    right: -42px;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    height: 110px;
    pointer-events: none;
    z-index: 3;
    display: none; /* Hidden on mobile */
}

.home-newsletter-petals svg {
    display: block;
    width: 100%;
    height: 100%;
}

.home-gallery {
    width: 100%;
}

.home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 16rem;
}

.home-gallery-item {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.home-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.home-gallery-item:hover .home-gallery-image {
    transform: scale(1.1);
}

.home-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.home-gallery-item:hover .home-gallery-overlay {
    background: rgba(0, 0, 0, 0);
}

@media (min-width: 640px) {
    .home-hero-actions {
        gap: 1rem;
    }

    .home-hero-button {
        flex: 0 0 auto;
        gap: 0.55rem;
        padding-right: 0.85rem;
        padding-left: 0.85rem;
        font-size: 0.9rem;
    }

    .home-path-card {
        flex-basis: 60vw;
    }

    .home-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .home-hero-inner {
        padding-top: clamp(4.75rem, 6.5vh, 5.75rem);
    }

    .home-hero-copy {
        padding-left: 0;
    }

    .home-section {
        margin-bottom: 8rem;
    }

    .home-section-eyebrow {
        font-size: 0.875rem;
    }

    .home-path-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        overflow: visible;
    }

    .home-path-card {
        flex: initial;
        border-radius: 2.5rem;
    }

    .home-path-card-media {
        height: 12rem;
    }

    .home-path-card-body {
        margin-top: -3rem;
        padding: 0 2rem 2rem;
    }

    .home-path-card-icon {
        width: 4rem;
        height: 4rem;
        margin-bottom: 1.5rem;
        border-radius: 1rem;
    }

    .home-path-card-icon img,
    .home-path-card-icon svg {
        width: 2rem;
        height: 2rem;
    }

    .home-path-card-label {
        margin-bottom: 0.75rem;
    }

    .home-path-card-title {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    .home-path-card-desc {
        margin-bottom: 2rem;
        font-size: 0.875rem;
    }

    .home-explore-grid {
        gap: 1rem;
        margin-bottom: 6rem;
    }

    .home-explore-card {
        min-height: 20.5rem;
    }

    .home-explore-card-content {
        padding: 2.9rem 1.55rem 1.35rem;
    }

    .home-explore-card h3 {
        font-size: clamp(2.15rem, 1.7vw, 2.8rem);
    }

    .home-explore-card p {
        font-size: 0.8rem;
    }

    .home-ad-wrap-middle {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .home-ad-box {
        padding: 1.5rem;
        border-radius: 2rem;
    }

    .home-learn-section {
        margin-bottom: 6rem;
    }

    .home-language-panel {
        grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1fr);
        align-items: center;
        min-height: 33rem;
        padding: clamp(2rem, 4vw, 4.3rem) 0 clamp(2rem, 4vw, 4.3rem) clamp(2rem, 4vw, 4.3rem);
        border-radius: 2.35rem;
    }

    .home-language-copy {
        max-width: 43rem;
    }

    .home-language-image-wrap {
        border-radius: 0 2.35rem 2.35rem 0;
    }

    .home-language-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-language-feature strong {
        font-size: 1rem;
    }

    .home-mission {
        margin-bottom: 6rem;
    }

    .home-mission-content {
        padding: 3rem;
    }

    .home-mission p {
        font-size: 1.125rem;
    }

    .home-mission-link {
        font-size: 1rem;
    }

    .home-newsletter-form-pill .ff-t-container,
    .home-newsletter-form-pill .frm-fluent-form .ff-t-container,
    .subscribe-newsletter .ff-t-container,
    .subscribe-newsletter .frm-fluent-form .ff-t-container,
    .frm-fluent-form .ff-t-container,
    #fluentform_2.frm-fluent-form .ff-t-container {
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    .home-newsletter {
        border-radius: 2.35rem; /* Matched to language panel on desktop */
    }

    .home-newsletter-inner {
        padding: 3rem 4rem 3rem 3rem;
    }
    
    .home-newsletter-copy-wrap {
        flex-direction: row;
        text-align: left;
        gap: 1.5rem;
    }
    
    .home-newsletter-copy-text {
        align-items: flex-start;
        text-align: left;
    }
    
    .home-newsletter-copy-text h2 {
        font-size: 1.625rem !important;
    }

    .home-newsletter-form-pill .ff-el-form-control {
        padding: 0 24px !important;
        font-size: 1rem !important;
    }

    .home-newsletter-form-pill .ff-btn-submit {
        font-size: 1rem !important;
        padding: 0 36px !important;
    }

    .home-newsletter-petals {
        display: block;
        width: 110px;
        height: 110px;
        right: -72px;
        top: 44%;
    }

    .home-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .home-hero-copy {
        padding-left: 0;
    }

    .home-explore-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-right: 0;
        padding-left: 0;
    }

    .home-newsletter {
        border-radius: 2.35rem;
    }

    .home-newsletter-inner {
        flex-direction: row;
        justify-content: space-between;
        padding: 2.25rem 5.5rem 2.25rem 4.5rem;
        gap: 3rem;
    }

    .home-newsletter-copy-wrap {
        width: auto;
    }

    .home-gallery-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .home-hero-inner {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .home-hero-copy {
        max-width: 44rem;
        padding-bottom: 1.5rem;
        transform: translateY(-10%);
    }

    .home-hero-art {
        flex: 1 1 auto;
        min-height: 30rem;
        margin-right: -2rem;
        margin-left: -2rem;
    }

    .home-hero-art::before {
        content: none;
    }

    .home-hero-note {
        top: 58%;
        left: 8vw;
    }
}

@media (max-width: 640px) {
    .home-hero {
        min-height: 38rem;
        background: #ffffff;
    }

    .home-hero-bg img {
        object-position: center bottom;
    }

    .home-hero-bg::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.58) 42%, rgba(255, 255, 255, 0) 78%);
    }

    .home-hero-inner {
        display: flex;
        min-height: 38rem;
        padding: 5.5rem 2rem 0;
        flex-direction: column;
    }

    .home-hero-inner::before {
        background:
            radial-gradient(circle at 68% 70%, rgba(204, 222, 233, 0.42) 0, rgba(204, 222, 233, 0.16) 12rem, transparent 24rem),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0) 78%);
    }

    .home-hero-copy {
        max-width: none;
        padding: 0;
        transform: none;
    }

    .home-hero-title {
        margin-bottom: 1.8rem;
        line-height: 0.9;
    }

    .home-hero-title-mauritius {
        font-size: clamp(3.85rem, 16vw, 4.9rem);
        letter-spacing: -0.055em;
    }

    .home-hero-title-beyond {
        font-size: clamp(3.35rem, 13.8vw, 4.2rem);
        letter-spacing: -0.06em;
    }

    .home-hero-title-postcard {
        font-size: clamp(3.35rem, 13.6vw, 4.25rem);
    }

    .home-hero-title-postcard::after {
        right: -0.25rem;
        bottom: -0.18rem;
        left: 0.3rem;
        height: 0.25rem;
    }

    .home-hero-subtitle {
        max-width: 21rem;
        margin-bottom: 1.55rem;
        font-size: 1.04rem;
        line-height: 1.52;
    }

    .home-hero-actions {
        display: grid;
        width: min(100%, 10.4rem);
        gap: 0.75rem;
    }

    .home-hero-button {
        min-width: 0;
        min-height: 2.1rem;
        padding: 0.5rem 0.75rem;
        border-width: 1px;
        border-radius: 0.45rem;
        font-size: 0.72rem;
    }

    .home-hero-art {
        flex: 1 1 auto;
        min-height: 9.5rem;
        margin-right: -2rem;
        margin-left: -2rem;
    }

    .home-hero-art::before {
        content: none;
    }

    .home-hero-note {
        display: none;
    }

    .home-hero-note::after {
        content: none;
    }
}

/* Homepage Latest Articles */
.home-latest-section {
    position: relative;
    max-width: 100%;
    margin-bottom: 3rem;
}

/* Keep homepage section rhythm consistent across older section-specific rules. */
.home-hero,
.home-section,
.home-latest-section,
.home-mission,
.home-newsletter,
.home-ad-wrap {
    --home-section-gap: 3.5rem;
    margin-top: 0 !important;
    margin-bottom: var(--home-section-gap) !important;
}

.home-ad-wrap-middle {
    margin-top: 0 !important;
    margin-bottom: var(--home-section-gap) !important;
}

@media (min-width: 768px) {
    .home-hero,
    .home-section,
    .home-latest-section,
    .home-mission,
    .home-newsletter,
    .home-ad-wrap {
        --home-section-gap: 5.5rem;
    }
}

@media (max-width: 767px) {
    .home-section-heading {
        margin-bottom: 2rem;
    }
}

.home-latest-actions {
    position: absolute;
    top: 4.25rem;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    pointer-events: none;
}

.home-latest-view-all {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    max-width: 100%;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    pointer-events: auto;
}

.home-latest-view-all:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 32, 109, 0.35);
    background: #ffffff;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.1);
}

.home-latest-view-all svg {
    transition: transform 0.2s ease;
}

.home-view-all-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.home-latest-view-all:hover svg {
    transform: translateX(3px);
}

.home-latest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: stretch;
    margin-top: 1.5rem;
}

.home-latest-wrap {
    position: relative;
    margin-bottom: 0 !important;
}

/* Card Container */
.home-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    height: 100%;
}

.home-blog-card:hover {
    transform: translateY(-6px);
}

/* Media/Image Area */
.home-blog-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f1f5f9;
}

.home-blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-blog-card:hover .home-blog-card-img {
    transform: scale(1.06);
}

.home-blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    background: #e2e8f0;
}

.home-blog-card-placeholder-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* Category Badges */
.home-blog-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.home-blog-card-badge.is-travel {
    background-color: #1A206D;
}

.home-blog-card-badge.is-food {
    background-color: #EA2839;
}

.home-blog-card-badge.is-culture {
    background-color: #FFD500;
    color: #0f172a;
}

.home-blog-card-badge.is-lifestyle {
    background-color: #00A551;
}

.home-blog-card-badge.is-default {
    background-color: #64748b;
}

/* Card Body Content */
.home-blog-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}

.home-blog-card-title {
    margin: 0 0 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    transition: color 0.2s ease;
    overflow: visible;
}

.home-blog-card:hover .home-blog-card-title {
    color: #1A206D;
}

.home-blog-card-excerpt {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer */
.home-blog-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    border-top: 1px solid #94a3b8;
    padding-top: 1rem;
}

.home-blog-card-read-time {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.home-blog-card-clock-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: #94a3b8;
    stroke-width: 2.5px;
}

@media (max-width: 1023px) {
    .home-latest-actions {
        position: static;
        justify-content: center;
        margin-top: 2rem;
        margin-bottom: 0;
        pointer-events: auto;
    }

    .home-latest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .home-latest-actions {
        margin-top: 1.5rem;
    }

    .home-latest-view-all {
        width: 100%;
        justify-content: center;
    }

    .home-latest-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .home-blog-card-media {
        aspect-ratio: 16 / 9;
    }

    .home-blog-card-body {
        padding: 1.25rem;
    }
}

/* Canonical homepage container chrome. Keep this after card definitions. */
.home-explore-card,
.home-blog-card,
.home-guide-card,
.home-path-card,
.home-language-panel,
.home-mission,
.home-newsletter,
.home-ad-box {
    border: 1px solid var(--home-container-border);
    box-shadow: var(--home-container-shadow);
}

.home-explore-card:hover,
.home-blog-card:hover,
.home-guide-card:hover,
.home-path-card:hover {
    border-color: var(--home-container-border-strong);
    box-shadow: var(--home-container-shadow-hover);
}

.home-ad-box:hover {
    border-color: var(--home-container-border-strong);
}

.home-language-panel,
.home-mission,
.home-newsletter {
    background-clip: padding-box;
}

/* Blog Listing Templates */
.blog-page-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.25rem 1rem 3rem;
}

.blog-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
}

.blog-page-heading {
    flex: 0 0 auto;
    max-width: 42rem;
}

.blog-page-heading h1 {
    margin: 0 0 0.5rem;
    color: #1A206D;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
}

.blog-page-heading p,
.blog-page-heading .term-description {
    margin: 0;
    color: #475569;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.65;
}

.blog-mobile-filter {
    width: 100%;
    margin-bottom: 1.5rem;
}

.blog-mobile-filter > span {
    display: block;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-mobile-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.blog-mobile-filter-link {
    flex-grow: 1;
    padding: 0.625rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-mobile-filter-link:active {
    transform: scale(0.95);
}

.blog-mobile-filter-link:hover {
    border-color: #1A206D;
    background: #ffffff;
    color: #1A206D;
}

.blog-mobile-filter-link.is-active {
    border-color: #1A206D;
    background: #1A206D;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(26, 32, 109, 0.18);
}

.blog-desktop-filter {
    position: relative;
    display: none;
    width: auto;
    padding: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    background: rgba(26, 32, 109, 0.9);
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(12px);
}

.blog-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
}

.blog-filter-scroll::-webkit-scrollbar {
    display: none;
}

.blog-filter-pill {
    flex: 0 0 auto;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-filter-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.blog-filter-pill.is-active {
    background: #ffffff;
    color: #1A206D;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.blog-filter-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #f1f5f9;
    border-radius: 9999px;
    background: #ffffff;
    color: #1A206D;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
}

.blog-filter-scroll-btn:hover {
    background: #FFD500;
    color: #1A206D;
}

.blog-filter-scroll-btn svg {
    width: 1rem;
    height: 1rem;
}

.blog-filter-scroll-left {
    left: 0;
}

.blog-filter-scroll-right {
    right: 0;
}

.blog-desktop-filter:hover .blog-filter-scroll-btn {
    opacity: 1;
}

.blog-posts-stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog-featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 3rem;
    border-radius: 2rem;
    background: #1A206D;
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
}

.blog-featured-media {
    position: relative;
    order: -1;
    z-index: 0;
    height: 12rem;
    overflow: hidden;
}

.blog-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.blog-featured-img:hover {
    transform: scale(1.05);
}

.blog-featured-placeholder,
.blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.blog-featured-placeholder {
    background: #1e293b;
    color: rgba(255, 255, 255, 0.2);
}

.blog-featured-placeholder svg {
    width: 4rem;
    height: 4rem;
}

.blog-featured-category {
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.blog-featured-category-mobile {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    padding: 0.375rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: #1A206D;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(4px);
}

.blog-featured-category-desktop {
    position: relative;
    z-index: 10;
    display: none;
    width: fit-content;
    margin-bottom: 1.5rem;
    padding: 0.375rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.blog-featured-mobile-overlay,
.blog-featured-desktop-overlay,
.blog-featured-decor {
    position: absolute;
}

.blog-featured-mobile-overlay {
    inset: 0;
    background: linear-gradient(to top, #1A206D, rgba(26, 32, 109, 0));
    opacity: 0.8;
}

.blog-featured-desktop-overlay {
    display: none;
}

.blog-featured-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1.25rem;
}

.blog-featured-decor {
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(48px);
    transform: translate(50%, -50%);
}

.blog-featured-content h2 {
    position: relative;
    z-index: 10;
    margin: 0 0 1rem;
    color: #ffffff;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
}

.blog-featured-content h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-featured-content h2 a:hover {
    color: #FFD500;
}

.blog-featured-excerpt {
    position: relative;
    z-index: 10;
    display: none;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.65;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.blog-featured-link {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.blog-featured-link svg {
    width: 1rem;
    height: 1rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-0.25rem);
    border-color: rgba(26, 32, 109, 0.2);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.14);
}

.blog-card-media {
    position: relative;
    height: 10rem;
    overflow: hidden;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.1);
}

.blog-card-placeholder {
    background: rgba(26, 32, 109, 0.05);
    color: rgba(26, 32, 109, 0.2);
}

.blog-card-placeholder svg {
    width: 3rem;
    height: 3rem;
}

.blog-card-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: #1A206D;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(4px);
}

.blog-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem;
}

.blog-card-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-card-date svg {
    width: 0.75rem;
    height: 0.75rem;
}

.blog-card h3 {
    margin: 0 0 0.75rem;
    color: #1A206D;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.blog-card h2 {
    margin: 0 0 0.75rem;
    color: #1A206D;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.blog-card:hover h2 {
    color: #EA2839;
}

.blog-card h2 a {
    color: inherit;
    text-decoration: none !important;
}

.blog-card:hover h3 {
    color: #EA2839;
}

.blog-card h3 a {
    color: inherit;
    text-decoration: none !important;
}

.blog-card-excerpt {
    flex-grow: 1;
    margin: 0 0 0.75rem;
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.65;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.blog-card-link {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #1A206D;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card-link {
    transform: translateX(0.25rem);
}

.blog-card-link svg {
    width: 1rem;
    height: 1rem;
}

.blog-card-link-red {
    color: #EA2839;
    font-weight: 700;
}

.blog-card-link-red svg {
    margin-left: 0.25rem;
}

.blog-card-scale:hover {
    transform: scale(1.02);
}

.blog-card-media-compact {
    height: 9rem;
}

.blog-card-body-compact {
    padding: 1.25rem;
}

.blog-card-category-pill {
    border-radius: 9999px;
    font-size: 0.75rem;
    letter-spacing: 0;
}

.blog-card-placeholder-gradient {
    background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), rgba(234, 40, 57, 0.1));
}

.blog-archive-header {
    max-width: 42rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.blog-archive-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
}

.blog-archive-header p {
    margin: 0 auto;
    max-width: 42rem;
    color: #4b5563;
    font-size: 1.125rem;
    line-height: 1.6;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.blog-pagination ul,
.blog-pagination-list {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-pagination a:hover,
.blog-pagination .current {
    border-color: #1A206D;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}

.blog-pagination svg {
    width: 1.25rem;
    height: 1.25rem;
}

.blog-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    color: #6b7280;
    text-align: center;
}

.blog-empty-card {
    grid-column: 1 / -1;
    padding: 5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.blog-empty-card h2 {
    margin: 0 0 0.5rem;
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 800;
}

.blog-empty-card p {
    margin: 0;
    color: #6b7280;
}

.blog-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #9ca3af;
}

.blog-empty-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.blog-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.blog-load-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: 2px solid #1A206D;
    border-radius: 9999px;
    background: #ffffff;
    color: #1A206D;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-load-more:hover {
    transform: translateY(-0.25rem);
    background: #1A206D;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(26, 32, 109, 0.3);
}

.blog-load-more-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.blog-load-more:hover .arrow-icon {
    transform: translateY(0.25rem);
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@media (min-width: 768px) {
    .blog-page-shell {
        padding-top: 0.5rem;
    }

    .blog-page-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 2rem;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .blog-mobile-filter {
        display: none;
    }

    .blog-desktop-filter {
        display: block;
    }

    .blog-featured-card {
        display: block;
        min-height: 31.25rem;
        border-radius: 2.5rem;
    }

    .blog-featured-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .blog-featured-category-mobile,
    .blog-featured-mobile-overlay {
        display: none;
    }

    .blog-featured-category-desktop {
        display: inline-block;
    }

    .blog-featured-desktop-overlay {
        display: block;
        inset: 0;
        background: linear-gradient(to right, #1A206D 0%, rgba(26, 32, 109, 0.7) 55%, rgba(26, 32, 109, 0) 100%);
    }

    .blog-featured-content {
        width: 66.666%;
        padding: 3rem;
    }

    .blog-featured-excerpt {
        display: -webkit-box;
    }

    .blog-featured-link {
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 9999px;
        background: #EA2839;
        box-shadow: 0 12px 24px rgba(234, 40, 57, 0.2);
    }

    .blog-featured-link:hover {
        transform: translateY(-0.125rem);
        background: #ffffff;
        color: #EA2839;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-card-media {
        height: 16rem;
    }

    .blog-card-media-compact {
        height: 12rem;
    }

    .blog-card-body {
        padding: 2rem;
    }

    .blog-card-body-compact {
        padding: 1.5rem;
    }

    .blog-card-excerpt {
        margin-bottom: 1.5rem;
    }

    .blog-card-footer {
        padding-top: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-featured-content {
        width: 50%;
        padding: 4rem;
    }
}

/* Single Blog Article */
.single-blog-shell {
    max-width: min(100% - 2rem, 92rem);
    margin: 0 auto;
}

.single-blog-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.single-blog-breadcrumbs a {
    color: #2f855a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-blog-breadcrumbs a:hover {
    color: #1A206D;
}

.single-blog-breadcrumbs span {
    color: #94a3b8;
}

.single-blog-article-head {
    position: relative;
    margin-bottom: 2rem;
}

.single-blog-hero-media {
    position: relative;
    width: 100%;
    height: clamp(18rem, 33vw, 33rem);
    margin-bottom: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 1.35rem;
    background: #f1f5f9;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.single-blog-hero-img,
.single-blog-hero-placeholder,
.single-related-media img,
.single-related-placeholder,
.single-sidebar-related-img,
.single-sidebar-related-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-blog-hero-placeholder,
.single-related-placeholder,
.single-sidebar-related-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-blog-hero-placeholder {
    background: #e2e8f0;
    color: #94a3b8;
}

.single-blog-hero-placeholder svg {
    width: 4rem;
    height: 4rem;
}

.single-blog-category-pill {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: #EA2839;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(234, 40, 57, 0.22);
}

.single-blog-category-pill:hover {
    background: #1A206D;
    color: #ffffff;
}

.single-blog-entry-title {
    max-width: 54rem;
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3.7vw, 2.45rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.08;
    text-align: left;
}

.single-blog-subtext {
    max-width: 48rem;
    margin: 1rem 0 0;
    color: #475569;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 500;
    line-height: 1.7;
}

.single-blog-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.45rem;
}

.single-blog-meta-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.25rem;
}

.single-blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.single-blog-meta-item svg {
    width: 1rem;
    height: 1rem;
    color: #2f855a;
    stroke-width: 2.4;
}

.single-blog-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.single-blog-header-share {
    justify-content: flex-start;
}

.single-share-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.single-share-button svg {
    width: 1rem;
    height: 1rem;
}

.single-share-button:hover {
    color: #ffffff;
}

.single-blog-header-share .single-share-button {
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.single-blog-header-share .single-share-button:hover {
    transform: translateY(-2px);
}

.single-blog-header-share .share-facebook {
    background: #1877F2;
}

.single-blog-header-share .share-twitter {
    background: #1DA1F2;
}

.single-blog-header-share .share-whatsapp {
    background: #25D366;
}

.single-blog-header-share .share-copy-dark {
    background: #64748b;
}

.single-share-button-large {
    width: 2.5rem;
    height: 2.5rem;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.single-share-button-large svg {
    width: 1.25rem;
    height: 1.25rem;
}

.single-share-button-large:hover {
    transform: scale(1.1);
}

.share-twitter:hover { border-color: #1DA1F2; background: #1DA1F2; }
.share-facebook:hover { border-color: #1877F2; background: #1877F2; }
.share-whatsapp:hover { border-color: #25D366; background: #25D366; }
.share-copy:hover { border-color: #94a3b8; background: #cbd5e1; color: #334155; }
.share-copy-dark:hover { border-color: #1f2937; background: #1f2937; color: #ffffff; }

.single-blog-shell {
    padding: 2rem 0 3rem;
}

.single-blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3rem;
}

.single-blog-main {
    min-width: 0;
}

.single-blog-content {
    max-width: none;
    margin-bottom: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-wrap: break-word;
    backdrop-filter: none;
}

.single-blog-ad {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 3rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    text-align: center;
    contain: layout;
}

.single-blog-ad ins.adsbygoogle {
    display: block !important;
    width: 100%;
    min-height: 250px;
}

.single-blog-ad > span,
.single-sidebar-ad span {
    display: block;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.single-blog-share-bar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(12px);
}

.single-blog-share-label {
    padding-left: 1rem;
    color: #1A206D;
    font-weight: 800;
}

.single-comments-card {
    margin-bottom: 3rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
}

.single-related-section {
    margin-bottom: 3rem;
}

.single-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    color: #1A206D;
    font-size: 1.5rem;
    font-weight: 800;
}

.single-section-title span {
    display: block;
    width: 0.375rem;
    height: 2rem;
    border-radius: 9999px;
    background: #EA2839;
}

.single-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.single-related-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.3s ease;
}

.single-related-card:hover {
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.16);
}

.single-related-media {
    position: relative;
    flex: 0 0 7rem;
    align-self: stretch;
    overflow: hidden;
}

.single-related-media img {
    transition: transform 0.7s ease;
}

.single-related-card:hover .single-related-media img {
    transform: scale(1.05);
}

.single-related-placeholder {
    background: #f1f5f9;
    color: #cbd5e1;
}

.single-related-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

.single-related-category {
    display: none;
}

.single-related-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem;
}

.single-related-date {
    display: none;
}

.single-related-body h3 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    transition: color 0.2s ease;
}

.single-related-card:hover h3 {
    color: #1A206D;
}

.single-related-body h3 a {
    color: inherit;
    text-decoration: none !important;
}

.single-related-body p {
    display: none;
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.single-related-footer {
    margin-top: auto;
    padding-top: 0.25rem;
}

.single-related-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1A206D;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.single-related-footer a:hover {
    gap: 0.75rem;
}

.single-related-footer svg {
    width: 1rem;
    height: 1rem;
}

.single-empty-state {
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    color: #6b7280;
    text-align: center;
}

.single-subscribe {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    padding: 2rem;
    border-radius: 2.5rem;
    text-align: center;
}

.single-subscribe-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 213, 0, 0.1), transparent, rgba(234, 40, 57, 0.05));
}

.single-subscribe-float {
    position: absolute;
    z-index: 10;
    display: none;
    width: 4rem;
    height: 4rem;
    padding: 0.375rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
    transition: transform 0.3s ease;
}

.single-subscribe-float img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
}

.single-subscribe-float-left {
    top: 2rem;
    left: 1rem;
    transform: rotate(-12deg);
}

.single-subscribe-float-right {
    right: 1rem;
    bottom: 2rem;
    transform: rotate(6deg);
}

.single-subscribe-float:hover {
    transform: rotate(0);
}

.single-subscribe-inner {
    position: relative;
    z-index: 20;
    max-width: 36rem;
    margin: 0 auto;
}

.single-subscribe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #EA2839;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    animation: home-bounce 1s infinite;
}

.single-subscribe-icon svg {
    width: 2rem;
    height: 2rem;
}

.single-subscribe h2 {
    margin: 0 0 1rem;
    color: #1A206D;
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
}

.single-subscribe h2 span {
    color: #EA2839;
}

.single-subscribe p {
    margin: 0 0 2rem;
    color: #4b5563;
    font-size: 1.125rem;
    line-height: 1.65;
}

.single-subscribe-form {
    padding: 1rem;
    border: 1px solid #ffffff;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(4px);
}

.single-blog-sidebar {
    display: none;
}

.single-sidebar-sticky {
    position: sticky;
    top: 8rem;
    height: fit-content;
}

.single-sidebar-sticky > * + * {
    margin-top: 2rem;
}

.single-sidebar-card {
    padding: 1.5rem;
    border: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.single-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    color: #1A206D;
    font-size: 1.25rem;
    font-weight: 800;
}

.single-sidebar-card h3 img,
.single-sidebar-card h3 svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.single-sidebar-card h3 svg {
    color: #EA2839;
}

.single-sidebar-card h3 img {
    object-fit: contain;
}

.single-sidebar-related-list > * + * {
    margin-top: 1.5rem;
}

.single-sidebar-related {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.single-sidebar-related-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.single-sidebar-related-copy {
    min-width: 0;
}

.single-sidebar-related-category {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: #64748b;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.single-sidebar-related-category.is-travel {
    background: #1A206D;
}

.single-sidebar-related-category.is-food {
    background: #EA2839;
}

.single-sidebar-related-category.is-culture {
    background: #ca8a04;
}

.single-sidebar-related-category.is-lifestyle {
    background: #00A551;
}

.single-sidebar-related-media {
    position: relative;
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border-radius: 0.75rem;
}

.single-sidebar-related-img {
    transition: transform 0.3s ease;
}

.single-sidebar-related:hover .single-sidebar-related-img {
    transform: scale(1.1);
}

.single-sidebar-related-placeholder {
    background: #f3f4f6;
    color: #d1d5db;
}

.single-sidebar-related-placeholder svg {
    width: 2rem;
    height: 2rem;
}

.single-sidebar-related h4 {
    margin: 0 0 0.25rem;
    color: #1f2937;
    font-weight: 800;
    line-height: 1.25;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 0.2s ease;
}

.single-sidebar-related:hover h4 {
    color: #1A206D;
}

.single-sidebar-related-date,
.single-sidebar-empty {
    color: #6b7280;
    font-size: 0.75rem;
}

.single-sidebar-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.single-sidebar-ad > div {
    width: 100%;
    text-align: center;
}

@media (min-width: 640px) {
    .single-subscribe-float {
        display: block;
    }
}

@media (min-width: 768px) {
    .single-blog-shell {
        padding-top: 2.5rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .single-blog-content {
        padding: 0;
        border-radius: 0;
    }

    .single-blog-share-bar {
        display: flex;
    }

    .single-comments-card {
        padding: 2rem;
    }

    .single-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-related-card {
        flex-direction: column;
        border-radius: 1.5rem;
    }

    .single-related-media {
        width: 100%;
        height: 12rem;
        flex-basis: auto;
    }

    .single-related-category {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 10;
        display: inline-block;
        padding: 0.25rem 0.625rem;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.95);
        color: #1e293b;
        font-size: 0.5625rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .single-related-body {
        padding: 1.5rem;
    }

    .single-related-date {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        color: #94a3b8;
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .single-related-date svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    .single-related-body h3 {
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
    }

    .single-related-body p {
        display: -webkit-box;
    }

    .single-subscribe {
        padding: 3rem;
    }

    .single-subscribe-float {
        width: 6rem;
        height: 6rem;
    }

    .single-subscribe-float-left {
        left: 2.5rem;
    }

    .single-subscribe-float-right {
        right: 2.5rem;
    }
}

@media (min-width: 1024px) {
    body.single-creole_blog,
    body.single-creole_blog .site-main,
    body.single-creole_blog .single-blog-shell {
        overflow: visible;
    }

    .single-blog-layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: stretch;
        overflow: visible;
    }

    .single-blog-main {
        grid-column: span 8 / span 8;
    }

    .single-blog-sidebar {
        display: block;
        grid-column: span 4 / span 4;
        align-self: stretch;
        height: auto;
        overflow: visible;
        padding-top: 2.85rem;
    }

    .single-sidebar-sticky {
        position: sticky;
        top: 8rem;
        align-self: start;
        height: fit-content;
    }
}

/* Small Template Utilities */
.error-page,
.index-page {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.25rem 1rem 3rem;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-page-header {
    position: relative;
    margin-bottom: 3rem;
    text-align: center;
}

.error-page-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -10;
    width: min(31.25rem, 90vw);
    height: min(31.25rem, 90vw);
    border-radius: 9999px;
    background: rgba(234, 40, 57, 0.1);
    filter: blur(48px);
    transform: translate(-50%, -50%);
}

.error-page h1 {
    margin: 0 0 1rem;
    font-size: clamp(6rem, 16vw, 8rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
}

.error-page h2 {
    margin: 0 0 1.5rem;
    color: #1A206D;
    font-size: clamp(1.875rem, 5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
}

.error-page-header p {
    max-width: 42rem;
    margin: 0 auto;
    color: #4b5563;
    font-size: 1.25rem;
    line-height: 1.65;
}

.error-links-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 48rem;
}

.error-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.error-link-card:hover {
    transform: scale(1.05);
}

.error-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 9999px;
    transition: background 0.2s ease, color 0.2s ease;
}

.error-link-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.error-link-card h3 {
    margin: 0 0 0.25rem;
    color: #1A206D;
    font-weight: 800;
}

.error-link-card p {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.error-link-card-blue .error-link-icon { background: rgba(26, 32, 109, 0.1); color: #1A206D; }
.error-link-card-blue:hover .error-link-icon { background: #1A206D; color: #ffffff; }
.error-link-card-red .error-link-icon { background: rgba(234, 40, 57, 0.1); color: #EA2839; }
.error-link-card-red:hover .error-link-icon { background: #EA2839; color: #ffffff; }
.error-link-card-yellow .error-link-icon { background: rgba(255, 213, 0, 0.18); color: #ca8a04; }
.error-link-card-yellow:hover .error-link-icon { background: #FFD500; color: #ffffff; }
.error-link-card-green .error-link-icon { background: rgba(0, 165, 81, 0.1); color: #00A551; }
.error-link-card-green:hover .error-link-icon { background: #00A551; color: #ffffff; }
.error-link-card-sky .error-link-icon { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.error-link-card-sky:hover .error-link-icon { background: #38bdf8; color: #ffffff; }
.error-link-card-purple .error-link-icon { background: rgba(192, 132, 252, 0.1); color: #c084fc; }
.error-link-card-purple:hover .error-link-icon { background: #c084fc; color: #ffffff; }

.index-page {
    padding-top: 3rem;
}

.index-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.index-post-card {
    padding: 2rem;
    border-radius: 1rem;
}

.index-post-card h2 {
    margin: 0 0 1rem;
    color: #1A206D;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: 0;
}

.index-post-card h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.index-post-card h2 a:hover {
    color: #EA2839;
}

.index-post-content {
    max-width: none;
    color: #374151;
}

.index-pagination {
    margin-top: 2rem;
}

.comments-title-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    color: #EA2839;
    vertical-align: middle;
}

.comments-closed {
    margin-top: 1rem;
    color: #64748b;
    font-weight: 800;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comment-form-cookies-consent label {
    margin: 0;
    color: #475569;
    font-size: 0.875rem;
}

.blog-search {
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 42rem;
    margin: -1rem auto 2rem;
}

.blog-search-inner {
    position: relative;
}

.blog-search-glow {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(to right, #EA2839, #FFD500, #00A551);
    opacity: 0.2;
    filter: blur(12px);
    transition: opacity 0.5s ease;
}

.blog-search-inner:hover .blog-search-glow {
    opacity: 0.4;
}

.blog-search-box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(24px);
    transition: box-shadow 0.2s ease;
}

.blog-search-box:focus-within {
    box-shadow: 0 0 0 2px rgba(26, 32, 109, 0.5), 0 12px 24px rgba(15, 23, 42, 0.12);
}

.blog-search-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 1rem;
    color: rgba(26, 32, 109, 0.6);
}

.blog-search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: #334155;
    font-weight: 500;
    outline: none;
}

.blog-search-input::placeholder {
    color: #94a3b8;
}

@media (min-width: 768px) {
    .error-page,
    .index-page {
        padding-top: 0.5rem;
    }

    .error-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-search {
        margin-top: -1.5rem;
    }
}

@media (min-width: 1024px) {
    .error-links-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Shared Content Pages */
.content-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 500px;
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    z-index: 20;
}

.content-hero-media,
.content-hero-overlay {
    position: absolute;
    inset: 0;
}

.content-hero-media {
    z-index: 0;
    overflow: hidden;
}

.content-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.content-hero-overlay {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(26, 32, 109, 0.4));
}

.content-hero-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.content-hero-copy {
    max-width: 42rem;
    text-align: left;
}

.content-hero-title {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

.content-hero-title span {
    color: var(--mauritius-yellow);
}

.content-hero-subtitle {
    max-width: 42rem;
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.55;
    font-weight: 500;
    text-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}

.content-hero-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.share-icon-row,
.contact-social-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-icon-btn,
.contact-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.share-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.share-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.share-icon-btn:hover {
    transform: scale(1.1);
}

.share-icon-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.share-icon-twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
}

.share-icon-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
}

.share-icon-copy:hover {
    color: #0f172a;
    background: #fff;
}

.content-page-shell {
    width: min(100% - 2rem, 80rem);
    margin: 0 auto;
    padding-bottom: 3rem;
}

.section-heading-stack {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
}

.section-eyebrow-wrap {
    margin-bottom: 1rem;
}

.section-eyebrow {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.section-display-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.35rem, 4.6vw, 4rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
}

.about-story-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 5rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 3rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.about-story-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
    pointer-events: none;
}

.about-story-content {
    position: relative;
    z-index: 1;
}

.about-story-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.about-story-main {
    flex: 1 1 auto;
}

.about-story-text {
    max-width: 72rem;
    color: #475569;
    font-size: 1.125rem;
    line-height: 1.72;
    font-weight: 500;
}

.about-story-text > * + * {
    margin-top: 1.5rem;
}

.about-story-text h3 {
    margin-top: 1.5rem;
    color: var(--mauritius-blue);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800;
}

.about-explore-section {
    margin-bottom: clamp(4rem, 8vw, 6rem);
}

.about-category-grid,
.contact-card-grid,
.search-card-grid {
    display: grid;
    gap: 1.5rem;
}

.about-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-category-card {
    position: relative;
    display: block;
    height: 24rem;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    transition: transform 0.25s ease;
}

.about-category-card:hover {
    transform: scale(1.02);
}

.about-category-img,
.about-category-overlay {
    position: absolute;
    inset: 0;
}

.about-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.about-category-card:hover .about-category-img {
    transform: scale(1.1);
}

.about-category-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4), transparent);
}

.about-category-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

.category-accent {
    width: 2rem;
    height: 0.375rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.category-accent-red { background: var(--mauritius-red); }
.category-accent-blue { background: var(--mauritius-blue); }
.category-accent-yellow { background: var(--mauritius-yellow); }
.category-accent-green { background: var(--mauritius-green); }

.about-category-content h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.875rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.about-category-content h3 svg {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
}

.about-category-content p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.55;
    font-weight: 500;
    opacity: 0.9;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.about-category-card:hover .about-category-content p {
    opacity: 1;
}

.newsletter-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    border: 1px solid #e2e8f0;
    border-radius: 2.5rem;
    background: #f8fafc;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.15);
}

.newsletter-glow {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    filter: blur(48px);
}

.newsletter-glow-red {
    top: 0;
    right: 0;
    transform: translate(33%, -33%);
    background: rgba(234, 40, 57, 0.05);
}

.newsletter-glow-yellow {
    bottom: 0;
    left: 0;
    transform: translate(-33%, 33%);
    background: rgba(255, 205, 0, 0.1);
}

.newsletter-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3rem;
    padding: clamp(2rem, 4vw, 3rem);
}

.newsletter-copy {
    text-align: left;
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(234, 40, 57, 0.2);
    border-radius: 999px;
    background: #fff;
    color: var(--mauritius-red);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.newsletter-badge svg {
    width: 0.75rem;
    height: 0.75rem;
}

.newsletter-copy h2 {
    margin: 0 0 1rem;
    color: var(--mauritius-blue);
    font-size: clamp(1.875rem, 3vw, 2.25rem);
    line-height: 1.15;
    font-weight: 800;
}

.newsletter-copy h2 span {
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-yellow), var(--mauritius-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.newsletter-copy p {
    max-width: 28rem;
    margin: 0;
    color: #475569;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 500;
}

.newsletter-form-side {
    width: 100%;
}

.newsletter-form-frame {
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.newsletter-form-container {
    width: 100%;
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: 17px;
    background: #fff;
}

.contact-page-inner {
    width: 100%;
}

.contact-form-section,
.contact-connect-section {
    margin-bottom: 6rem;
}

.contact-form-card {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 2.5rem;
}

.contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.contact-info-card {
    padding: 2rem;
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-info-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    transition: transform 0.25s ease;
}

.contact-info-card:hover .contact-info-icon {
    transform: scale(1.1);
}

.contact-info-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.contact-info-icon-red {
    color: var(--mauritius-red);
    background: rgba(234, 40, 57, 0.1);
}

.contact-info-icon-blue {
    color: var(--mauritius-blue);
    background: rgba(26, 32, 109, 0.1);
}

.contact-info-card h3 {
    margin: 0 0 0.5rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.contact-info-card p {
    margin: 0 0 1.5rem;
    color: #64748b;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mauritius-blue);
    font-size: 1.125rem;
    font-weight: 800;
}

.contact-link:hover {
    color: var(--mauritius-red);
}

.contact-link svg {
    width: 1rem;
    height: 1rem;
}

.contact-social-row {
    gap: 1rem;
}

.contact-social-btn {
    width: 3rem;
    height: 3rem;
    color: var(--mauritius-blue);
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.contact-social-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.contact-social-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.contact-social-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.contact-social-instagram:hover {
    background: #e1306c;
    border-color: #e1306c;
}

.contact-faq-section {
    margin-bottom: 3rem;
}

.contact-faq-list {
    display: grid;
    gap: 1rem;
}

.contact-faq-item {
    padding: clamp(1.25rem, 2vw, 1.5rem);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.contact-faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-item h4 {
    margin: 0;
    color: var(--mauritius-blue);
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 800;
    text-align: left;
}

.contact-faq-item h4 span {
    color: var(--mauritius-red);
}

.contact-faq-item .faq-arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-top: 0.25rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.contact-faq-item p {
    margin: 1rem 0 0;
    padding-left: 1.5rem;
    border-left: 2px solid #e2e8f0;
    color: #475569;
    text-align: left;
}

.contact-faq-item p span {
    color: var(--mauritius-green);
    font-weight: 800;
}

.account-page {
    width: min(100% - 2rem, 28rem);
    margin: 0 auto;
    padding: 8rem 0 6rem;
}

.account-page h1 {
    margin: 0 0 0.25rem;
    color: #0f172a;
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0;
}

.account-email {
    margin: 0 0 2.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.account-alert {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.account-alert-success {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.account-alert-error {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.account-alert p {
    margin: 0;
}

.account-alert p + p {
    margin-top: 0.4rem;
}

.account-form {
    display: grid;
    gap: 1.25rem;
}

.account-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.account-form label {
    display: block;
    margin-bottom: 0.375rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 700;
}

.account-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    color: #1e293b;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-form input::placeholder {
    color: #94a3b8;
}

.account-form input:focus {
    border-color: var(--mauritius-blue);
    box-shadow: 0 0 0 4px rgba(26, 32, 109, 0.08);
}

.account-submit {
    width: 100%;
    padding: 0.75rem 1.5rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    border: 0;
    border-radius: 0.75rem;
    background: var(--mauritius-blue);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.account-submit:hover {
    opacity: 0.9;
}

.account-submit:active {
    transform: scale(0.98);
}

.account-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.account-actions a {
    color: #64748b;
    font-weight: 600;
}

.account-actions a:hover {
    color: var(--mauritius-blue);
}

.account-actions .account-logout:hover {
    color: var(--mauritius-red);
}

.search-page {
    width: min(100% - 2rem, 80rem);
    min-height: 60vh;
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
}

.search-page-header {
    margin-bottom: 3rem;
    text-align: center;
}

.search-page-header h1 {
    margin: 0 0 1rem;
    color: var(--mauritius-blue);
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.15;
    font-weight: 800;
}

.search-page-header p {
    margin: 0;
    color: #4b5563;
    font-size: 1.25rem;
}

.search-page-header p span {
    color: var(--mauritius-red);
    font-weight: 800;
}

.search-results-container {
    display: grid;
    gap: 3rem;
}

.search-loading {
    display: flex;
    min-height: 14rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 600;
    opacity: 0.55;
}

.search-loading svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: var(--mauritius-blue);
    animation: spin 1s linear infinite;
}

.search-empty {
    padding: 5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.search-empty-icon {
    display: flex;
    width: 5rem;
    height: 5rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #9ca3af;
}

.search-empty-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.search-empty h2 {
    margin: 0 0 0.5rem;
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 800;
}

.search-empty p {
    margin: 0 0 2rem;
    color: #6b7280;
}

.search-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: #fff;
    border-radius: 0.75rem;
    background: var(--mauritius-blue);
    font-weight: 800;
}

.search-home-link:hover {
    background: var(--mauritius-red);
}

.search-panel-empty {
    padding: 3rem 1rem;
    color: #64748b;
    text-align: center;
}

.search-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.search-result-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    transition: box-shadow 0.25s ease;
}

.search-result-card:hover {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.search-result-media {
    position: relative;
    height: 11rem;
    overflow: hidden;
    background: #f1f5f9;
}

.search-result-media img,
.search-result-placeholder {
    width: 100%;
    height: 100%;
}

.search-result-media img {
    object-fit: cover;
    transition: transform 0.5s ease;
}

.search-result-card:hover .search-result-media img {
    transform: scale(1.1);
}

.search-result-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(26, 32, 109, 0.2);
    background: rgba(26, 32, 109, 0.05);
}

.search-result-placeholder svg {
    width: 2rem;
    height: 2rem;
}

.search-result-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem;
}

.search-result-date {
    margin-bottom: 0.5rem;
    color: #6b7280;
    font-size: 0.75rem;
}

.search-result-body h3,
.search-vocab-card h3,
.search-lesson-card h3 {
    margin: 0;
    color: var(--mauritius-blue);
    font-weight: 800;
    transition: color 0.2s ease;
}

.search-result-body h3 {
    display: -webkit-box;
    margin-bottom: 0.75rem;
    overflow: hidden;
    font-size: 1.125rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-result-card:hover h3,
.search-vocab-card:hover h3,
.search-lesson-card:hover h3 {
    color: var(--mauritius-red);
}

.search-result-cta,
.search-lesson-cta {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    color: var(--mauritius-red);
    font-size: 0.875rem;
    font-weight: 800;
}

.search-result-cta svg,
.search-lesson-cta svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.search-result-card:hover .search-result-cta svg,
.search-lesson-card:hover .search-lesson-cta svg {
    transform: translateX(0.25rem);
}

.search-vocab-card {
    display: block;
    padding: 1.25rem;
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.search-vocab-card:hover {
    transform: translateY(-0.25rem);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.search-vocab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.search-vocab-card h3 {
    font-size: 1.25rem;
}

.search-vocab-head span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--mauritius-blue);
    border-radius: 999px;
    background: rgba(26, 32, 109, 0.05);
}

.search-vocab-head svg {
    width: 1rem;
    height: 1rem;
}

.search-vocab-card p,
.search-lesson-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-vocab-card p {
    margin: 0;
    font-style: italic;
}

.search-lesson-card {
    display: block;
    height: 100%;
}

.search-lesson-inner {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.search-lesson-card:hover .search-lesson-inner {
    transform: translateY(-0.25rem);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.search-lesson-card h3 {
    display: -webkit-box;
    margin-bottom: 0.5rem;
    overflow: hidden;
    font-size: 1.125rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-lesson-excerpt {
    margin-bottom: 1rem;
}

.search-lesson-cta {
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    color: var(--mauritius-blue);
}

.search-tabs-wrap {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(14px);
}

.search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-tab-btn {
    padding: 0.65rem 1.25rem;
    color: #475569;
    border: 0;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.search-tab-btn:hover {
    color: var(--mauritius-blue);
    background: #fff;
}

.search-tab-btn.is-active {
    color: #fff;
    background: var(--mauritius-blue);
    box-shadow: 0 8px 20px rgba(26, 32, 109, 0.18);
}

.search-tab-btn span {
    margin-left: 0.25rem;
    opacity: 0.8;
}

.search-tab-panels {
    margin-top: 2rem;
}

.is-hidden {
    display: none !important;
}

/* Legal Pages */
.legal-page {
    width: min(100% - 2rem, 64rem);
    margin: 0 auto;
    padding: 3rem 0;
}

.legal-header {
    position: relative;
    margin-bottom: 4rem;
    text-align: center;
}

.legal-header-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: clamp(18rem, 42vw, 31rem);
    height: clamp(18rem, 42vw, 31rem);
    border-radius: 999px;
    filter: blur(48px);
    transform: translate(-50%, -50%);
}

.legal-header-glow-blue {
    background: rgba(26, 32, 109, 0.1);
}

.legal-header-glow-red {
    background: rgba(234, 40, 57, 0.1);
}

.legal-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.1;
    font-weight: 800;
}

.legal-header p {
    margin: 0;
    color: #6b7280;
    font-weight: 600;
}

.legal-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 1.5rem;
}

.legal-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
}

.legal-stripe-privacy {
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow));
}

.legal-stripe-terms {
    background: linear-gradient(90deg, var(--mauritius-blue), var(--mauritius-red), var(--mauritius-yellow));
}

.legal-content {
    max-width: none;
    color: #4b5563;
    font-size: 1.05rem;
    line-height: 1.72;
}

.legal-lead {
    margin: 0 0 2rem;
    color: var(--mauritius-blue);
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 600;
}

.legal-section {
    margin-bottom: 3rem;
}

.legal-section-last {
    margin-bottom: 2rem;
}

.legal-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.legal-section-title h2 {
    margin: 0;
    color: var(--mauritius-blue);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800;
}

.legal-section-icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.legal-section-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.legal-icon-blue {
    color: var(--mauritius-blue);
    background: rgba(26, 32, 109, 0.1);
}

.legal-icon-red {
    color: var(--mauritius-red);
    background: rgba(234, 40, 57, 0.1);
}

.legal-icon-yellow {
    color: #ca8a04;
    background: rgba(255, 205, 0, 0.14);
}

.legal-icon-green {
    color: var(--mauritius-green);
    background: rgba(0, 165, 81, 0.1);
}

.legal-icon-gray {
    color: #4b5563;
    background: #f3f4f6;
}

.legal-section-body {
    padding-left: 3.5rem;
}

.legal-section-body p {
    margin: 0 0 1rem;
}

.legal-section-body p:last-child {
    margin-bottom: 0;
}

.legal-stack,
.legal-stack-lg {
    display: grid;
}

.legal-stack {
    gap: 1rem;
}

.legal-stack-lg {
    gap: 2rem;
}

.legal-info-card {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.4);
}

.legal-info-card h3,
.legal-info-card h4 {
    color: var(--mauritius-blue);
    font-weight: 800;
}

.legal-info-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.legal-info-card h4 {
    margin: 0 0 0.5rem;
    color: #1f2937;
}

.legal-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-inline-icon {
    width: 1rem;
    height: 1rem;
}

.legal-inline-red {
    color: var(--mauritius-red);
}

.legal-inline-yellow {
    color: var(--mauritius-yellow);
}

.legal-two-grid,
.legal-check-grid,
.legal-chip-grid {
    display: grid;
    gap: 1rem;
}

.legal-two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legal-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.legal-check-grid li,
.legal-check-chips li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.legal-check-grid svg,
.legal-check-chips svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    color: #22c55e;
}

.legal-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.legal-chip-grid li {
    padding: 0.75rem;
    color: #374151;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-weight: 600;
}

.legal-check-chips li {
    font-weight: 500;
}

.legal-disc-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.legal-disc-list li + li {
    margin-top: 0.25rem;
}

.legal-dot-list,
.legal-cross-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.legal-dot-list li,
.legal-cross-list li {
    position: relative;
    padding-left: 1.25rem;
}

.legal-dot-list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--mauritius-blue);
}

.legal-cross-list {
    margin-top: 1rem;
}

.legal-cross-list li::before {
    content: "x";
    position: absolute;
    left: 0;
    color: var(--mauritius-red);
    font-weight: 900;
}

.legal-small {
    font-size: 0.875rem;
    line-height: 1.6;
}

.legal-note {
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-style: italic;
}

.legal-strong {
    color: #1f2937;
    font-weight: 800;
}

.legal-callout-blue {
    margin-top: 1rem;
    padding: 0.75rem;
    color: var(--mauritius-blue);
    border-radius: 0.5rem;
    background: rgba(26, 32, 109, 0.05);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.legal-muted-box {
    padding: 1rem;
    color: #4b5563;
    border-radius: 0.75rem;
    background: #f9fafb;
    font-size: 0.875rem;
}

.legal-full {
    grid-column: 1 / -1;
}

.legal-top-gap {
    margin-top: 1rem !important;
}

.legal-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: #fff;
    border-radius: 0.75rem;
    background: var(--mauritius-blue);
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(26, 32, 109, 0.2);
}

.legal-button:hover {
    color: #fff;
    background: var(--mauritius-red);
}

.legal-button svg {
    width: 1rem;
    height: 1rem;
}

.creole-inline-ad {
    clear: both;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    margin: 2.5rem auto;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    text-align: center;
    contain: layout;
}

.creole-inline-ad ins.adsbygoogle {
    display: block !important;
    width: 100%;
    min-height: 250px;
}

.creole-ad-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.blog-search-loading {
    display: none;
    padding-right: 1rem;
}

.blog-search-loading svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--mauritius-blue);
    animation: spin 1s linear infinite;
}

.imported-lesson-aims,
.imported-grammar-card {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: 1rem;
}

.imported-lesson-aims {
    background: rgba(26, 32, 109, 0.05);
}

.imported-lesson-aims h3,
.imported-grammar-card h3,
.imported-cultural-tip h2 {
    margin: 0 0 1rem;
    color: var(--mauritius-blue);
    font-weight: 800;
}

.imported-lesson-aims h3 {
    margin-bottom: 0.5rem;
}

.imported-lesson-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #374151;
    list-style: disc;
}

.imported-lesson-list li + li {
    margin-top: 0.25rem;
}

.imported-dialogue-list {
    display: grid;
    gap: 1rem;
    margin-bottom: 3rem;
}

.imported-dialogue-card {
    padding: 1rem;
    border-radius: 0.75rem;
    transition: background 0.2s ease;
}

.imported-dialogue-card:hover {
    background: rgba(255, 255, 255, 0.5);
}

.imported-dialogue-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.imported-dialogue-speaker {
    min-width: 6.25rem;
    color: var(--mauritius-red);
    font-weight: 800;
}

.imported-dialogue-copy {
    flex: 1 1 auto;
}

.imported-dialogue-creole {
    margin: 0 0 0.25rem;
    color: #111827;
    font-size: 1.125rem;
    font-weight: 600;
}

.imported-dialogue-english {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
    font-style: italic;
}

.imported-prose {
    max-width: none;
    color: #374151;
}

.imported-example-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: #f9fafb;
}

.imported-example-box h4 {
    margin: 0 0 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.imported-example-list {
    display: grid;
    gap: 0.75rem;
}

.imported-example-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.imported-example-creole {
    color: var(--mauritius-blue);
    font-weight: 600;
}

.imported-example-arrow {
    color: #d1d5db;
}

.imported-example-english {
    color: #4b5563;
    font-style: italic;
}

.imported-cultural-tip {
    margin-bottom: 3rem;
    padding: 1.5rem;
    border-left: 4px solid var(--mauritius-yellow);
    border-radius: 1rem;
    background: rgba(255, 205, 0, 0.05);
}

/* Learning Pages */
.learning-hero {
    position: relative;
    width: 100vw;
    min-height: 500px;
    height: 65vh;
    margin-left: calc(50% - 50vw);
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.learning-hero-media,
.learning-hero-overlay {
    position: absolute;
    inset: 0;
}

.learning-hero-media {
    z-index: 0;
    overflow: hidden;
}

.learning-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.learning-hero-overlay {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.4), transparent);
}

.learning-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.learning-hero-copy {
    max-width: 42rem;
    text-align: left;
}

.learning-hero-copy h1 {
    margin: 0 0 2rem;
    color: #fff;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.18;
    font-weight: 900;
    text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

.learning-hero-cta {
    display: inline-block;
    padding: 1rem 2rem;
    color: #0f172a;
    border-radius: 999px;
    background: #ffd500;
    font-size: 1.125rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.learning-hero-cta:hover {
    color: #0f172a;
    background: #ffc000;
    transform: scale(1.05);
}

.learning-shell {
    width: min(100% - 2rem, 72rem);
    margin: 0 auto;
    padding-bottom: 5rem;
}

.learning-intro-card {
    position: relative;
    z-index: 30;
    width: 100%;
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    color: #334155;
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 18px 40px rgba(148, 163, 184, 0.18);
    text-align: center;
}

.learning-intro-card p {
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.65;
    font-weight: 600;
}

.learning-nav-grid,
.learning-benefit-grid,
.learning-faq-grid,
.learning-explore-grid {
    display: grid;
    gap: 1.5rem;
}

.learning-nav-grid {
    position: relative;
    z-index: 30;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 6rem;
}

.learning-nav-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2rem;
    color: inherit;
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 18px 40px rgba(148, 163, 184, 0.18);
    text-align: center;
    transition: transform 0.25s ease;
}

.learning-nav-card:hover {
    transform: translateY(-0.5rem);
}

.learning-card-icon,
.learning-benefit-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #dcfce7;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.learning-card-icon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.learning-card-icon img,
.learning-benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.1));
    transition: transform 0.25s ease;
}

.learning-nav-card:hover .learning-card-icon,
.learning-benefit-card:hover .learning-benefit-icon {
    border-color: #86efac;
    background: #bbf7d0;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}

.learning-nav-card:hover img,
.learning-benefit-card:hover img {
    transform: scale(1.1);
}

.learning-card-copy {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
}

.learning-card-copy h3,
.learning-benefit-card h3 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 800;
}

.learning-nav-card:hover h3 {
    color: var(--mauritius-blue);
}

.learning-card-copy p,
.learning-benefit-card p {
    margin: 0;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.55;
}

.learning-card-copy p {
    margin-bottom: 1.5rem;
}

.learning-card-copy span {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    color: var(--mauritius-blue);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.learning-card-copy span svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.learning-nav-card:hover .learning-card-copy span svg {
    transform: translateX(0.25rem);
}

.learning-card-mobile-arrow {
    display: none;
}

.learning-section {
    margin-bottom: 6rem;
}

.learning-section-last {
    margin-bottom: 5rem;
}

.learning-section h2 {
    margin: 0 0 2.5rem;
    color: #1e293b;
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
}

.learning-benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

.learning-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.learning-benefit-icon {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}

.learning-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.learning-faq-item {
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.learning-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    color: #1e293b;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.learning-faq-item summary::-webkit-details-marker {
    display: none;
}

.learning-faq-item summary:hover,
.learning-faq-item[open] summary {
    color: var(--mauritius-blue);
}

.learning-faq-item summary span {
    color: #94a3b8;
    transition: transform 0.25s ease, color 0.25s ease;
}

.learning-faq-item summary svg {
    width: 1.25rem;
    height: 1.25rem;
}

.learning-faq-item[open] summary span {
    color: var(--mauritius-blue);
    transform: rotate(180deg);
}

.learning-faq-item > div {
    padding: 0 1.25rem 1.25rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.65;
}

.learning-explore-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.learning-explore-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.learning-explore-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.learning-explore-img,
.learning-explore-overlay {
    position: absolute;
    inset: 0;
}

.learning-explore-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.learning-explore-card:hover .learning-explore-img {
    transform: scale(1.1);
}

.learning-explore-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
    opacity: 0.8;
    transition: opacity 0.25s ease;
}

.learning-explore-card:hover .learning-explore-overlay {
    opacity: 1;
}

.learning-explore-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
}

.learning-explore-content h3 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0;
}

.learning-explore-content div {
    display: flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    border-radius: 999px;
    background: #ffd500;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.learning-explore-content svg {
    width: 1rem;
    height: 1rem;
}

.lessons-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.2), transparent);
}

.lessons-share-row {
    gap: 0.75rem;
}

.lessons-share-row .share-icon-btn {
    width: 3rem;
    height: 3rem;
}

.lessons-intro-card {
    margin-bottom: 3rem;
}

.lessons-intro-card p + p {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    font-size: 1rem;
}

.lessons-list-section {
    position: relative;
    z-index: 30;
    margin-bottom: 6rem;
}

.lessons-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lesson-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lesson-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.lesson-card-locked {
    border-style: dashed;
    background: rgba(248, 250, 252, 0.9);
}

.lesson-card-header {
    position: relative;
    display: flex;
    min-height: 7rem;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.25rem;
    border-bottom: 1px solid #f8fafc;
}

.lesson-card-header span {
    position: relative;
    z-index: 1;
    padding: 0.4rem 0.75rem;
    border: 1px solid #fff;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.lesson-card-header > svg {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 8rem;
    height: 8rem;
    opacity: 0.12;
    transform: rotate(12deg);
    transition: transform 0.6s ease;
}

.lesson-card:hover .lesson-card-header > svg {
    transform: rotate(0deg) scale(1.08);
}

.lesson-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem;
}

.lesson-duration {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0.625rem;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 0.625rem;
    font-weight: 800;
}

.lesson-duration svg {
    width: 0.75rem;
    height: 0.75rem;
}

.lesson-card h3 {
    margin: 0 0 1.5rem;
    color: #1e293b;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 900;
    transition: color 0.2s ease;
}

.lesson-card-action,
.lesson-lock-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.lesson-card-action span {
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.lesson-card:hover .lesson-card-action span {
    color: #475569;
}

.lesson-card-action div,
.lesson-lock-note div {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    transition: transform 0.25s ease;
}

.lesson-card:hover .lesson-card-action div {
    transform: scale(1.1) rotate(6deg);
}

.lesson-card-action svg,
.lesson-lock-note svg {
    width: 1rem;
    height: 1rem;
}

.lesson-card-action svg {
    margin-left: 0.1rem;
    fill: currentColor;
}

.lesson-lock-note p {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.45;
}

.lesson-lock-note a {
    color: var(--mauritius-blue);
    font-weight: 700;
}

.lesson-lock-note a:hover {
    color: var(--mauritius-red);
}

.lesson-card-locked .lesson-card-header {
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.5), transparent);
}

.lesson-card-locked .lesson-card-header span {
    color: #64748b;
}

.lesson-card-locked .lesson-card-header > svg {
    color: #94a3b8;
}

.lesson-card-locked .lesson-lock-note div {
    color: #94a3b8;
    background: rgba(226, 232, 240, 0.8);
    box-shadow: none;
}

.lesson-theme-red .lesson-card-header { background: linear-gradient(135deg, rgba(234, 40, 57, 0.1), transparent); }
.lesson-theme-blue .lesson-card-header { background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), transparent); }
.lesson-theme-yellow .lesson-card-header { background: linear-gradient(135deg, rgba(255, 205, 0, 0.14), transparent); }
.lesson-theme-green .lesson-card-header { background: linear-gradient(135deg, rgba(0, 165, 81, 0.1), transparent); }

.lesson-theme-red .lesson-card-header span,
.lesson-theme-red:hover h3,
.lesson-theme-red .lesson-card-header > svg { color: var(--mauritius-red); }
.lesson-theme-blue .lesson-card-header span,
.lesson-theme-blue:hover h3,
.lesson-theme-blue .lesson-card-header > svg { color: var(--mauritius-blue); }
.lesson-theme-yellow .lesson-card-header span,
.lesson-theme-yellow:hover h3,
.lesson-theme-yellow .lesson-card-header > svg { color: #ca8a04; }
.lesson-theme-green .lesson-card-header span,
.lesson-theme-green:hover h3,
.lesson-theme-green .lesson-card-header > svg { color: var(--mauritius-green); }

.lesson-theme-red .lesson-card-action div { background: var(--mauritius-red); }
.lesson-theme-blue .lesson-card-action div { background: var(--mauritius-blue); }
.lesson-theme-yellow .lesson-card-action div { background: #ca8a04; }
.lesson-theme-green .lesson-card-action div { background: var(--mauritius-green); }

.lessons-empty {
    grid-column: 1 / -1;
    color: #64748b;
    text-align: center;
}

.lesson-timeline-section {
    margin-bottom: 8rem;
}

.lesson-timeline {
    position: relative;
    display: grid;
    max-width: 64rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 auto;
}

.lesson-timeline::before {
    content: "";
    position: absolute;
    top: 1.45rem;
    left: 8%;
    right: 2%;
    height: 2px;
    background: linear-gradient(90deg, #fecaca, #bbf7d0, #c7d2fe);
}

.lesson-timeline-item {
    position: relative;
    z-index: 1;
    min-width: 0;
    text-align: center;
}

.lesson-timeline-item > div {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 4px solid #fff;
    border-radius: 999px;
    font-size: 1.125rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.lesson-timeline-item h4 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 800;
}

.lesson-timeline-item p {
    max-width: 8rem;
    margin: 0 auto;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.55;
}

.timeline-red > div { color: #ef4444; background: #fef2f2; }
.timeline-orange > div { color: #fb923c; background: #fff7ed; }
.timeline-yellow > div { color: #eab308; background: #fefce8; }
.timeline-green > div { color: #22c55e; background: #f0fdf4; }
.timeline-purple > div { color: #a855f7; background: #faf5ff; }
.timeline-indigo > div { color: #818cf8; background: #eef2ff; }

.single-lesson-hero {
    position: relative;
    width: 100vw;
    min-height: 360px;
    margin-left: calc(50% - 50vw);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    z-index: 20;
}

.single-lesson-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), transparent);
}

.single-lesson-hero.lesson-theme-red .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(234, 40, 57, 0.1), transparent); }
.single-lesson-hero.lesson-theme-yellow .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(255, 205, 0, 0.14), transparent); }
.single-lesson-hero.lesson-theme-green .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(0, 165, 81, 0.1), transparent); }

.single-lesson-hero-icon {
    position: absolute;
    top: 50%;
    right: -6rem;
    z-index: 0;
    color: rgba(26, 32, 109, 0.1);
    opacity: 0.6;
    pointer-events: none;
    transform: translateY(-50%) rotate(-12deg);
}

.single-lesson-hero-icon svg {
    width: clamp(18rem, 36vw, 31rem);
    height: clamp(18rem, 36vw, 31rem);
}

.single-lesson-hero.lesson-theme-red .single-lesson-hero-icon { color: rgba(234, 40, 57, 0.1); }
.single-lesson-hero.lesson-theme-yellow .single-lesson-hero-icon { color: rgba(202, 138, 4, 0.12); }
.single-lesson-hero.lesson-theme-green .single-lesson-hero-icon { color: rgba(0, 165, 81, 0.1); }

.single-lesson-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.single-lesson-hero-copy {
    max-width: 48rem;
    text-align: left;
}

.single-lesson-hero-copy h1 {
    margin: 0 0 1.5rem;
    color: #1e293b;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
    font-weight: 900;
}

.single-lesson-hero-copy p {
    max-width: 42rem;
    margin: 0 0 2rem;
    color: #475569;
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.6;
    font-weight: 600;
}

.single-lesson-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.single-lesson-share-btn {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.single-lesson-share-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.single-lesson-share-btn:hover {
    color: #fff;
    transform: translateY(-0.25rem) scale(1.08);
}

.single-lesson-share-btn.share-icon-copy:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.single-lesson-shell {
    width: min(100% - 0.5rem, 72rem);
    margin: 0 auto;
    padding-bottom: 5rem;
}

.single-lesson-main {
    width: 100%;
}

.single-lesson-gate,
.single-lesson-content {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.single-lesson-gate {
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
}

.single-lesson-gate-icon {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--mauritius-blue);
    border-radius: 1rem;
    background: rgba(26, 32, 109, 0.1);
}

.single-lesson-gate-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.single-lesson-gate h2 {
    margin: 0 0 0.75rem;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 900;
}

.single-lesson-gate p {
    max-width: 24rem;
    margin: 0 auto 2rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.65;
}

.single-lesson-gate-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.single-lesson-primary-btn,
.single-lesson-secondary-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 800;
}

.single-lesson-primary-btn {
    color: #fff;
    background: var(--mauritius-blue);
}

.single-lesson-primary-btn:hover {
    color: #fff;
    opacity: 0.9;
}

.single-lesson-secondary-btn {
    color: #334155;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.single-lesson-secondary-btn:hover {
    color: var(--mauritius-blue);
    border-color: rgba(26, 32, 109, 0.4);
}

.single-lesson-content {
    padding: clamp(1.25rem, 4vw, 3rem);
}

.single-lesson-content,
.single-lesson-content .imported-prose {
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.75;
}

.single-lesson-content h2,
.single-lesson-content h3,
.single-lesson-content h4 {
    color: var(--mauritius-blue);
    font-weight: 900;
}

.single-lesson-content a {
    color: var(--mauritius-red);
    font-weight: 700;
}

.single-lesson-content a:hover {
    color: var(--mauritius-blue);
}

.single-lesson-content blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid rgba(26, 32, 109, 0.3);
    border-radius: 0 0.5rem 0.5rem 0;
    background: rgba(26, 32, 109, 0.05);
}

.single-lesson-ad {
    position: relative;
    width: 100%;
    margin: 2rem auto 0;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    text-align: center;
}

.single-lesson-ad-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(26, 32, 109, 0.05), rgba(234, 40, 57, 0.05));
    filter: blur(48px);
    opacity: 0.5;
    transform: translate(-50%, -50%);
}

.single-lesson-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.single-lesson-nav-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.single-lesson-nav-card:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(26, 32, 109, 0.2);
}

.single-lesson-nav-card > div {
    display: flex;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--mauritius-blue);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    transition: background 0.25s ease, color 0.25s ease;
}

.single-lesson-nav-card:hover > div {
    color: #fff;
    background: var(--mauritius-blue);
}

.single-lesson-nav-card svg {
    width: 1.25rem;
    height: 1.25rem;
}

.single-lesson-nav-card span {
    min-width: 0;
}

.single-lesson-nav-card small {
    display: block;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-lesson-nav-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mauritius-blue);
    font-weight: 800;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.single-lesson-nav-card:hover strong {
    color: var(--mauritius-red);
}

.single-lesson-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.single-lesson-bottom {
    padding-bottom: 0;
}

.practice-page {
    padding-bottom: 3rem;
}

.practice-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 3rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.practice-panel-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
    pointer-events: none;
}

.practice-intro,
.practice-quiz {
    position: relative;
    z-index: 1;
}

.practice-intro {
    max-width: 64rem;
    margin-bottom: 2rem;
    color: #475569;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    font-weight: 500;
}

.practice-intro p {
    margin: 0;
}

.practice-divider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin-bottom: 3rem;
    background: rgba(226, 232, 240, 0.5);
}

.quiz-loading,
.quiz-results,
.quiz-load-error {
    text-align: center;
}

.quiz-loading {
    padding: 3rem 0;
}

.quiz-loading div {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
    border: 4px solid var(--mauritius-blue);
    border-top-color: transparent;
    border-radius: 999px;
    animation: spin 1s linear infinite;
}

.quiz-loading p,
.quiz-load-error {
    color: #64748b;
    font-weight: 600;
}

.quiz-question {
    width: 100%;
    animation: fadeIn 0.25s ease;
}

.quiz-progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.7);
}

.quiz-progress div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
    transition: width 0.7s ease;
}

.quiz-topline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.quiz-topline span {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 999px;
    background: var(--mauritius-blue);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(26, 32, 109, 0.18);
}

.quiz-topline strong {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.quiz-question h2 {
    margin: 0 0 2.5rem;
    color: #0f172a;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
    font-weight: 900;
}

.quiz-options {
    display: grid;
    gap: 1rem;
}

.option-btn {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.25rem);
    color: #334155;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.option-btn:hover {
    border-color: rgba(26, 32, 109, 0.3);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.option-btn span {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 800;
}

.option-btn > div {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
}

.option-btn.is-muted {
    opacity: 0.7;
}

.option-btn.is-correct {
    color: #166534;
    border-color: #22c55e;
    background: #f0fdf4;
    opacity: 1;
}

.option-btn.is-wrong {
    color: #991b1b;
    border-color: #ef4444;
    background: #fef2f2;
    opacity: 1;
}

.option-btn.is-correct > div,
.option-btn.is-wrong > div {
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 0;
}

.option-btn.is-correct > div {
    background: #16a34a;
}

.option-btn.is-wrong > div {
    background: #dc2626;
}

.option-btn svg {
    width: 1rem;
    height: 1rem;
}

.quiz-explanation,
.quiz-next-wrap {
    margin-top: 2rem;
}

.quiz-feedback {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
}

.quiz-feedback > div {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.quiz-feedback svg {
    width: 1.25rem;
    height: 1.25rem;
}

.quiz-feedback h4 {
    margin: 0 0 0.25rem;
    font-weight: 800;
}

.quiz-feedback p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.quiz-feedback-correct {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.quiz-feedback-correct > div {
    background: #dcfce7;
}

.quiz-feedback-wrong {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.quiz-feedback-wrong > div {
    background: #fee2e2;
}

.quiz-next-wrap {
    display: flex;
    justify-content: flex-end;
}

.quiz-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    color: #fff;
    border: 0;
    border-radius: 0.75rem;
    background: var(--mauritius-blue);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quiz-next-btn:hover {
    background: var(--mauritius-red);
}

.quiz-next-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.quiz-results {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
    animation: fadeIn 0.25s ease;
}

.quiz-result-icon {
    display: flex;
    width: 6rem;
    height: 6rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 1px solid #f1f5f9;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.quiz-result-icon svg {
    width: 3rem;
    height: 3rem;
}

.quiz-result-blue {
    color: var(--mauritius-blue);
}

.quiz-result-yellow {
    color: var(--mauritius-yellow);
}

.quiz-result-muted {
    color: #64748b;
}

.quiz-results h2 {
    margin: 0 0 0.75rem;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 900;
}

.quiz-results > p {
    margin: 0 0 2rem;
    color: #475569;
    font-size: 1.125rem;
    font-weight: 600;
}

.quiz-score-card {
    max-width: 24rem;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.quiz-score-card div {
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.quiz-score-card strong {
    display: block;
    color: var(--mauritius-blue);
    font-size: 4rem;
    line-height: 1;
    font-weight: 900;
}

.quiz-score-card span {
    display: block;
    margin-top: 0.5rem;
    color: #64748b;
    font-weight: 600;
}

/* Vocabulary */
.vocab-page {
    padding-bottom: 3rem;
}

.vocab-page a,
.single-vocab-page a,
.vocab-tax-page a,
.vocab-card,
.vocab-card a,
.single-vocab-related-card,
.single-vocab-blog-card {
    text-decoration: none !important;
}

.vocab-tools-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 3rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.vocab-tools-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
    pointer-events: none;
}

.vocab-tools-inner {
    position: relative;
    z-index: 1;
}

.vocab-category-wrap {
    margin-bottom: 2rem;
    text-align: center;
}

.vocab-category-wrap h3 {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.vocab-mobile-select {
    display: none;
    width: 100%;
    padding: 0.75rem 1rem;
    color: #334155;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    outline: none;
}

.vocab-mobile-select:focus {
    border-color: rgba(26, 32, 109, 0.3);
    box-shadow: 0 0 0 4px rgba(26, 32, 109, 0.1);
}

.vocab-category-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.category-btn {
    position: relative;
    padding: 0.5rem 1rem;
    color: #475569;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.category-btn:hover {
    color: var(--mauritius-blue);
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transform: scale(1.05);
}

.category-btn.is-active {
    color: #fff;
    background: var(--mauritius-blue);
    box-shadow: 0 10px 22px rgba(26, 32, 109, 0.18);
}

.vocab-search {
    max-width: 42rem;
    margin: 0 auto;
}

.vocab-search,
.vocab-search-box {
    position: relative;
}

.vocab-search-glow {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-yellow), var(--mauritius-green));
    opacity: 0.2;
    filter: blur(12px);
    transition: opacity 0.35s ease;
}

.vocab-search:hover .vocab-search-glow {
    opacity: 0.4;
}

.vocab-search-box {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
}

.vocab-search-box:focus-within {
    box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.16), 0 12px 28px rgba(15, 23, 42, 0.12);
}

.vocab-search-box > svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 1rem;
    color: rgba(26, 32, 109, 0.6);
}

.vocab-search-box input {
    width: 100%;
    padding: 0.5rem 1rem;
    color: #334155;
    border: 0;
    background: transparent;
    font-weight: 600;
    outline: none;
}

.vocab-search-box input::placeholder {
    color: #94a3b8;
}

.vocab-search-loader {
    padding-right: 1rem;
}

.vocab-search-loader svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--mauritius-blue);
    animation: spin 1s linear infinite;
}

.vocab-results-grid {
    display: grid;
    max-width: 72rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin: 0 auto;
}

.vocab-loading,
.vocab-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    color: #6b7280;
    text-align: center;
}

.vocab-loading div {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 1rem;
    border: 4px solid var(--mauritius-blue);
    border-top-color: transparent;
    border-radius: 999px;
    animation: spin 1s linear infinite;
}

.vocab-card {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.5rem);
    color: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff, rgba(248, 250, 252, 0.5));
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vocab-card:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.vocab-card-glow {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    background: rgba(26, 32, 109, 0.05);
    filter: blur(24px);
    pointer-events: none;
    transition: background 0.25s ease;
}

.vocab-card:hover .vocab-card-glow {
    background: rgba(26, 32, 109, 0.1);
}

.vocab-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 0;
    height: auto;
    flex-direction: column;
}

.vocab-card-section {
    margin-bottom: 1.25rem;
}

.vocab-card-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.vocab-card-label i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: #cbd5e1;
}

.vocab-card:hover .vocab-card-label i {
    background: var(--mauritius-red);
}

.vocab-card-label-blue {
    color: rgba(26, 32, 109, 0.6);
}

.vocab-card-label-blue i {
    background: rgba(26, 32, 109, 0.4);
}

.vocab-card:hover .vocab-card-label-blue i {
    background: var(--mauritius-blue);
}

.vocab-card h3 {
    margin: 0;
    color: #1e293b;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
}

.vocab-card:hover h3 {
    color: var(--mauritius-blue);
}

.vocab-card-creole {
    position: relative;
}

.vocab-card-translation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-left: -0.5rem;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.vocab-card:hover .vocab-card-translation {
    border-color: rgba(26, 32, 109, 0.1);
    background: rgba(255, 255, 255, 0.85);
}

.vocab-card-translation p {
    margin: 0;
    color: var(--mauritius-blue);
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    font-style: italic;
    font-weight: 800;
}

.vocab-card-translation button {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.vocab-card-translation button:hover {
    color: #fff;
    background: var(--mauritius-blue);
    box-shadow: 0 8px 18px rgba(26, 32, 109, 0.18);
}

.vocab-card-translation svg {
    width: 1rem;
    height: 1rem;
}

.vocab-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.vocab-card-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vocab-card:hover .vocab-card-category {
    color: var(--mauritius-blue);
    border-color: rgba(26, 32, 109, 0.3);
}

.vocab-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vocab-card-link svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
}

.vocab-card:hover .vocab-card-link {
    color: var(--mauritius-red);
}

.vocab-card:hover .vocab-card-link svg {
    transform: translateX(0.25rem);
}

.vocab-highlight {
    padding: 0 0.125rem;
    color: var(--mauritius-blue);
    border-radius: 0.125rem;
    background: #fef08a;
}

.vocab-load-more {
    margin-top: 3rem;
    text-align: center;
}

.vocab-load-more button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vocab-load-more button:hover {
    color: var(--mauritius-blue);
    border-color: var(--mauritius-blue);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.vocab-load-more svg {
    width: 1rem;
    height: 1rem;
}

.vocab-explore {
    margin-top: clamp(5rem, 8vw, 7rem);
}

.vocab-faq-section {
    margin-top: 6rem;
}

.single-vocab-page {
    padding-bottom: 3rem;
}

.single-vocab-main {
    max-width: 72rem;
    margin: 0 auto 3rem;
}

.single-vocab-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2.5rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    text-align: center;
}

.single-vocab-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow));
}

.single-vocab-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    background: rgba(26, 32, 109, 0.05);
    filter: blur(48px);
    transform: translate(-50%, -50%);
}

.single-vocab-card-inner {
    position: relative;
    z-index: 1;
}

.single-vocab-label {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-vocab-label-blue {
    color: var(--mauritius-blue);
    background: rgba(26, 32, 109, 0.05);
}

.single-vocab-label-red {
    color: var(--mauritius-red);
    background: rgba(234, 40, 57, 0.05);
}

.single-vocab-card h2 {
    margin: 0 0 1.5rem;
    color: #0f172a;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
}

.single-vocab-card h1 {
    margin: 0 0 1rem;
    color: var(--mauritius-red);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    font-weight: 900;
}

.single-vocab-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 1.5rem;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.single-vocab-pronounce {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.5rem;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: var(--mauritius-blue);
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.single-vocab-pronounce:hover {
    filter: brightness(1.1);
}

.single-vocab-pronounce svg {
    width: 1.25rem;
    height: 1.25rem;
}

.single-vocab-explain {
    max-width: 34rem;
    margin: 0 auto 1rem;
    padding: 1rem;
    color: #64748b;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    background: rgba(248, 250, 252, 0.5);
    font-size: 0.875rem;
    line-height: 1.65;
}

.single-vocab-explain p {
    margin: 0;
}

.single-vocab-explain strong {
    color: #1e293b;
}

.single-vocab-explain strong:last-child {
    color: var(--mauritius-red);
}

.single-vocab-example {
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    color: #64748b;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.8);
    text-align: left;
}

.single-vocab-example h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-vocab-example h3 svg {
    width: 1rem;
    height: 1rem;
    color: var(--mauritius-yellow);
}

.single-vocab-example p {
    margin: 0;
}

.single-vocab-example-creole {
    margin-bottom: 0.5rem !important;
    color: var(--mauritius-blue);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 700;
}

.single-vocab-practice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
    font-size: 0.875rem;
}

.single-vocab-practice span {
    color: #64748b;
    font-weight: 700;
}

.single-vocab-practice a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--mauritius-blue);
    font-weight: 800;
}

.single-vocab-practice a:hover {
    color: var(--mauritius-red);
}

.single-vocab-practice svg {
    width: 1rem;
    height: 1rem;
}

.single-vocab-section {
    margin-bottom: 4rem;
}

.single-vocab-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 2rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.single-vocab-section-title span {
    width: 0.375rem;
    height: 1.5rem;
    border-radius: 999px;
}

.single-vocab-title-green span {
    background: var(--mauritius-green);
}

.single-vocab-title-red span {
    background: var(--mauritius-red);
}

.single-vocab-related-grid,
.single-vocab-blog-grid {
    display: grid;
    gap: 1.5rem;
}

.single-vocab-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-vocab-related-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    color: inherit;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    background: #fff;
    text-align: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.single-vocab-related-card:hover {
    border-color: rgba(26, 32, 109, 0.3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.single-vocab-related-card span {
    display: block;
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.single-vocab-related-card h4 {
    margin: 0 0 1rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.single-vocab-related-card:hover h4 {
    color: var(--mauritius-blue);
}

.single-vocab-related-card div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem 1rem;
    color: var(--mauritius-blue);
    border-radius: 0.5rem;
    background: rgba(26, 32, 109, 0.05);
    font-size: 0.875rem;
    font-weight: 800;
}

.single-vocab-related-card div svg {
    width: 1rem;
    height: 1rem;
}

.single-vocab-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.single-vocab-blog-card {
    display: flex;
    overflow: hidden;
    color: inherit;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.single-vocab-blog-card:hover {
    border-color: rgba(234, 40, 57, 0.3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.single-vocab-blog-media {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    background: rgba(234, 40, 57, 0.05);
}

.single-vocab-blog-card {
    flex-direction: column;
}

.single-vocab-blog-media img,
.single-vocab-blog-media > div {
    width: 100%;
    height: 100%;
}

.single-vocab-blog-media img {
    object-fit: cover;
    transition: transform 0.7s ease;
}

.single-vocab-blog-card:hover img {
    transform: scale(1.1);
}

.single-vocab-blog-media > div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(234, 40, 57, 0.2);
}

.single-vocab-blog-media svg {
    width: 2rem;
    height: 2rem;
}

.single-vocab-blog-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem;
}

.single-vocab-blog-body h4 {
    margin: 0 0 0.5rem;
    color: var(--mauritius-blue);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 800;
}

.single-vocab-blog-card:hover h4 {
    color: var(--mauritius-red);
}

.single-vocab-blog-body p {
    display: -webkit-box;
    margin: 0 0 1rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.single-vocab-blog-body span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    color: var(--mauritius-red);
    font-size: 0.875rem;
    font-weight: 800;
}

.single-vocab-blog-body svg {
    width: 1rem;
    height: 1rem;
}

.vocab-tax-page {
    width: min(100% - 2rem, 80rem);
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
}

.vocab-tax-hero {
    position: relative;
    width: 100%;
    height: clamp(22rem, 42vw, 28rem);
    margin-bottom: 3rem;
    overflow: hidden;
    border-radius: 2.5rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.vocab-tax-hero img,
.vocab-tax-hero-overlay,
.vocab-tax-bottom-fade {
    position: absolute;
    inset: 0;
}

.vocab-tax-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vocab-tax-hero-overlay {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(26, 32, 109, 0.4));
}

.vocab-tax-hero-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
}

.vocab-tax-hero-content > span {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(10px);
}

.vocab-tax-hero h1 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    font-weight: 900;
    text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

.vocab-tax-hero h1 em {
    color: var(--mauritius-yellow);
    font-style: normal;
}

.vocab-tax-hero p {
    max-width: 42rem;
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.55;
    font-weight: 500;
}

.vocab-tax-bottom-fade {
    top: auto;
    height: 6rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
}

.vocab-tax-grid {
    max-width: none;
}

.vocab-tax-spinner {
    margin-top: 1rem;
}

.vocab-tax-spinner svg {
    width: 2rem;
    height: 2rem;
    color: var(--mauritius-blue);
    animation: spin 1s linear infinite;
}

.vocab-load-more button.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
}

.vocab-tax-explore {
    margin-top: 8rem;
}

/* Visit and Expat Hub Pages */
.hub-hero {
    position: relative;
    width: calc(100% + 2rem);
    min-height: 620px;
    height: 85vh;
    margin-right: -1rem;
    margin-left: -1rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

.hub-hero-glow {
    position: absolute;
    right: 0;
    bottom: -0.75rem;
    left: 0;
    z-index: -1;
    height: 8rem;
    border-radius: 0 0 3.5rem 3.5rem;
    background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
    filter: blur(24px);
    opacity: 0.7;
}

.hub-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 0 0 3rem 3rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.hub-hero-media img,
.hub-hero-media div {
    position: absolute;
    inset: 0;
}

.hub-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-hero-media div {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.8));
}

.hub-hero-content {
    position: relative;
    z-index: 1;
    width: min(100% - 2rem, 64rem);
    margin: 0 auto;
    padding-top: 5rem;
    color: #fff;
    text-align: center;
}

.hub-hero-content > span {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.hub-hero-content h1 {
    margin: 0 0 1.5rem;
    color: #fff;
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 8px 22px rgba(15, 23, 42, 0.36);
}

.hub-hero-content p {
    max-width: 48rem;
    margin: 0 auto;
    color: #f1f5f9;
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}

.hub-hero-search {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100%, 42rem);
    align-items: center;
    gap: 1rem;
    margin: 2.5rem auto 0;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(14px);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hub-hero-search:focus-within,
.hub-hero-search:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(15, 23, 42, 0.2);
}

.hub-hero-search > svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.82);
}

.hub-hero-search input {
    width: 100%;
    height: 3rem;
    color: #fff;
    border: 0;
    background: transparent;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    outline: none;
}

.hub-hero-search input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.hub-hero-search button {
    display: flex;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: var(--mauritius-red);
    box-shadow: 0 12px 24px rgba(234, 40, 57, 0.24);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hub-hero-search button:hover {
    background: #dc2626;
}

.hub-hero-search button:active {
    transform: scale(0.95);
}

.hub-hero-search button svg {
    width: 1.35rem;
    height: 1.35rem;
}

.hub-page {
    width: min(100% - 2rem, 80rem);
    margin: 0 auto;
}

.hub-section,
.hub-slider-section,
.hub-essentials,
.hub-language-card {
    margin-bottom: 6rem;
}

.hub-section-head {
    margin-bottom: 2.5rem;
}

.hub-section-head-center {
    max-width: 48rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.hub-section-head h2,
.hub-slider-head h2 {
    margin: 0 0 1rem;
    color: #1e293b;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
}

.hub-section-head h2 span,
.hub-slider-head h2 span {
    background: linear-gradient(90deg, var(--mauritius-blue), var(--mauritius-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hub-section-head p,
.hub-slider-head p {
    margin: 0;
    color: #64748b;
    font-size: 1.125rem;
    line-height: 1.65;
    font-weight: 600;
}

.hub-map-panel {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    padding: 0.5rem;
    border: 4px solid #f8fafc;
    border-radius: 2.5rem;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.hub-map {
    width: 100%;
    min-height: 600px;
    height: 100%;
    overflow: hidden;
    border-radius: 2rem;
}

.hub-map-legend {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.hub-map-legend > span {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    margin-right: -1rem;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 900;
}

.hub-map-legend > span:first-child {
    background: var(--mauritius-red);
}

.hub-map-legend > span:nth-child(2) {
    background: var(--mauritius-blue);
}

.hub-map-legend svg {
    width: 1rem;
    height: 1rem;
}

.hub-map-legend strong,
.hub-map-legend small {
    display: block;
}

.hub-map-legend strong {
    color: #1e293b;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-map-legend small {
    color: #64748b;
    font-size: 0.625rem;
    font-weight: 600;
}

.hub-map-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.hub-map-marker:hover {
    transform: scale(1.2);
}

.hub-map-marker span {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.hub-map-marker span svg {
    width: 1rem;
    height: 1rem;
}

.hub-map-marker small {
    width: 1rem;
    height: 0.25rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    filter: blur(2px);
}

.hub-map-popup {
    min-width: 220px;
    padding: 1rem;
    font-family: inherit;
}

.hub-map-popup h3 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1.125rem;
    line-height: 1.15;
    font-weight: 900;
}

.hub-map-popup p {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.75rem;
    line-height: 1.55;
    font-weight: 600;
}

.hub-map-popup a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: #fff;
    border-radius: 0.5rem;
    background: var(--mauritius-blue);
    font-size: 0.75rem;
    font-weight: 800;
}

.hub-map-popup a:hover {
    color: #fff;
    background: var(--mauritius-red);
}

.hub-map-popup svg {
    width: 0.875rem;
    height: 0.875rem;
}

.hub-essentials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.hub-essential-card {
    position: relative;
    min-height: 11rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
    text-align: center;
    backdrop-filter: blur(14px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hub-essential-card:hover {
    transform: translateY(-0.5rem) scale(1.02);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
}

.hub-essential-card div {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.hub-essential-card div svg {
    width: 2rem;
    height: 2rem;
}

.hub-essential-card h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 900;
}

.hub-essential-card > svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hub-essential-card:hover > svg {
    opacity: 1;
    transform: translateY(0);
}

.hub-theme-red { --hub-accent: var(--mauritius-red); }
.hub-theme-blue { --hub-accent: var(--mauritius-blue); }
.hub-theme-green { --hub-accent: var(--mauritius-green); }
.hub-theme-yellow { --hub-accent: #ca8a04; }

.hub-theme-red div,
.hub-theme-red h3,
.hub-theme-red > svg,
.hub-theme-red .hub-slider-head > span,
.hub-theme-red .hub-slider-card-copy span { color: var(--mauritius-red); }
.hub-theme-blue div,
.hub-theme-blue h3,
.hub-theme-blue > svg,
.hub-theme-blue .hub-slider-head > span,
.hub-theme-blue .hub-slider-card-copy span { color: var(--mauritius-blue); }
.hub-theme-green div,
.hub-theme-green h3,
.hub-theme-green > svg,
.hub-theme-green .hub-slider-head > span,
.hub-theme-green .hub-slider-card-copy span { color: var(--mauritius-green); }
.hub-theme-yellow div,
.hub-theme-yellow h3,
.hub-theme-yellow > svg,
.hub-theme-yellow .hub-slider-head > span,
.hub-theme-yellow .hub-slider-card-copy span { color: #ca8a04; }

.hub-slider-section {
    --hub-accent: var(--mauritius-blue);
}

.hub-slider-head {
    margin-bottom: 2rem;
}

.hub-slider-head > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.375rem 1rem;
    border: 1px solid color-mix(in srgb, var(--hub-accent) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--hub-accent) 10%, transparent);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hub-slider-head > span svg {
    width: 1rem;
    height: 1rem;
}

.hub-slider-wrap {
    position: relative;
}

.hub-slider-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0 1rem 2rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hub-slider-track::-webkit-scrollbar {
    display: none;
}

.hub-slider-card {
    position: relative;
    width: min(80vw, 20rem);
    height: 23.75rem;
    flex: 0 0 auto;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    scroll-snap-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hub-slider-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
}

.hub-slider-card img,
.hub-slider-overlay,
.hub-slider-empty {
    position: absolute;
    inset: 0;
}

.hub-slider-card img {
    width: 120%;
    max-width: none;
    height: 100%;
    left: -10%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.hub-slider-card:hover img {
    transform: scale(1.08);
}

.hub-slider-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.2), transparent);
}

.hub-slider-card-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.5rem;
}

.hub-slider-card-copy span {
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--hub-accent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    transition: width 0.3s ease;
}

.hub-slider-card:hover .hub-slider-card-copy span {
    width: 5rem;
}

.hub-slider-card-copy h3 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 900;
    text-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

.hub-slider-empty,
.hub-slider-empty-card {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #1e293b;
    font-weight: 800;
}

.hub-slider-empty-card {
    width: min(100%, 24rem);
    min-height: 14rem;
    padding: 2rem;
    border: 2px dashed #cbd5e1;
    border-radius: 2rem;
    background: #f1f5f9;
    text-align: center;
}

.hub-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    border: 1px solid #f1f5f9;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.hub-slider-btn:hover {
    color: #fff;
    background: var(--hub-accent);
    transform: translateY(-50%) scale(1.08);
}

.hub-slider-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.hub-slider-prev {
    left: -0.75rem;
}

.hub-slider-next {
    right: -0.75rem;
}

.hub-language-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(2rem, 4vw, 3rem);
    color: #fff;
    border-radius: 2.5rem;
    background: var(--mauritius-blue);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.hub-language-card::before,
.hub-language-card::after {
    content: "";
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
}

.hub-language-card::before {
    top: 0;
    right: 0;
    background: rgba(234, 40, 57, 0.2);
    transform: translate(35%, -35%);
}

.hub-language-card::after {
    bottom: 0;
    left: 0;
    background: rgba(255, 205, 0, 0.1);
    transform: translate(-35%, 35%);
}

.hub-language-copy,
.hub-phrase-list {
    position: relative;
    z-index: 1;
}

.hub-language-copy {
    flex: 1 1 0;
}

.hub-language-copy > div {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.08);
}

.hub-language-copy svg {
    width: 2rem;
    height: 2rem;
    color: var(--mauritius-yellow);
}

.hub-language-copy h3 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.1;
    font-weight: 900;
}

.hub-language-copy p {
    max-width: 34rem;
    margin: 0;
    color: #cbd5e1;
    font-size: 1.125rem;
    line-height: 1.65;
    font-weight: 600;
}

.hub-language-copy a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1rem 2rem;
    color: var(--mauritius-blue);
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
    transition: transform 0.2s ease, background 0.2s ease;
}

.hub-language-copy a:hover {
    color: var(--mauritius-blue);
    background: var(--mauritius-yellow);
    transform: translateY(-0.25rem);
}

.hub-language-copy a svg {
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
}

.hub-phrase-list {
    display: grid;
    width: min(100%, 28rem);
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.hub-phrase-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hub-phrase-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
}

.hub-phrase-item:active {
    transform: scale(0.97);
}

.hub-phrase-item strong,
.hub-phrase-item small {
    display: block;
}

.hub-phrase-item strong {
    color: var(--mauritius-yellow);
    font-size: 1.25rem;
    font-weight: 800;
}

.hub-phrase-item small {
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hub-phrase-item > svg {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    padding: 0.625rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease, background 0.2s ease;
}

.hub-phrase-item:hover > svg {
    color: var(--mauritius-blue);
    background: #fff;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.expat-calculator {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12);
}

.expat-calc-form {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.expat-calc-group h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.expat-calc-group h4 svg,
.expat-option-grid label svg {
    width: 0.875rem;
    height: 0.875rem;
}

.expat-counter-grid,
.expat-option-grid {
    display: grid;
    gap: 1rem;
}

.expat-counter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.expat-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.expat-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #f8fafc;
    text-align: center;
}

.expat-counter label,
.expat-option-grid label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
}

.expat-counter > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.expat-counter button {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.expat-counter button:last-child {
    color: #fff;
    border-color: var(--mauritius-blue);
    background: var(--mauritius-blue);
}

.expat-counter button svg {
    width: 0.875rem;
    height: 0.875rem;
}

.expat-counter span {
    min-width: 1.5rem;
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 900;
}

.expat-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: #f1f5f9;
}

.expat-segmented button {
    padding: 0.625rem 0.5rem;
    color: #475569;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.expat-segmented button.is-active {
    color: var(--mauritius-blue);
    background: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.expat-option-grid select {
    width: 100%;
    padding: 0.75rem 1rem;
    color: #334155;
    border: 2px solid #f1f5f9;
    border-radius: 0.625rem;
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 800;
    outline: none;
}

.expat-option-grid select:focus {
    border-color: var(--mauritius-blue);
}

.expat-calc-result {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #0a192f;
    color: #fff;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}

.expat-result-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 0%, rgba(234, 40, 57, 0.24), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(26, 32, 109, 0.24), transparent 30%),
        linear-gradient(135deg, #0a192f, #112240, #1a365d);
}

.expat-result-content {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.expat-result-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.expat-result-top h3 {
    margin: 0 0 0.25rem;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.expat-result-top p {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
}

.expat-total span {
    display: block;
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    font-weight: 900;
}

.expat-total small,
.expat-total-eur small {
    display: block;
    color: #64748b;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.expat-total-eur {
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.expat-total-eur strong {
    color: #34d399;
    font-family: monospace;
}

.expat-breakdown {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.expat-breakdown-item {
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
}

.expat-breakdown-item svg {
    width: 1rem;
    height: 1rem;
    color: #93c5fd;
}

.expat-breakdown-item span {
    color: #cbd5e1;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.expat-breakdown-item strong {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 900;
}

@media (max-width: 1023px) {
    .about-category-grid,
    .contact-card-grid,
    .search-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .newsletter-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .content-hero {
        min-height: 460px;
        height: 58vh;
    }

    .content-hero-share {
        display: none;
    }

    .content-page-shell,
    .search-page {
        width: min(100% - 1.5rem, 80rem);
    }

    .section-eyebrow {
        font-size: 0.75rem;
    }

    .about-story-card {
        border-radius: 1.75rem;
    }

    .about-category-grid,
    .contact-card-grid,
    .search-card-grid,
    .account-field-grid {
        grid-template-columns: 1fr;
    }

    .about-category-card {
        height: 8rem;
        border-radius: 1.5rem;
    }

    .about-category-content {
        padding: 1.25rem;
    }

    .about-category-content h3 {
        margin-bottom: 0;
        font-size: 1.25rem;
    }

    .about-category-content h3 svg {
        display: block;
    }

    .about-category-content p {
        display: none;
    }

    .newsletter-panel,
    .contact-form-card {
        border-radius: 1.5rem;
    }

    .contact-form-section,
    .contact-connect-section {
        margin-bottom: 4rem;
    }

    .contact-info-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    .contact-link {
        font-size: 1rem;
        word-break: break-word;
    }

    .account-page {
        padding-top: 7rem;
    }

    .account-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .search-page-header p {
        font-size: 1rem;
    }

    .legal-page {
        width: min(100% - 1.5rem, 64rem);
        padding: 2rem 0;
    }

    .legal-header {
        margin-bottom: 3rem;
    }

    .legal-card {
        padding: 1.5rem;
    }

    .legal-section-title {
        align-items: flex-start;
    }

    .legal-section-body {
        padding-left: 0;
    }

    .legal-two-grid,
    .legal-check-grid,
    .legal-chip-grid {
        grid-template-columns: 1fr;
    }

    .learning-hero {
        min-height: 460px;
        height: 58vh;
        margin-bottom: 3rem;
    }

    .learning-shell {
        width: min(100% - 1.5rem, 72rem);
    }

    .learning-nav-grid,
    .learning-benefit-grid,
    .learning-faq-grid {
        grid-template-columns: 1fr;
    }

    .learning-nav-card {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        text-align: left;
    }

    .learning-card-icon {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 0.75rem;
    }

    .learning-card-copy {
        align-items: flex-start;
    }

    .learning-card-copy h3 {
        margin-bottom: 0;
        font-size: 1.05rem;
    }

    .learning-card-copy p,
    .learning-card-copy span {
        display: none;
    }

    .learning-card-mobile-arrow {
        display: flex;
        width: 2rem;
        height: 2rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        color: var(--mauritius-blue);
        border-radius: 999px;
        background: #f8fafc;
    }

    .learning-card-mobile-arrow svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .learning-benefit-card {
        flex-direction: row;
        gap: 1.25rem;
        padding: 1.25rem;
        border: 1px solid #f1f5f9;
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        text-align: left;
    }

    .learning-benefit-icon {
        width: 4rem;
        height: 4rem;
        margin: 0;
        padding: 0.75rem;
    }

    .learning-section {
        margin-bottom: 4rem;
    }

    .learning-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-explore-content {
        padding: 1.25rem;
    }

    .learning-explore-content h3 {
        font-size: 1.25rem;
    }

    .lessons-share-row {
        display: none;
    }

    .lessons-grid {
        grid-template-columns: 1fr;
    }

    .lesson-card {
        border-radius: 1rem;
    }

    .lesson-card-header {
        display: none;
    }

    .lesson-card-body {
        padding: 1rem;
    }

    .lesson-card h3 {
        margin-bottom: 0.75rem;
        font-size: 1rem;
    }

    .lesson-card-action,
    .lesson-lock-note {
        padding-top: 0.75rem;
    }

    .lesson-timeline {
        display: flex;
        gap: 1rem;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 1rem;
        scroll-snap-type: x mandatory;
    }

    .lesson-timeline::before {
        display: none;
    }

    .lesson-timeline-item {
        min-width: 8.75rem;
        scroll-snap-align: center;
    }

    .single-lesson-hero {
        min-height: 320px;
    }

    .single-lesson-hero-inner {
        padding: 2rem 1.25rem 3rem;
    }

    .single-lesson-hero-icon {
        right: -10rem;
    }

    .single-lesson-share {
        display: none;
    }

    .single-lesson-shell {
        width: min(100% - 0.5rem, 72rem);
    }

    .single-lesson-content,
    .single-lesson-gate {
        border-radius: 1.25rem;
    }

    .single-lesson-ad {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        width: auto;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .single-lesson-gate-actions,
    .single-lesson-nav {
        grid-template-columns: 1fr;
    }

    .single-lesson-gate-actions {
        display: grid;
    }

    .single-lesson-nav {
        gap: 1rem;
    }

    .single-lesson-nav-card,
    .single-lesson-nav-next {
        justify-content: flex-start;
        text-align: left;
    }

    .single-lesson-nav-next span {
        order: 2;
    }

    .vocab-tools-panel {
        border-radius: 1.75rem;
    }

    .vocab-mobile-select {
        display: block;
    }

    .vocab-category-buttons {
        display: none;
    }

    .vocab-results-grid {
        grid-template-columns: 1fr;
    }

    .vocab-card {
        border-radius: 0.875rem;
    }

    .single-vocab-card {
        border-radius: 1.5rem;
    }

    .single-vocab-practice {
        align-items: center;
        flex-direction: column;
    }

    .single-vocab-related-grid,
    .single-vocab-blog-grid {
        grid-template-columns: 1fr;
    }

    .single-vocab-blog-card {
        flex-direction: row;
    }

    .single-vocab-blog-media {
        width: 7rem;
        height: auto;
        flex: 0 0 auto;
    }

    .single-vocab-blog-body p {
        display: none;
    }

    .vocab-tax-page {
        width: min(100% - 1.5rem, 80rem);
    }

    .vocab-tax-hero {
        border-radius: 1.5rem;
    }

    .vocab-tax-share {
        display: none;
    }
}

/* Mobile overflow and gutter corrections */
@media (max-width: 767px) {
    html,
    body {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .site-main {
        padding-right: 0;
        padding-left: 0;
        overflow-x: hidden;
    }

    .home-container,
    .content-page-shell,
    .blog-page-shell,
    .single-blog-shell,
    .vocab-page,
    .single-vocab-page,
    .search-page {
        width: min(100% - 1.5rem, 80rem);
        max-width: calc(100vw - 1.5rem);
        margin-right: auto;
        margin-left: auto;
    }

    .home-section,
    .home-latest-section,
    .home-newsletter,
    .home-mission,
    .home-path-section,
    .home-explore-section,
    .home-learn-section {
        max-width: 100%;
    }

    .home-ad-wrap,
    .home-ad-box,
    .creole-inline-ad {
        min-height: 260px;
    }

    .home-ad-box ins.adsbygoogle,
    .home-ad-wrap ins.adsbygoogle,
    .creole-inline-ad ins.adsbygoogle {
        min-height: 220px;
    }

    .site-header-shell {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .site-mobile-panel {
        left: 0;
        right: auto;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .site-mobile-panel-inner {
        width: 100%;
        max-width: 100%;
    }

    .site-mobile-parent-row {
        min-width: 0;
        padding-right: 0.25rem;
    }

    .site-mobile-parent-link {
        min-width: 0;
    }

    .site-mobile-submenu {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0.75rem;
    }

    .site-header-shell > *,
    .site-mobile-panel-inner > * {
        max-width: 100%;
    }

    .home-hero-button {
        min-height: 2.1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .single-blog-read-word {
        display: none;
    }

    .single-blog-shell {
        max-width: min(100% - 1.25rem, 100%);
    }

    .single-blog-hero-media {
        height: 15rem;
        min-height: 0;
    }
}

/* Learning templates link cleanup */
.learning-shell a,
.learning-hero a,
.single-lesson-shell a,
.single-lesson-bottom a,
.single-lesson-content a {
    text-decoration: none !important;
}

.learning-shell a:hover,
.learning-hero a:hover,
.single-lesson-shell a:hover,
.single-lesson-bottom a:hover,
.single-lesson-content a:hover {
    text-decoration: none !important;
}

.learning-pick-path-section .home-explore-grid {
    margin-top: 0;
}



/* About page redesigned hero */
.about-hero-section {
    width: min(100% - 2rem, 118rem);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    overflow: visible;
    border-radius: 0 0 1.5rem 1.5rem;
    background: transparent;
}

.about-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3rem);
    position: relative;
    z-index: 2;
}

.about-hero-main {
    min-width: 0;
    position: relative;
    padding: clamp(1.25rem, 2vw, 2rem);
    overflow: hidden;
    border-radius: 1.25rem;
    min-height: clamp(34rem, 45vw, 46rem);
}

.about-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.about-breadcrumbs a,
.about-breadcrumbs span {
    color: inherit;
    text-decoration: none !important;
}

.about-breadcrumbs span {
    color: #2f9c52;
}

.about-breadcrumbs svg {
    width: 1rem;
    height: 1rem;
    color: #5bbf7b;
}

.about-hero-content {
    max-width: 48rem;
    position: relative;
    z-index: 2;
}

.about-hero-eyebrow {
    margin: 0 0 1.2rem;
    color: #EA2839;
    font-size: clamp(0.8rem, 1vw, 1rem);
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-hero-title {
    margin: 0;
    color: #071a3a;
    font-size: clamp(2.75rem, 4.8vw, 4.75rem);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.03;
}

.about-hero-title::first-letter {
    letter-spacing: 0;
}

.about-hero-script {
    margin: 1.35rem 0 0;
    color: #3f9650;
    font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
    font-size: clamp(1.55rem, 2.75vw, 2.75rem);
    font-weight: 650;
    line-height: 0.95;
}

.about-hero-underline {
    display: block;
    width: min(26rem, 72%);
    height: 0.38rem;
    margin: 1.05rem 0 1.65rem;
    border-radius: 999px;
    background: #FFD500;
    transform: rotate(-1.5deg);
}

.about-hero-text {
    max-width: 42rem;
    margin: 0;
    color: #334155;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    font-weight: 500;
    line-height: 1.65;
}

.about-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.45rem;
    margin-top: 1.6rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(0, 165, 81, 0.26);
    border-radius: 0.55rem;
    background: #2f9c52;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 760;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(0, 165, 81, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.about-hero-cta:hover {
    transform: translateY(-2px);
    background: #258545;
    color: #fff;
    box-shadow: 0 18px 34px rgba(0, 165, 81, 0.22);
}

.about-hero-cta svg {
    width: 0.95rem;
    height: 0.95rem;
}

.about-hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #e2e8f0;
    box-shadow: none;
}

.about-hero-blob {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
}

.about-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 48%, rgba(255, 255, 255, 0.25) 100%);
}
.about-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
}

.about-popular-guides {
    position: sticky;
    top: 6.5rem;
    width: 100%;
    padding: 1.55rem 1.65rem 1.55rem 1.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.11);
    box-sizing: border-box;
    justify-self: start;
    max-width: 21rem;
}

.about-popular-guides h2 {
    margin: 0;
    color: #071a3a;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 790;
    letter-spacing: 0;
    line-height: 1.15;
}

.about-sidebar-rule {
    display: block;
    width: 3.2rem;
    height: 0.28rem;
    margin: 0.75rem 0 1.7rem;
    border-radius: 999px;
    background: #2f9c52;
    transform: rotate(-3deg);
}

.about-popular-list {
    display: grid;
    gap: 1.35rem;
}

.about-popular-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    color: inherit;
    text-decoration: none !important;
}

.about-popular-thumb {
    display: block;
    width: 5.5rem;
    aspect-ratio: 1.16;
    overflow: hidden;
    border-radius: 0.7rem;
    background: #e2e8f0;
}

.about-popular-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-popular-copy {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

.about-popular-pill {
    justify-self: start;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-popular-item--blue .about-popular-pill { background: #1A206D; }
.about-popular-item--red .about-popular-pill { background: #EA2839; }
.about-popular-item--yellow .about-popular-pill { background: #FFD500; color: #071a3a; }
.about-popular-item--green .about-popular-pill { background: #2f9c52; }

.about-popular-copy strong {
    color: #071a3a;
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    font-weight: 760;
    line-height: 1.18;
}

.about-popular-copy small {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.about-popular-all {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.65rem;
    padding-top: 1.35rem;
    width: 100%;
    border-top: 1px solid #e2e8f0;
    color: #2f9c52;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none !important;
}

.about-popular-all svg {
    width: 1.1rem;
    height: 1.1rem;
}
@media (max-width: 1180px) {
    .about-hero-layout {
        grid-template-columns: 1fr;
    }

    .about-popular-guides {
        grid-column: auto;
        position: static;
        justify-self: stretch;
        max-width: 100%;
    }

    .about-popular-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .about-hero-section {
        width: min(100% - 1.25rem, 118rem);
        padding: 1.25rem 0 0;
    }

    .about-hero-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-hero-main {
        min-height: 32rem;
        padding: 1.25rem;
    }

    .about-breadcrumbs {
        margin-bottom: 1.8rem;
        font-size: 0.86rem;
    }

    .about-hero-title {
        font-size: clamp(3rem, 16vw, 4.25rem);
    }

    .about-hero-script {
        font-size: clamp(1.45rem, 8vw, 2.2rem);
    }

    .about-popular-guides {
        padding: 1.25rem;
        justify-self: stretch;
        max-width: 100%;
    }

    .about-popular-list {
        grid-template-columns: 1fr;
    }
}