/* Sparkling Topaz – single-screen welcome page. Flat colours, no gradients. */

:root {
    --navy:        #1F2B45;
    --text:        #56627C;
    --label:       #7A849B;
    --gold:        #E0A526;
    --pink:        #F5579A;
    --pink-dark:   #DD3F84;
    --pink-soft:   #FDEEF4;
    --purple:      #7557E4;
    --purple-dark: #5E42C9;
    --purple-soft: #EFEDFB;
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --slant: 7vh;      /* how far the photo edges lean */
    --gap:   .7vw;     /* space between the two photos */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); color: var(--text); background: #fff; line-height: 1.5; }
img { display: block; max-width: 100%; }
p, h1, h2, ul { margin: 0; }
a { color: inherit; }

/* ---------- One screen ---------- */
.page { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #fff; }

/* ---------- Left ---------- */
.intro {
    position: absolute; z-index: 2;
    left: 5.5vw; top: 2.2vh; bottom: 6vh;
    width: 32vw;
    display: flex; flex-direction: column;
    pointer-events: none;
}
.intro__logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.intro__copy { margin-top: 10px; }

.eyebrow {
    margin-top: 0;
    font-size: min(.9vw, 1.55vh);
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold);
}

.intro h1 {
    margin-top: min(1.6vw, 2.6vh);
    font-family: var(--serif);
    font-weight: 900;
    font-size: min(5.8vw, 9.6vh);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--navy);
}
.intro h1 span { display: block; }
.intro h1 .nowrap { white-space: nowrap; }
.intro h1 em { font-style: italic; color: var(--pink); letter-spacing: -0.03em; }

.intro__text {
    margin-top: min(1.8vw, 3vh);
    max-width: 26vw;
    font-size: min(1.2vw, 1.95vh);
    line-height: 1.7;
}

/* gold sparkles */
.spark { display: block; fill: var(--gold); }
.spark svg { display: block; width: 100%; height: 100%; }
.intro h1 span:nth-child(2) { position: relative; width: fit-content; }
.spark--inline { position: absolute; left: 100%; top: .12em; width: .26em; height: .26em; margin-left: .12em; }
.spark--bottom { position: absolute; left: 26vw; bottom: -3vh; width: 1.5vw; height: 1.5vw; }

/* ---------- Right: cards ---------- */
.cards {
    position: absolute; z-index: 1;
    left: 31vw; right: 3vw; top: 1.5vh; bottom: 5vh;
    display: flex;
}

.card { position: relative; flex: 1; min-width: 0; }
.card--academy { margin-left: calc(var(--gap) - var(--slant)); }

.card__photo { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: var(--navy); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__photo img { transform: scale(1.04); }

/* slanted edges: parallel lines on the facing sides */
.card--preschool .card__photo { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, calc(var(--slant) * .7) 100%); }
.card--academy   .card__photo { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
.card--preschool .card__photo img { object-position: 30% 50%; }
.card--academy   .card__photo img { object-position: 50% 75%; }

/* ---------- Info panel ---------- */
.panel {
    position: absolute; bottom: 2vh;
    padding: min(1.3vw, 2.2vh) min(1.4vw, 2.4vh);
    border-radius: 18px;
    transition: transform .25s ease;
}
.card:hover .panel { transform: translateY(-4px); }

.card--preschool .panel { background: var(--pink-soft);   left: calc(var(--slant) * .7 + .8vw); right: calc(var(--slant) - 1.2vw); }
.card--academy   .panel { background: var(--purple-soft); left: 2.5vw; right: 3vw; }

.panel__label {
    display: flex; gap: .7em; align-items: baseline;
    font-size: min(.75vw, 1.3vh);
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--label);
}
.panel__label b { font-weight: 700; }
.card--preschool .panel__label b { color: var(--pink); }
.card--academy   .panel__label b { color: var(--purple); }

.panel h2 {
    margin-top: .25em;
    font-family: var(--serif); font-weight: 700;
    font-size: min(3.8vw, 7.5vh);
    line-height: 1.05; letter-spacing: -0.02em;
    color: var(--navy);
}
.panel__text { margin-top: .5em; font-size: min(1.15vw, 1.9vh); line-height: 1.55; }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35em; margin-top: min(.9vw, 1.5vh); }
.chips li {
    padding: .25em .85em; border-radius: 999px; background: #fff; color: var(--navy);
    font-size: min(.82vw, 1.4vh); font-weight: 500;
}

/* ---------- Button ---------- */
.cta {
    position: relative;
    margin-top: min(1.2vw, 2vh);

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 58px;

    padding: 0 20px;

    border: none;
    border-radius: 16px;

    color: #fff;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .2s ease,
        background-color .2s ease;
}

.cta::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* whole card is clickable */
.cta:focus-visible { outline: none; }
.card:has(.cta:focus-visible) .card__photo { outline: 3px solid var(--navy); outline-offset: -3px; }
.cta__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    background: transparent;
    border-radius: 0;

    font-size: 25px;
    line-height: 1;

    transition: transform .2s ease;
}

/* Preschool */
.card--preschool .cta {
    background: var(--pink);
}

.card:hover .cta__arrow { transform: translateX(5px); }
.card--preschool .cta { background: var(--pink); }
.card--preschool:hover .cta {
    background: var(--pink-dark);
}

.card--academy .cta {
    background: var(--purple);
}
.card--academy:hover .cta {
    background: var(--purple-dark);
}

/* ---------- Small screens: stack (page scrolls only here) ---------- */
@media (max-width: 900px), (max-height: 480px) {
    html, body { height: auto; }
    .page { height: auto; overflow: visible; padding: 1.25rem 1rem 2rem; }
    .intro, .cards { position: static; width: auto; }
    .intro { pointer-events: auto; }
    .intro__logo { width: 84px; }
    .intro__copy { padding: 1.5rem 0 2rem; }
    .eyebrow { font-size: .72rem; }
    .intro h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .intro__text { max-width: 40ch; font-size: 1rem; }
    .spark--bottom, .spark--inline { display: none; }
    .cards { display: grid; gap: 1.25rem; max-width: 460px; margin: 0 auto; }
    .card { height: 560px; }
    .card--academy { margin-left: 0; }
    .card--preschool .card__photo, .card--academy .card__photo { clip-path: none; }
    .card--preschool .panel, .card--academy .panel { left: 10px; right: 10px; bottom: 10px; padding: 1rem 1.1rem; }
    .panel__label { font-size: .68rem; }
    .panel h2 { font-size: 2.3rem; }
    .panel__text { font-size: .9rem; }
    .chips li { font-size: .75rem; }
    .cta { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }