/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-gb4htd6j0l] {
    background-color: var(--color-pumpkin);
    background-image: url('/images/bg-noise.png');
    background-size: 355px 246px;
    color: var(--color-brown);
    padding-top: 20px;
    padding-bottom: 14px;
}

.site-footer__inner[b-gb4htd6j0l] {
    display: grid;
    grid-template-columns: 1.3fr auto 1.1fr;
    gap: 40px;
    align-items: start;
}

/* --- Brand + summary --- */
.site-footer__name[b-gb4htd6j0l] {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 0.86;
    text-transform: uppercase;
}

.summary[b-gb4htd6j0l] {
    margin-top: 16px;
    border: 2px solid var(--color-brown);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 320px;
    display: grid;
    gap: 4px;
}

.summary__title[b-gb4htd6j0l] {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.summary a[b-gb4htd6j0l] {
    font-size: 14px;
    font-weight: 600;
}

.summary a[b-gb4htd6j0l]::before {
    content: "> ";
}

/* --- Social 2x2 --- */
.site-footer__social[b-gb4htd6j0l] {
    display: grid;
    grid-template-columns: repeat(2, 44px);
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
}

.site-footer__social a[b-gb4htd6j0l] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-pumpkin);
}

/* --- Newsletter --- */
.newsletter[b-gb4htd6j0l] {
    position: relative;
    max-width: 360px;
    /* outer TV bezel — raised plastic look (light top-left, shadow bottom-right) */
    background: var(--color-brown);
    padding: 8px;
    border: 2px solid #000;
    border-radius: 24px;
    box-shadow:
        4px 4px 6px rgba(0, 0, 0, 0.25),
        inset 2px 2px 1px rgba(255, 255, 255, 0.4),
        inset -2px -2px 1px rgba(0, 0, 0, 0.45);
}

/* inner "screen": recessed (groove), grainy, dark vignette. Flex column so the
   email row sits near the bottom with breathing room above (like the maquette). */
.newsletter__screen[b-gb4htd6j0l] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    color: var(--color-cream);
    background-color: var(--color-brown);
    background-image: url('/images/dark-noise.svg');
    background-size: 300px 300px;
    border: 1px solid #000;
    border-radius: 16px;
    padding: 16px 20px 20px;
    box-shadow:
        -1px -1px 1px rgba(0, 0, 0, 0.4),
        1px 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 0 18px rgba(0, 0, 0, 0.6);
}

/* little bezel "screws" in two corners, like the Figma TV */
.newsletter__screen[b-gb4htd6j0l]::before,
.newsletter__screen[b-gb4htd6j0l]::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(245, 241, 230, 0.45);
    box-shadow: 7px 0 0 rgba(245, 241, 230, 0.45);
    pointer-events: none;
}

.newsletter__screen[b-gb4htd6j0l]::before { top: 6px; left: 16px; }
.newsletter__screen[b-gb4htd6j0l]::after { right: 30px; bottom: 6px; }

.newsletter__title[b-gb4htd6j0l] {
    color: var(--color-pumpkin);
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.newsletter__body[b-gb4htd6j0l] {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
}

/* email + OK as two separate outlined pills (Figma "Button Secondary"),
   pushed to the bottom of the screen */
.newsletter__row[b-gb4htd6j0l] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: auto;
}

.newsletter__row input[b-gb4htd6j0l] {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(245, 241, 230, 0.5);
    border-radius: 4px;
    background: transparent;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 8px 12px;
    outline: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.newsletter__row input[b-gb4htd6j0l]::placeholder {
    color: rgba(245, 241, 230, 0.4);
}

.newsletter__ok[b-gb4htd6j0l] {
    border: 1px solid var(--color-pumpkin);
    border-radius: 4px;
    background: transparent;
    color: var(--color-pumpkin);
    font-family: var(--font-body);
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.newsletter__ok:hover[b-gb4htd6j0l] {
    background: rgba(253, 190, 49, 0.12);
}

/* --- Copyright --- */
.site-footer__copy[b-gb4htd6j0l] {
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .site-footer__inner[b-gb4htd6j0l] {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-inline: 24px;
    }
    /* stacked footer: let the newsletter use the full column width */
    .newsletter[b-gb4htd6j0l] { max-width: 100%; }
}
/* /Components/Layout/Header.razor.rz.scp.css */
.site-header[b-epshjh0mwb] {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-tan);
    background-image: url('/images/bg-noise.png');
    background-size: 355px 246px;
}

/* full-width yellow top strip (16px), as in the Figma header shape */
.site-header[b-epshjh0mwb]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: var(--color-pumpkin);
    z-index: 1;
}

/* The logo lives inside a yellow banner that hugs its content width and
   ends in a diagonal edge — so it adapts to the title (EN/FR have
   different lengths). It bleeds to the very left edge of the header. */
.brand[b-epshjh0mwb] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    /* Yellow bleeds to the viewport's left edge, but the logo keeps the
       page's content margin (aligned like the rest of the page). */
    padding-block: 0;
    padding-right: 26px;
    padding-left: max(40px, calc((100vw - var(--page-max)) / 2 + 40px));
    background: var(--color-pumpkin);
    color: var(--color-brown);
    line-height: 0.86;
    z-index: 2;
}

/* Exact Figma trailing edge: a straight ~45° diagonal whose corners are
   rounded, transitioning the full-height banner down to the 16px top strip.
   Coordinates taken from the provided Union.svg (height 96). */
.brand[b-epshjh0mwb]::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 114px;
    height: 100%;
    background: var(--color-pumpkin);
    clip-path: path('M0,0 L114,0 L114,16 C102.96,16 92.786,20.2143 85.284,27.7157 L28.716,84.2843 C21.214,91.7857 11.04,96 0.431,96 L0,96 Z');
}

.brand__name[b-epshjh0mwb] {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 25px;
}

.brand__tagline[b-epshjh0mwb] {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.02em;
    margin-top: 5px;
    color: var(--color-brown);
}

.site-header__inner[b-epshjh0mwb] {
    height: 96px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-nav[b-epshjh0mwb] {
    display: flex;
    gap: 40px;
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 19px;
    letter-spacing: 0.02em;
}

.site-nav a[b-epshjh0mwb] {
    color: var(--color-brown);
}

.site-nav a.is-active[b-epshjh0mwb]::before {
    content: "> ";
}

.site-nav a.is-active[b-epshjh0mwb]::after {
    content: " <";
}

.site-header__actions[b-epshjh0mwb] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.lang-switch[b-epshjh0mwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: rgba(88, 82, 70, 0.55);
}

.lang-switch .is-active[b-epshjh0mwb] {
    color: var(--color-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-header__actions .btn[b-epshjh0mwb] {
    font-size: 16px;
    padding: 9px 22px;
}

/* ---- Mobile header ---- */
@media (max-width: 640px) {
    /* tighten the header padding (overrides the desktop .container 40px) */
    .site-header__inner[b-epshjh0mwb] { gap: 8px; padding-inline: 16px; }
    .brand__tagline[b-epshjh0mwb] { display: none; }
    .brand__name[b-epshjh0mwb] { font-size: 17px; }
    .brand[b-epshjh0mwb] { padding-left: 16px; padding-right: 14px; }
    /* drop the wide diagonal banner edge on small screens */
    .brand[b-epshjh0mwb]::after { display: none; }
    /* nav links + language toggle collapse on mobile (kept in the footer) */
    .site-nav[b-epshjh0mwb] { display: none; }
    .lang-switch[b-epshjh0mwb] { display: none; }
    /* the nav carried margin-left:auto; with it hidden, push the CTA right */
    .site-header__actions[b-epshjh0mwb] { margin-left: auto; }
    .site-header__actions .btn[b-epshjh0mwb] { font-size: 12px; padding: 7px 12px; letter-spacing: 0.01em; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-levmnslpus] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-levmnslpus] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/About.razor.rz.scp.css */
.about[b-iytquh65wa] {
    position: relative;
    background-color: var(--color-tan);
    background-image: url('/images/bg-noise.png');
    background-size: 355px 246px;
    overflow: hidden;
    min-height: 62vh;
}

/* faint mascot filigrane, like the hero */
.about__mascot[b-iytquh65wa] {
    position: absolute;
    top: 32px;
    right: 6%;
    width: 460px;
    max-width: none;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.about__inner[b-iytquh65wa] {
    position: relative;
    z-index: 1;
    padding-block: 80px 96px;
    max-width: 760px;
}

.about__title[b-iytquh65wa] {
    font-size: 96px;
    color: var(--color-brown);
}

.about__lead[b-iytquh65wa] {
    font-size: 22px;
    font-weight: 600;
    margin: 24px 0 16px;
    max-width: 40ch;
}

.about__body[b-iytquh65wa] {
    font-size: 16px;
    max-width: 52ch;
    color: var(--color-brown);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* shared post-it note */
.postit[b-q6pg9uevgo] {
    display: block;
    width: 132px;
    background: #f6d873;
    color: #6a5526;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.25;
    padding: 10px 12px;
    box-shadow: 3px 6px 14px rgba(0, 0, 0, 0.3);
    rotate: -4deg;
}

/* pink CTA (Thaumiel) */
.btn--pink[b-q6pg9uevgo] {
    background:
        linear-gradient(135deg, #9e3566, #e0609a) padding-box,
        linear-gradient(135deg, #e0609a, #9e3566) border-box;
    color: #fff;
}

/* ===================== HERO ===================== */
.hero[b-q6pg9uevgo] {
    position: relative;
    background-color: var(--color-tan);
    /* Figma noise/grain texture tiled over the cream */
    background-image: url('/images/bg-noise.png');
    background-size: 355px 246px;
    color: var(--color-brown);
    overflow: hidden;
}

.hero__dark[b-q6pg9uevgo] {
    position: absolute;
    /* Same dark fill + grain as the showcase (#585246 + dark-noise) so the hero
       dark and the showcase read as ONE continuous tone (no seam / two-tone).
       The rounded-diagonal SHAPE comes from an SVG mask (the Figma BG
       silhouette); its viewBox bakes in the bleed so the rounded top-right
       corner runs off-canvas (no truncation). */
    top: -8%;
    left: 0;
    width: 100%;
    height: 160%;
    background-color: #585246;
    background-image: url('/images/dark-noise.svg');
    background-size: 300px 300px;
    -webkit-mask: url('/images/hero-mask.svg') no-repeat;
    -webkit-mask-size: 100% 100%;
    mask: url('/images/hero-mask.svg') no-repeat;
    mask-size: 100% 100%;
    /* above the mascot filigrane, below the content */
    z-index: 1;
}

/* Mascot line-art filigrane (Figma node 28:813), centered behind the hero.
   multiply blends the black line-art into the cream as a warm watermark and
   makes it vanish over the dark shape where it shouldn't show. */
.hero__pumpkin[b-q6pg9uevgo] {
    position: absolute;
    top: 24px;
    left: 50%;
    translate: -50% 0;
    width: 660px;
    max-width: none;
    opacity: 0.3;
    mix-blend-mode: multiply;
    /* BEHIND the dark shape: shows as a warm watermark on the cream and is
       cleanly hidden where the dark shape covers it (no multiply ghost patch). */
    z-index: 0;
    pointer-events: none;
}

.hero__inner[b-q6pg9uevgo] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    /* top-aligned (not centered) so the title sits high like the maquette,
       with no large empty band above/below the text */
    align-items: start;
    padding-block: 88px 24px;
}

.hero__title[b-q6pg9uevgo] {
    font-size: 96px;
    color: var(--color-brown);
}

.hero__body[b-q6pg9uevgo] {
    max-width: 40ch;
    margin: 24px 0 32px;
    font-size: 15px;
}

.hero__visual[b-q6pg9uevgo] {
    display: flex;
    justify-content: center;
}

.hero__visual img[b-q6pg9uevgo] {
    width: 300px;
    height: auto;
    border-radius: 32px;
    box-shadow: 0 26px 46px rgba(0, 0, 0, 0.5);
}

/* ===================== SHOWCASE ===================== */
.showcase[b-q6pg9uevgo] {
    position: relative;
    background-color: #585246;
    background-image: url('/images/dark-noise.svg');
    background-size: 300px 300px;
    padding-block: 20px 56px;
    overflow: hidden;
}

.showcase__inner[b-q6pg9uevgo] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 32px;
    align-items: center;
}

.showcase__gallery[b-q6pg9uevgo] {
    position: relative;
    height: 512px;
}

.showcase__gallery .shot[b-q6pg9uevgo] {
    position: absolute;
    bottom: 20px;
    width: auto;
    /* cream "polaroid" frame around each game screenshot, as in the maquette */
    border: 9px solid var(--color-cream);
    border-radius: 6px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}

.shot--a[b-q6pg9uevgo] {
    height: 432px;
    left: 30px;
    rotate: -9deg;
    z-index: 2;
}

.shot--c[b-q6pg9uevgo] {
    height: 452px;
    left: 224px;
    rotate: 1deg;
    z-index: 3;
}

.shot--b[b-q6pg9uevgo] {
    height: 426px;
    left: 430px;
    rotate: 9deg;
    z-index: 1;
}

.showcase__gallery .mascot[b-q6pg9uevgo] {
    position: absolute;
    bottom: -6px;
    left: -10px;
    width: 150px;
    height: auto;
    z-index: 4;
}

.postit--a[b-q6pg9uevgo] {
    position: absolute;
    top: 250px;
    left: 0;
    z-index: 5;
    rotate: -6deg;
}

.postit--b[b-q6pg9uevgo] {
    position: absolute;
    bottom: 30px;
    left: 470px;
    z-index: 5;
    rotate: 5deg;
}

.showcase__aside[b-q6pg9uevgo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-left: 10px;
}

.showcase__aside .game-logo[b-q6pg9uevgo] {
    width: 340px;
    height: auto;
}

.showcase__aside .stores[b-q6pg9uevgo] {
    width: 200px;
    height: auto;
}

/* blue + coral divider strips at the bottom of the showcase */
.showcase__strips[b-q6pg9uevgo] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    /* two straight horizontal bars (blue 64 + coral 32), as in the maquette */
    background: linear-gradient(to bottom,
        var(--color-blue) 0 66.6%,
        var(--color-coral) 66.6% 100%);
    z-index: 1;
}

/* ===================== THAUMIEL ===================== */
.thaumiel[b-q6pg9uevgo] {
    position: relative;
    /* tan base + cream dot grain — shows through the dark shape's bottom-right notch */
    background-color: var(--color-tan);
    background-image: url('/images/bg-noise.png');
    background-size: 355px 246px;
    color: var(--color-cream);
    overflow: hidden;
    padding-block: 72px 80px;
}

/* tan wedge in the bottom-right behind the second paragraph */
.thaumiel[b-q6pg9uevgo]::after {
    content: "";
    position: absolute;
    /* Same dark fill + grain as the hero/showcase (#585246 + dark-noise),
       masked to the Figma shape (rotated 180° → dark upper-left, clean rounded
       diagonal, cream notch bottom-right). Keeps the whole site's dark uniform. */
    bottom: -5%;
    right: -34%;
    width: 160%;
    aspect-ratio: 1781 / 940;
    background-color: #585246;
    background-image: url('/images/dark-noise.svg');
    background-size: 300px 300px;
    -webkit-mask: url('/images/thaumiel-mask.svg') no-repeat;
    -webkit-mask-size: 100% 100%;
    mask: url('/images/thaumiel-mask.svg') no-repeat;
    mask-size: 100% 100%;
    transform: rotate(180deg);
    /* above the character filigrane, below the content */
    z-index: 1;
}

/* Faint character line-art filigrane (Figma node 28:917), over the tan wedge */
.thaumiel__character[b-q6pg9uevgo] {
    position: absolute;
    right: -40px;
    bottom: 0;
    width: 560px;
    max-width: none;
    height: auto;
    opacity: 0.18;
    /* behind the dark shape: shows only on the cream notch, hidden on the dark */
    z-index: 0;
    pointer-events: none;
}

.thaumiel__top[b-q6pg9uevgo],
.thaumiel__bottom[b-q6pg9uevgo] {
    position: relative;
    z-index: 2;
}

.thaumiel__top[b-q6pg9uevgo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.thaumiel__title[b-q6pg9uevgo] {
    font-size: 96px;
    color: var(--color-cream);
}

.thaumiel__body[b-q6pg9uevgo] {
    max-width: 40ch;
    margin: 24px 0 32px;
    color: #ded6c6;
}

.thaumiel__cards[b-q6pg9uevgo] {
    position: relative;
    min-height: 440px;
}

.thaumiel__cards .card[b-q6pg9uevgo] {
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45);
}

.card--front[b-q6pg9uevgo] {
    width: 330px;
    height: auto;
    rotate: 5deg;
    translate: -34% 0;
    z-index: 2;
}

.card--back[b-q6pg9uevgo] {
    width: 312px;
    height: auto;
    rotate: -9deg;
    translate: -74% 16px;
    z-index: 1;
}

.postit--c[b-q6pg9uevgo] {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 3;
    rotate: 6deg;
}

.thaumiel__bottom[b-q6pg9uevgo] {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.thaumiel__scenes[b-q6pg9uevgo] {
    position: relative;
    min-height: 300px;
}

.thaumiel__scenes .scene-card[b-q6pg9uevgo] {
    position: absolute;
    width: 330px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}

.scene-card--back[b-q6pg9uevgo] {
    top: 24px;
    left: 0;
    rotate: 5deg;
    z-index: 2;
}

.scene-card--front[b-q6pg9uevgo] {
    top: 56px;
    left: 64px;
    rotate: -3deg;
    z-index: 3;
}

.thaumiel__body2[b-q6pg9uevgo] {
    color: var(--color-brown);
    max-width: 44ch;
    margin-left: auto;
    font-size: 15px;
}

/* ===================== RESPONSIVE ===================== */
/* Tablet & below: stack the two-column layouts. The desktop diagonals don't
   translate to narrow screens, so the dark areas become simpler panels. */
@media (max-width: 1024px) {
    .container[b-q6pg9uevgo] { padding-inline: 28px; }

    .hero__inner[b-q6pg9uevgo],
    .thaumiel__top[b-q6pg9uevgo],
    .thaumiel__bottom[b-q6pg9uevgo],
    .showcase__inner[b-q6pg9uevgo] {
        grid-template-columns: 1fr;
    }

    /* HERO */
    .hero__inner[b-q6pg9uevgo] { gap: 28px; padding-block: 80px 56px; }
    .hero__title[b-q6pg9uevgo] { font-size: clamp(54px, 9vw, 84px); }
    .hero__visual[b-q6pg9uevgo] { justify-content: center; }
    .hero__pumpkin[b-q6pg9uevgo] { width: 60%; max-width: 440px; top: 60px; }
    /* diagonal → rounded dark panel behind the phone, at the bottom of the hero */
    .hero__dark[b-q6pg9uevgo] {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 56%;
        background-color: #585246;
        background-image: url('/images/dark-noise.svg');
        background-size: 300px 300px;
        border-radius: 90px 0 0 0;
    }

    /* SHOWCASE */
    .showcase__inner[b-q6pg9uevgo] { gap: 8px; }
    .showcase__gallery[b-q6pg9uevgo] { height: 460px; }
    .showcase__aside[b-q6pg9uevgo] { align-items: center; padding-left: 0; }

    /* THAUMIEL → solid dark on stacked layouts (drop the diagonal wedge) */
    .thaumiel[b-q6pg9uevgo] {
        background-color: #585246;
        background-image: url('/images/dark-noise.svg');
        background-size: 300px 300px;
    }
    .thaumiel[b-q6pg9uevgo]::after { display: none; }
    .thaumiel__title[b-q6pg9uevgo] { font-size: clamp(54px, 9vw, 84px); }
    .thaumiel__body2[b-q6pg9uevgo] { margin-left: 0; color: var(--color-cream); }
    .thaumiel__character[b-q6pg9uevgo] { opacity: 0.12; }
}

/* Mobile: scale the absolute compositions to fit (keeps the overlapped look) */
@media (max-width: 640px) {
    .hero__title[b-q6pg9uevgo] { font-size: clamp(42px, 12vw, 60px); }
    .hero__visual img[b-q6pg9uevgo] { width: 240px; }
    .hero__dark[b-q6pg9uevgo] { height: 52%; border-radius: 60px 0 0 0; }

    .showcase__gallery[b-q6pg9uevgo] {
        transform: scale(0.58);
        transform-origin: top center;
        height: 300px;
    }
    .thaumiel__title[b-q6pg9uevgo] { font-size: clamp(40px, 13vw, 56px); }
    .thaumiel__cards[b-q6pg9uevgo] {
        transform: scale(0.66);
        transform-origin: top center;
        min-height: 300px;
    }
    .thaumiel__scenes[b-q6pg9uevgo] {
        transform: scale(0.6);
        transform-origin: top center;
        min-height: 200px;
    }
}