*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body, 'Poppins', sans-serif);
}

:root
{
    /* Cheerful multicolor palette — each color still has one job (a color
       change marks a change in meaning), but the set is bright & candy-like. */
    --grape: #8e2de2;       /* brand: logo, primary CTA, key headings */
    --grape-dark: #6f1fb8;
    --lavender: #eadff9;    /* hero / soft section wash */
    --sunny: #ffc83d;       /* yellow accent / highlights */
    --lime: #bce455;        /* primary / foundations */
    --tangerine: #f5873f;   /* higher secondary / energy */
    --sky: #afd2f2;         /* exam prep / info */
    --pink: #f23e8c;        /* playful emphasis / human sections */
    --pink-soft: #fcdce8;
    --mint: #e8f3d8;        /* green wash */
    --coral-soft: #fcdce8;
    --cream: #fbf7ee;       /* body background */
    --card: #ffffff;
    --ink: #2b2440;
    --ink-soft: #5b5470;

    /* fonts */
    --font-display: 'Fredoka', 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* legacy aliases — remapped to cheerful values so existing rules and
       inline styles adopt the new theme without hunting every reference */
    --indigo: var(--grape);
    --indigo-dark: var(--grape-dark);
    --amber: var(--sunny);
    --amber-dark: #e0a81f;
    --amber-soft: #fff3d1;
    --coral: var(--pink);
    --coral-dark: #c92a6e;
    --teal: #17a2bd;
    --teal-dark: #0f7d91;
    --teal-soft: #d7f0ec;
    --warm-white: #ffffff;
}

html
{
    scroll-behavior: smooth;
}

body
{
    overflow-x: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
}

/* Playful rounded display font for all headings, the logo and CTAs */
h1, h2, h3, h4,
.logo, .introLogo, .btn,
.tStatNum, .cardLink
{
    font-family: var(--font-display);
}

.container
{
    position: relative;
    width: 100%;
}

/*--- Intro overlay (index.html entrance only) ---*/
#introOverlay
{
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.introPanels
{
    position: absolute;
    inset: 0;
    display: flex;
}

.introPanel
{
    flex: 1 1 0;
    height: 100%;
}

.introCover
{
    position: absolute;
    inset: 0;
    background: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.introLogo
{
    font-size: 3.2em;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
}

/*--- Nav / Topbar ---*/
.main
{
    position: relative;
    width: 100%;
    min-height: 100vh;
    transition: padding-top 0.35s ease;
}

.main .topbar
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 252, 247, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(46, 42, 77, 0.08);
    height: 64px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    z-index: 10000;
    transition: box-shadow 0.3s;
}

.main .topbar.scrolled
{
    box-shadow: 0 8px 24px rgba(46, 42, 77, 0.12);
}

.main .topbar .logo
{
    color: var(--indigo);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main .topbar .toggle
{
    display: none;
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--ink);
}

.navigation ul
{
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.navigation ul li
{
    list-style: none;
}

.navigation ul li a
{
    position: relative;
    display: block;
    white-space: nowrap;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    font-size: 0.85em;
    letter-spacing: 2px;
    opacity: 0.6;
    transition: opacity 0.3s, color 0.3s;
    padding-bottom: 4px;
}

.navigation ul li a::after
{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--indigo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.navigation ul li a:hover,
.navigation ul li a.navActive
{
    opacity: 1;
    color: var(--indigo);
}

.navigation ul li a.navActive::after
{
    transform: scaleX(1);
}

.navigation ul li a.navHighlight
{
    background: var(--grape);
    color: #fff;
    opacity: 1;
    padding: 8px 18px;
    border-radius: 999px;
}

.navigation ul li a.navHighlight::after
{
    display: none;
}

.navigation ul li a.navHighlight:hover
{
    background: var(--grape-dark);
    color: #fff;
}

.navigation ul li a.navDisabled
{
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.navigation ul li a.navDisabled .tag
{
    display: inline-block;
    font-size: 0.75em;
    letter-spacing: 1px;
    margin-left: 6px;
    opacity: 0.8;
}

/*--- Buttons ---*/
.btn
{
    position: relative;
    display: inline-block;
    padding: 13px 34px;
    background: var(--grape);
    color: #fff;
    font-weight: 600;
    font-size: 1.02em;
    letter-spacing: 0.3px;
    margin-top: 10px;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(142, 45, 226, 0.32);
    transition: background 0.3s, box-shadow 0.3s;
    font-family: var(--font-display);
}

.btn:hover
{
    background: var(--grape-dark);
    box-shadow: 0 14px 28px rgba(142, 45, 226, 0.4);
}

.btn.btnOutline
{
    background: transparent;
    color: #fff;
    border: 2px solid currentColor;
    box-shadow: none;
    padding: 10px 30px;
}

.btn.btnOutline:hover
{
    background: rgba(255, 255, 255, 0.15);
}

.btn.btnDisabled,
.btn.btnDisabled:hover
{
    background: rgba(43, 36, 32, 0.12);
    color: var(--ink-soft);
    box-shadow: none;
    cursor: not-allowed;
}

/* White secondary CTA — pairs with the solid grape primary on light sections */
.btn.btnSecondary
{
    background: #fff;
    color: var(--grape);
    box-shadow: 0 10px 24px rgba(142, 45, 226, 0.16);
}

.btn.btnSecondary:hover
{
    background: #fff;
    color: var(--grape-dark);
    box-shadow: 0 14px 28px rgba(142, 45, 226, 0.26);
}

/*--- Sections ---*/
section
{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.adjust
{
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 0 40px;
    padding-top: 100px;
    padding-bottom: 80px;
}

.sectionWipe
{
    position: absolute;
    inset: 0;
    z-index: 5;
    transform-origin: top;
}

.title
{
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.title h2
{
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.6em;
    margin-bottom: 25px;
}

.title h2::before
{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 54px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
}

.title p
{
    font-size: 1.05em;
}

/* mask-reveal wrapper: overflow hidden box with an inner block that
   slides up from below on scroll/load (see animations.js) */
.maskWrap
{
    display: inline-block;
    overflow: hidden;
}

.maskInner
{
    display: block;
}

/*--- Home / Hero ---*/
.hero
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 60px;
    background: linear-gradient(160deg, var(--lavender) 0%, #f4edfc 60%, var(--cream) 100%);
    color: var(--ink);
}

.hero .imgBx
{
    position: relative;
    z-index: 2;
    width: 260px;
    height: 260px;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 25px;
    border: 6px solid var(--warm-white);
    box-shadow: 0 20px 45px rgba(46, 42, 77, 0.25);
}

.hero .imgBx img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

.hero h1
{
    position: relative;
    z-index: 2;
    font-size: 2.8em;
    letter-spacing: 0.5px;
    color: var(--grape);
    margin-bottom: 10px;
}

.hero .tagline
{
    position: relative;
    z-index: 2;
    font-size: 1.1em;
    color: var(--ink-soft);
    max-width: 560px;
    margin-bottom: 25px;
}

.hero .heroActions
{
    position: relative;
    z-index: 2;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.hero .socialMedia
{
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    list-style: none;
}

.hero .socialMedia li
{
    list-style: none;
}

.hero .socialMedia li a
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--grape);
    text-decoration: none;
    font-size: 1.2em;
    box-shadow: 0 6px 16px rgba(142, 45, 226, 0.18);
    transition: 0.3s;
}

.hero .socialMedia li a:hover
{
    background: var(--grape);
    color: #fff;
    transform: translateY(-3px);
}

/*--- Services ---*/
.services
{
    background: linear-gradient(160deg, var(--mint) 0%, #eef6e2 50%, var(--lavender) 100%);
    color: var(--ink);
}

.services .content
{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.serviceCard
{
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--ink);
    background: var(--card);
    border-radius: 26px;
    border-top: 6px solid var(--grape);
    padding: 46px 30px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(46, 30, 77, 0.12);
    transition: transform 0.35s, box-shadow 0.35s;
}

.serviceCard:hover
{
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(46, 30, 77, 0.2);
}

.serviceCard .illo
{
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
}

.serviceCard h3
{
    font-size: 1.4em;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.serviceCard p
{
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.serviceCard .cardLink
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8em;
    color: var(--indigo);
}

.serviceCard--terracotta { border-top-color: var(--tangerine); }
.serviceCard--terracotta .cardLink { color: var(--tangerine); }
.serviceCard--wine { border-top-color: var(--pink); }
.serviceCard--wine .cardLink { color: var(--pink); }

/*--- Contact ---*/
.contact
{
    background: var(--amber-soft);
}

.contact .title
{
    color: var(--ink);
}

.contactWrap
{
    position: relative;
    z-index: 2;
    display: flex;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
}

.contactWrap .contactIntro
{
    flex: 1;
    min-width: 220px;
}

.contactWrap .contactIntro h3
{
    font-size: 1.3em;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 15px;
    color: var(--ink);
}

.contactWrap .contactIntro p
{
    color: var(--ink-soft);
    margin-bottom: 25px;
}

.contactWrap .socialMedia
{
    display: flex;
    gap: 12px;
    list-style: none;
}

.contactWrap .socialMedia li a
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--grape);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(46, 30, 77, 0.1);
    transition: 0.3s;
}

.contactWrap .socialMedia li a:hover
{
    background: var(--grape);
    color: #fff;
}

.contactForm
{
    flex: 1.4;
    background: var(--card);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(46, 30, 77, 0.12);
}

.contactForm .formField
{
    margin-bottom: 18px;
}

.contactForm label
{
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9em;
    color: var(--ink);
}

.contactForm input,
.contactForm textarea
{
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid rgba(46, 30, 77, 0.14);
    border-radius: 14px;
    font-family: inherit;
    font-size: 1em;
    background: #fff;
    color: var(--ink);
}

.contactForm textarea
{
    min-height: 120px;
    resize: vertical;
}

.contactForm input:focus,
.contactForm textarea:focus
{
    outline: 2px solid var(--grape);
    border-color: transparent;
}

/*--- Responsive ---*/
@media (max-width: 900px)
{
    .main .topbar .toggle
    {
        display: flex;
    }

    .navigation ul
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--warm-white);
        border-bottom: 1px solid rgba(43, 36, 32, 0.08);
        box-shadow: 0 10px 30px rgba(43, 36, 32, 0.12);
        padding: 10px 40px 20px;
    }

    .navigation.active ul
    {
        display: flex;
    }

    .navigation ul li
    {
        width: 100%;
    }

    .navigation ul li a
    {
        width: 100%;
        padding: 10px 0;
    }

    .contactWrap
    {
        flex-direction: column;
    }
}

@media (max-width: 768px)
{
    .services .content
    {
        grid-template-columns: 1fr;
    }

    .hero h1
    {
        font-size: 1.9em;
    }
}

@media (max-width: 480px)
{
    .hero .imgBx
    {
        width: 200px;
        height: 200px;
    }

    .adjust
    {
        padding: 0 20px;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .contactForm
    {
        padding: 25px;
    }
}