:root{
    --background: linear-gradient(180deg, #cceffc 0%, #ddf4fc 30%, #ffffff 58%);
    --logo:  transparent;
    --logo-height: 3rem;
    /*Set logo width as auto if .logo is <img>*/
    /*Strictly define logo width if .logo is <div>*/
    --logo-width: auto;
    --logo-margin:  7rem auto 0;
    --packshot: transparent;
    /*Set packshot height and width as auto if .packshot is <img>*/
    /*Strictly define packshot height and width if .packshot is <div>*/
    --packshot-height: auto;
    --packshot-width: auto;
    --packshot-margin: 12rem auto 0;
    --iframe-margin: 20vh auto 0;
    --iframe-color: none;
}
body {
    background: var(--background);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* ===== Background scene recreated from design.svg =====
   Everything scales proportionally with the viewport width (vw units),
   except the meadow ground "pills" (.pill) whose height is capped so they
   stretch horizontally while their semicircular caps stay round. */
.scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.scene > * {
    position: absolute;
}
.scene .sun {
    background: #FFD874;
    border-radius: 50%;
}
.scene .cloud {
    background: #ffffff;
    border-radius: 9999px;
}
.scene .cloud.round {
    border-radius: 50%;
}
.scene .bee,
.scene .baby {
    height: auto;
}
/* the stretchable pills: width scales with the viewport. Height matches the
   2.383vw vertical step used by the bottom offsets so the bars stack flush
   against each other at every viewport width. border-radius keeps the
   semicircle ends round at any height. */
.scene .pill {
    height: 2.383vw;
    border-radius: 9999px;
}
.scene .pill.blue  { background: #b0e6fa; }
.scene .pill.green { background: #8fd358; }
.scene .stem {
    background: #C4E89D;
    border-radius: 9999px;
}
.scene .foliage {
    background: #39A935;
}
.scene .foliage.round {
    border-radius: 50%;
}
.scene .acc-pill { border-radius: 9999px; }
.scene .acc-dot  { border-radius: 50%; }
.scene .ltgreen  { background: #C4E89D; }
.scene .ltblue   { background: #d1f0fc; }
/* ===== Language switcher =====
   Pinned top-right, centred under the baby image. Fixed so it stays put
   while the page scrolls, just like the background scene. The baby image is
   20.058vw wide / ~24.4vw tall (anchored right:0 top:0), so we sit just below
   it and centre on its horizontal middle (10vw from the right edge). */
.lang-switch {
    position: fixed;
    top: 25vw;
    right: 0;
    transform: none;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.lang-switch .lang-opt {
    border: none;
    background: transparent;
    color: #5a6b7b;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 3rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lang-switch .lang-opt:hover {
    color: #39A935;
}
.lang-switch .lang-opt.active {
    background: #8fd358;
    color: #ffffff;
}
.lang-switch .lang-opt.active:hover {
    color: #ffffff;
}

body .container-fluid .for-a-other-link {
    margin-top: 4rem;
}
body .container-fluid .content {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    overflow: hidden;
}
body .container-fluid .logo-container {
    margin: var(--logo-margin);
}

body .container-fluid .logo-container .logo{
    background: var(--logo);
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--logo-height);
    width: var(--logo-width);
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    margin: 0;
    z-index: 0;
}

body .container-fluid .packshot-container {
    margin: var(--packshot-margin);
    display: flex;
    justify-content: center;
    align-items: center;
}
body .container-fluid .packshot-container .packshot {
    background: var(--packshot);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 800px;
    max-height: 80vh;
    height: var(--packshot-height);
    width: var(--packshot-width);
}
body .container-fluid .for-a-other-link a {
    color: #000000;
    font-size: 80%;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

body .container-fluid .container-iframe {
    background-color: var(--iframe-color);
    margin: var(--iframe-margin);
    border-radius: 10px;
    transform: translateX(-6vw);
}

@media (max-width: 1650px) {
body .container-fluid .packshot-container .packshot {
    width: 41vw;
}
}

@media (max-width: 1080px) {
    body {
        background: var(--background);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    body .container-fluid .container-iframe {
        margin-top: 0;
        padding-top: 0;
        width: 95%;
        float: none;
    
    }

    body .container-fluid .packshot-container {
        width: 100%;
        text-align: center;
        margin: auto;
    }

    body .container-fluid .packshot-container .packshot {
        background-size: cover;
        max-width: 80vw;
        height: auto;
        width: auto;
        position: static;
        margin: auto;
        margin-top: 3rem;
    }
    body .container-fluid .content {
        max-width: 100%;
    }

    body .container-fluid .container-iframe {
        padding-right: inherit;
        padding-left: inherit;
        transform: none;
    }

    /* keep the switcher flush to the right edge, just under the baby */
    .lang-switch {
        top: 24vw;
        right: 0;
        gap: 0.2rem;
        padding: 0.4rem;
    }
    .lang-switch .lang-opt {
        font-size: 1rem;
        padding: 0.55rem 0.85rem;
        min-width: 2.6rem;
    }
}