:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* Product card (Home's "Produk Unggulan" and the /produk catalog) */
.product {
    display: flex;
    flex-direction: column;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
}

/* Product image area: square canvas, photo shown whole */
.product__canvas {
    position: relative;
    aspect-ratio: 1;
    border-bottom: var(--border-thick);
    background: var(--gray-100);
}
.product__canvas  > img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }

.product__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(-45deg, transparent 0 18px, var(--gray-300) 18px 20px),
        var(--hornet-white);
}

.product__photo--placeholder img {
        width: 62%;
        height: auto;
    }

/* Code sticker */
.product__sticker {
    position: absolute;
    left: -10px;
    top: 24px;
    padding: 8px 16px;
    background: var(--hornet-yellow);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}
@media (min-width: 769px) {
.product__sticker {
        left: -18px;
        font-size: 28px;
}
    }

/* The color in the photo, as on the detail page: a swatch and its name */
.product__color-chip {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--hornet-white);
    border: var(--border);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    text-transform: uppercase;
}
.product__color-chip::before {
        content: "";
        width: 18px;
        height: 18px;
        background: var(--swatch);
        border: 2px solid var(--hornet-ink);
    }
@media (min-width: 769px) {
.product__color-chip {
        font-size: var(--fs-md);
}
    }

.product__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 24px;
    /* The name is sized and the power meters stack their labels by the card's width */
    container: product-card / inline-size;
}

@media (min-width: 481px) {

.product__body {
        padding: 32px 28px 28px;
}
    }

.product__tag {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 4px 12px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.product__name {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(28px, 3vw, 44px);
    /* Sized from the card, so the longer half of a long name (about 6.7em: "Hörnet Racing",
       "Thinner PU 900") always fits one line and the name never runs to three; the longest
       single word in the catalog ("(Nitrocellulose)", --name-chars from index.tsx, about
       0.46em per letter) is kept within 90% of the card so it never touches the frame, the
       same size on every card */
    font-size: min(44px, 14cqi, calc(90cqi / (var(--name-chars, 1) * 0.46)));
    line-height: 1;
    /* A long name ("Hörnet Racing Clear 4:1", "Hörnet Thinner PU 900") always on two even
       lines, even in a wide card; a short one still takes the room of two, so the
       descriptions of cards in a row start at the same height */
    max-width: 8em;
    min-height: 2em;
    text-wrap: balance;
    text-transform: uppercase;
}

/* Names laid out as a group (Produk Unggulan, useNameFit in index.tsx sets the attributes on
   the group): full card width and no balancing, so the first line takes as much as fits */
[data-name-lines] .product__name--fit {
    max-width: none;
    text-wrap: wrap;
}

[data-name-lines="measure"] .product__name--fit {
    white-space: nowrap;
}

/* Every name fits one line: no room kept for a second */
[data-name-lines="1"] .product__name--fit {
    min-height: 0;
}

/* Some name needs two lines: a name that would fit one moves just its last word down */
[data-name-lines="2"] .product__name--fit[data-fits="1"] .product__name-last {
    display: block;
}

.product__text {
    margin: 0 0 24px;
    font-size: var(--fs-base);
    line-height: 1.6;
    /* Always shown in full, never cut with "…" (it is the product's pitch); a shorter text
       still keeps the room of three lines, and the meters below are pushed to the bottom, so
       they line up across a row whatever the length */
    min-height: 4.8em;
}

@media (min-width: 769px) {

.product__text {
        font-size: var(--fs-md);
}
    }

/* Power meters: label + five skewed cells, filled up to the level */
.product__powers {
    display: grid;
    gap: 12px;
    /* Pushed to the bottom with the button below it, so cards side by side line up
       whatever the length of their description */
    margin: auto 0 28px;
    padding: 16px 0 0;
    border-top: 2px solid var(--hornet-ink);
    list-style: none;
}

.power {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.power__label {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Browsers without container queries: break a long word rather than run into the meter */
    overflow-wrap: anywhere;
}

@media (min-width: 481px) {

.power__label {
        font-size: var(--fs-base);
}
    }

/* Narrow card (phones, three columns): the label on its own line above the meter, so a
   long one ("Kompatibilitas") never wraps or runs into the cells */
@container product-card (max-width: 380px) {
    .product__powers {
        gap: 14px;
    }

    .power {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

.power__meter {
    display: flex;
    gap: 6px;
}

.power__cell {
    width: 22px;
    height: 16px;
    background: var(--hornet-white);
    border: 2px solid var(--hornet-ink);
    transform: skewX(var(--skew));
}

@media (min-width: 481px) {

.power__cell {
        width: 28px;
        height: 18px;
}
    }

.power__cell--on {
    background: var(--hornet-yellow);
}

/* Pinned to the bottom so the buttons of cards in a row line up */
.product__action {
    align-self: flex-start;
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* :where() keeps the specificity at zero, so a page placing it always wins */
:where(.sprayer) {
    display: block;
    position: relative;
    width: 100%;
    /* 1 facing right, -1 facing left (--flip): the direction of the kick and the spray */
    --dir: 1;
}

.sprayer--flip {
    --dir: -1;
}

.sprayer__body {
    display: block;
    transform-origin: 40% 70%;
    animation: sprayer-kick 2.4s ease-in-out infinite;
    /* Die-cut sticker like the mascot (on the body, not the art, so a flipped
       art keeps its shadow at the bottom right): stacked hard white shadows, then the ink drop */
    filter:
        drop-shadow(3px 0 0 var(--hornet-white))
        drop-shadow(-3px 0 0 var(--hornet-white))
        drop-shadow(0 3px 0 var(--hornet-white))
        drop-shadow(0 -3px 0 var(--hornet-white))
        drop-shadow(6px 6px 0 var(--hornet-ink));
}

.sprayer__art {
    display: block;
    width: 100%;
    height: auto;
}

.sprayer--flip .sprayer__art {
    transform: scaleX(-1);
}

/* The spray starts at the nozzle: the gun's front end, right edge of the art at ~70% of
   its height (mirrored with --flip). No outline or shadow on the paint, on purpose; white
   and orange so it shows on the yellow pages as well as the dark ones */
.sprayer__streak,
.sprayer__drop {
    position: absolute;
    left: 96%;
    top: 67%;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.sprayer--flip .sprayer__streak,
.sprayer--flip .sprayer__drop {
    left: 4%;
}

/* Streaks shooting out of the nozzle, stretching as they go */
.sprayer__streak {
    width: var(--length);
    padding-top: 1.6%;
    margin-top: -0.8%;
    border-radius: 999px;
    transform-origin: 0 50%;
    animation: sprayer-streak 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

/* Droplets flung over the cone; size, direction and delay per drop come from the component */
.sprayer__drop {
    width: var(--size);
    padding-top: var(--size);
    margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    border-radius: 50%;
    animation: sprayer-drop 2.4s cubic-bezier(0.15, 0.7, 0.35, 1) infinite;
}

.sprayer--flip .sprayer__drop {
    margin: calc(var(--size) / -2) calc(var(--size) / -2) 0 0;
}

.sprayer__paint--yellow {
    background: var(--hornet-yellow);
}

.sprayer__paint--white {
    background: var(--hornet-white);
}

.sprayer__paint--orange {
    background: var(--hornet-orange);
}

@keyframes sprayer-kick {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    6% {
        transform: translate(calc(-3.5% * var(--dir)), 0.5%) rotate(calc(-2.5deg * var(--dir)));
    }
    16% {
        transform: translate(0, 0) rotate(0deg);
    }
    55% {
        transform: translate(0, -2.5%) rotate(calc(0.5deg * var(--dir)));
    }
}

/* scaleX(--dir) first mirrors the whole streak around the nozzle for --flip */
@keyframes sprayer-streak {
    0% {
        opacity: 0;
        transform: scaleX(var(--dir)) rotate(var(--angle)) translateX(0) scaleX(0.2);
    }
    3% {
        opacity: 1;
    }
    18% {
        opacity: 1;
        transform: scaleX(var(--dir)) rotate(var(--angle)) translateX(var(--travel)) scaleX(1);
    }
    30% {
        opacity: 0;
        transform: scaleX(var(--dir)) rotate(var(--angle)) translateX(calc(var(--travel) * 1.4)) scaleX(0.6);
    }
    100% {
        opacity: 0;
        transform: scaleX(var(--dir)) rotate(var(--angle)) translateX(calc(var(--travel) * 1.4)) scaleX(0.6);
    }
}

@keyframes sprayer-drop {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }
    3% {
        opacity: 1;
    }
    28% {
        opacity: 1;
        transform: translate(calc(var(--dx) * var(--dir)), var(--dy)) scale(1);
    }
    44% {
        opacity: 0;
        transform: translate(calc(var(--dx) * var(--dir) * 1.12), calc(var(--dy) + 60%)) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--dx) * var(--dir) * 1.12), calc(var(--dy) + 60%)) scale(0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sprayer__body {
        animation: none;
    }

    .sprayer__streak,
    .sprayer__drop {
        display: none;
    }
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* Standalone under-construction page (no Shell): the default route on production deploys */

.construction {
    min-height: 100vh;
    min-height: 100dvh;
    /* 100dvh changes when the mobile URL bar shows/hides: ease the height (and anything
       centered in it) instead of jumping. Off with prefers-reduced-motion (global.css). */
    transition: min-height 0.35s ease-out;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.45), transparent 60%),
        var(--hornet-yellow);
    color: var(--hornet-ink);
}

/* Hazard-tape stripe, top and bottom, edged in ink */
.construction__stripe {
    height: 22px;
    flex-shrink: 0;
    border-top: var(--border-thick);
    border-bottom: var(--border-thick);
    background: repeating-linear-gradient(
        -45deg,
        var(--hornet-ink) 0 16px,
        var(--hornet-yellow) 16px 32px
    );
}

.construction__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 16px;
    text-align: center;
}

.construction__logo {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 16px;
    transform: rotate(-2deg);
    /* The logo is transparent outside its frame, so drop-shadow gives a hard ink
       backing that follows the skewed frame (no blur) */
    filter: drop-shadow(6px 6px 0 var(--hornet-ink));
}

@media (min-width: 769px) {

.construction__logo {
        max-width: 520px;
        filter: drop-shadow(10px 10px 0 var(--hornet-ink));
}
    }

.construction__eyebrow {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@media (min-width: 769px) {

.construction__eyebrow {
        font-size: var(--fs-base);
}
    }

.construction__title {
    max-width: 720px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: var(--fs-2xl);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

@media (min-width: 769px) {

.construction__title {
        font-size: var(--fs-4xl);
}
    }

.construction__message {
    max-width: 520px;
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
}

@media (min-width: 769px) {

.construction__message {
        font-size: var(--fs-md);
}
    }

/*
 * Skewed button like the logo frame: the inner span is skewed back so the text stays
 * upright. White plate with ink border and hard ink shadow, matching the logo; hover presses it in.
 */
.construction__link {
    margin-top: 16px;
    padding: 12px 28px;
    border: var(--border);
    background-color: var(--hornet-white);
    box-shadow: 6px 6px 0 var(--hornet-ink);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hornet-ink);
    text-decoration: none;
    transition: transform 0.08s, box-shadow 0.08s;
}
.construction__link  > span {
        display: inline-block;
        transform: skewX(calc(var(--skew) * -1));
    }
/* Only where hover exists: on touch screens :hover sticks after a tap */
@media (hover: hover) {
        .construction__link:hover {
            transform: skewX(var(--skew)) translate(3px, 3px);
            box-shadow: 3px 3px 0 var(--hornet-ink);
        }
    }
.construction__link:active {
        transform: skewX(var(--skew)) translate(6px, 6px);
        box-shadow: none;
    }
.construction__link:focus-visible {
        outline: 3px solid var(--hornet-ink);
        outline-offset: 5px;
    }

/* The hornet painter at work under the button, still painting the site. Shifted left a
   little so it and its paint puffs (out of the nozzle on the right) sit centered */
.construction__sprayer {
    width: 60%;
    max-width: 280px;
    margin-top: 24px;
    transform: translateX(-6%);
}
@media (min-width: 769px) {
.construction__sprayer {
        max-width: 340px;
}
    }

.construction__footer {
    padding: 16px;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* Wrapper of the two SVGs. :where() keeps its specificity at zero, so a page placing the
   mascot (position: absolute, display: none, ...) always wins */
:where(.mascot) {
    display: block;
    position: relative;
    width: 100%;
}

.mascot__art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    /* Die-cut sticker: white outline built from stacked hard shadows, then the ink drop */
    filter:
        drop-shadow(3px 0 0 var(--hornet-white))
        drop-shadow(-3px 0 0 var(--hornet-white))
        drop-shadow(0 3px 0 var(--hornet-white))
        drop-shadow(0 -3px 0 var(--hornet-white))
        drop-shadow(6px 6px 0 var(--hornet-ink));
}

/* Same box and viewBox as the body, behind it. Strokes are in the mascot's units (~0.15px
   each at 140px wide), scaling with it: ink line, white edge, hard ink shadow, thin enough
   that one line's shadow never reaches the next */
.mascot__lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
}

.mascot__line-shadow {
    stroke: var(--hornet-ink);
    stroke-width: 46px;
    transform: translate(22px, 22px);
}

.mascot__line-outline {
    stroke: var(--hornet-white);
    stroke-width: 46px;
}

.mascot__line-ink {
    stroke: var(--hornet-ink);
    stroke-width: 24px;
}

/* Hovering in place: a slow bob with a slight tilt */
.mascot__body {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascot-bob 2.4s ease-in-out infinite;
}

/* Wing beats around its root (bottom-right corner of the wing, where it meets the head) */
.mascot__wing {
    transform-box: fill-box;
    transform-origin: 100% 100%;
    animation: mascot-flap 0.14s ease-in-out infinite alternate;
}

/* Speed lines flicker one after another */
.mascot__line {
    animation: mascot-line 0.9s ease-out infinite;
}

.mascot__line:nth-child(2) {
    animation-delay: 0.15s;
}

.mascot__line:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes mascot-bob {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(-3deg);
    }
}

@keyframes mascot-flap {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(12deg);
    }
}

@keyframes mascot-line {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mascot__body,
    .mascot__wing,
    .mascot__line {
        animation: none;
    }
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* Covers the parent, above its content, never catching the mouse */
.cursor-word {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.cursor-word__group {
    position: absolute;
    inset: 0;
}

/* Placed and turned along the path by CursorWord, from its top-left corner */
.cursor-word__slot {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

/* Centered on its point on the path; keep the size in sync with FONT_SIZE */
.cursor-word__letter {
    position: absolute;
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: 56px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hornet-yellow);
    -webkit-text-stroke: 2px var(--hornet-ink);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: cursor-word-letter 1.8s ease-out both;
}

/* Lights up with a soft yellow glow, settles into a hard ink shadow, then fades */
@keyframes cursor-word-letter {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        text-shadow: 0 0 0 rgb(255 255 0 / 0);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
        text-shadow: 0 0 28px rgb(255 255 0 / 1), 0 0 8px rgb(249 170 82 / 0.9);
    }
    28% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
        text-shadow: 3px 3px 0 rgb(39 27 29 / 0.8);
    }
    70% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1);
        text-shadow: 3px 3px 0 rgb(39 27 29 / 0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 10px)) scale(0.95);
        text-shadow: 3px 3px 0 rgb(39 27 29 / 0);
    }
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* Placed by translate3d from MascotFollower; centered on its point */
.mascot-follower {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 48px;
    margin: -24px 0 0 -24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    will-change: transform;
}

.mascot-follower--shown {
    opacity: 1;
}

/* Faces right (the way the mascot is drawn) or left, turning with a quick squash */
.mascot-follower__flip {
    position: relative;
    transform: scaleX(var(--facing, 1));
    transition: transform 0.25s ease-out;
}

/* At this size the mascot's full die-cut outline (made for the bigger promo mascot)
   turns jagged: thinner one to match */
.mascot-follower .mascot__art {
    filter:
        drop-shadow(1.5px 0 0 var(--hornet-white))
        drop-shadow(-1.5px 0 0 var(--hornet-white))
        drop-shadow(0 1.5px 0 var(--hornet-white))
        drop-shadow(0 -1.5px 0 var(--hornet-white))
        drop-shadow(3px 3px 0 var(--hornet-ink));
}

/* Speed lines in the mascot's units (~0.05px each at 48px wide), so ~2px ink, ~1.2px
   white edge, ~2.5px shadow: thicker than the bigger mascots' to stay visible */
.mascot-follower .mascot__line-shadow {
    stroke-width: 84px;
    transform: translate(48px, 48px);
}

.mascot-follower .mascot__line-outline {
    stroke-width: 84px;
}

.mascot-follower .mascot__line-ink {
    stroke-width: 38px;
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/* City filter: skewed chips like the buttons; the active one is filled ink */
.partners__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
    margin-bottom: 32px;
}

.partners__chip {
    padding: 6px 16px;
    background: var(--hornet-white);
    border: var(--border);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--hornet-ink);
    transform: skewX(var(--skew));
    color: var(--hornet-ink);
    font: inherit;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}

.partners__chip  > span {
        display: inline-block;
        transform: skewX(calc(var(--skew) * -1));
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 800;
        font-size: var(--fs-base);
        text-transform: uppercase;
    }

@media (hover: hover) {
        .partners__chip:hover {
            transform: skewX(var(--skew)) translate(2px, 2px);
            box-shadow: 1px 1px 0 var(--hornet-ink);
        }
    }

.partners__chip:focus-visible {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 3px;
    }

.partners__chip--active {
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
    margin: 0;
    /* Room for the cards' hard shadow inside the container */
    padding: 0 8px 0 0;
    list-style: none;
}

/* Card: white, ink border; the city hangs off the top edge as a tag */
.partner {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    padding: 30px 20px 20px;
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-md);
}

.partner__city {
    position: absolute;
    top: -15px;
    left: 16px;
    padding: 4px 12px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.partner__name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    line-height: 1.1;
    text-transform: uppercase;
}

.partner__address {
    flex: 1;
    margin: 0 0 18px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--gray-700);
}

@media (min-width: 769px) {

.partner__address {
        font-size: var(--fs-base);
}
    }

.partner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 14px;
    border-top: 2px solid var(--hornet-ink);
}

.partner__link {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--hornet-ink);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--hornet-yellow);
    text-underline-offset: 4px;
}

.partner__link::after {
        content: " →";
    }

@media (hover: hover) {
        .partner__link:hover {
            background: var(--hornet-yellow);
        }
    }

.partners__more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/*
 * Customer reviews carousel. The track is a horizontal scroll-snap strip with one
 * full-width slide per review (swipeable on touch); the scrollbar is hidden and the
 * buttons/dots below drive it.
 */
.reviews {
    position: relative;
}

.reviews__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    transition: opacity 0.18s ease;
}

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

/* Multi-slide jump (see FADE_MS): out, jump, back in */
.reviews__track--fading {
    opacity: 0;
}

.review {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    /* Room for the quote chip, the paper stack above the card and its hard shadow
       (the track clips overflow) */
    padding: 40px 18px 18px 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    /* Keeps the paper stack (z-index: -1) behind the card but above the band */
    isolation: isolate;

    /* Stack of papers peeking out behind the card: more reviews underneath */
}

.review::before,.review::after {
        content: "";
        position: absolute;
        z-index: -1;
        border: var(--border);
    }

.review::before {
        inset: 0 0 40px 48px;
        background: var(--hornet-orange);
    }

.review::after {
        inset: 18px 8px 30px 24px;
        background: var(--hornet-white);
        background-image: radial-gradient(var(--gray-300) 1.5px, transparent 1.5px);
        background-size: 12px 12px;
    }

.review__card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px 20px 24px;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 481px) {

.review__card {
        padding: 52px 32px 32px;
}
    }

/* Photo beside the text only from --large: on small tablets (769..960px) the photo
       column was ~170px, a tiny photo next to a long, narrow text; they stack like phones */

@media (min-width: 961px) {

.review__card {
        display: grid;
        grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
        gap: 48px;
        padding: 56px 56px 40px;
}
    }

/* Poster-style stage (like the promo posters and the hero's can stage): ink with yellow
   halftone, a yellow wedge in two corners, white slashes; 4:3 above the text on phones and
   small tablets, the full card height beside it from --large */
.review__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        radial-gradient(circle, rgb(255 255 0 / 0.14) 1.6px, transparent 2px) 0 0 / 14px 14px,
        var(--hornet-ink);
    border: var(--border-thick);
}
.review__stage::before,.review__stage::after {
        content: "";
        position: absolute;
        width: 38%;
        height: 62%;
        background: var(--hornet-yellow);
        transform: skewX(var(--skew));
    }
.review__stage::before {
        top: 0;
        left: -22%;
    }
.review__stage::after {
        right: -22%;
        bottom: 0;
    }
@media (min-width: 961px) {
.review__stage {
        aspect-ratio: auto;
        min-height: 300px;
}
    }

.review__stage-slashes {
    position: absolute;
    top: 7%;
    right: 8%;
    width: 30%;
    height: 14px;
    background: repeating-linear-gradient(90deg, var(--hornet-white) 0 14%, transparent 14% 26%);
    transform: skewX(-35deg);
}

/* The photo pinned on the stage: thick white border, hard yellow shadow, a slight tilt */
.review__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 52%;
    max-width: 240px;
    aspect-ratio: 1;
    -o-object-fit: cover;
       object-fit: cover;
    background: var(--hornet-white);
    border: 6px solid var(--hornet-white);
    box-shadow: 10px 10px 0 var(--hornet-yellow);
    transform: rotate(-4deg);
}
@media (min-width: 961px) {
.review__photo {
        width: 72%;
}
    }

/* No photo yet: the initials on the same tile */
.review__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hornet-yellow);
    border-color: var(--hornet-white);
    box-shadow: 10px 10px 0 var(--hornet-white);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(48px, 9vw, 88px);
    line-height: 1;
}

/* Stars, the review and its author; fills the card (every slide is as tall as the
   tallest); the room a shorter review leaves goes to .review__space below it on phones,
   split above and below it (centered) from --medium */
.review__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Sized by the flex layout (the two split the leftover space evenly), so it can be a size
   container: the ornaments show only once it is tall enough to hold them. Browsers
   without container queries just leave the room empty. */
.review__space {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    container-type: size;
}

.review__deco {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@container (min-height: 72px) {
    .review__deco {
        display: flex;
    }
}

/* From --large the room above and below a shorter review stays plain (the review just
   centered beside the photo); the stickers and tape are for the stacked layout only */
@media (min-width: 961px) {
    .review__deco {
        display: none;
    }
}

/* The stickers' row: a strip of yellow/black hazard tape across the room, the stickers on
   a white plate in its middle */
.review__deco-row {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.review__deco-row::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 16px;
        background: repeating-linear-gradient(
            -45deg,
            var(--hornet-yellow) 0 9px,
            var(--hornet-ink) 9px 18px
        );
        border-block: 3px solid var(--hornet-ink);
        transform: translateY(-50%);
    }

/* Phones: the text sits right under the photo above it, so all the leftover room goes
   below it; from --medium (text beside the photo) it is split and the review centered */
.review__space--top {
    display: none;
}
@media (min-width: 961px) {
.review__space--top {
        display: block;
}
    }

/* The bottom room mirrors the stickers, so the two never look copied */
.review__space--bottom .review__deco-group {
    transform: scaleX(-1);
}

/* Stickers in a tight row on a white plate: thick ink outlines and hard shadows */
.review__deco-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    background: var(--hornet-white);
    border: 3px solid var(--hornet-ink);
    box-shadow: 4px 4px 0 var(--hornet-ink);
}

.review__shape {
    flex: none;
    width: 30px;
    height: 30px;
    fill: var(--hornet-yellow);
    stroke: var(--hornet-ink);
    stroke-width: 2.2;
    stroke-linejoin: round;
    filter: drop-shadow(2px 2px 0 var(--hornet-ink));
    animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

.review__shape--2 {
    width: 20px;
    height: 20px;
    fill: var(--hornet-orange);
    animation-delay: 0.8s;
}

.review__shape--3 {
    width: 24px;
    height: 24px;
    animation-delay: 1.6s;
}

/* Speed bars: three skewed bars getting shorter, like the stats heading */
.review__speed {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.review__speed span {
        display: block;
        height: 5px;
        background: var(--hornet-ink);
        transform: skewX(var(--skew));
    }
.review__speed span:nth-child(1) {
        width: 26px;
    }
.review__speed span:nth-child(2) {
        width: 18px;
        background: var(--hornet-orange);
    }
.review__speed span:nth-child(3) {
        width: 10px;
    }

.review__chip {
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--hornet-orange);
    border: 3px solid var(--hornet-ink);
    transform: skewX(var(--skew));
}

/* A phone's tall room below the review (200px or more) becomes a panel: ink-outlined
   halftone tile with a yellow hexagon badge holding a closing quote mark above the tape,
   sting scratch marks in the top corner and honeycomb cells peeking out of the bottom one.
   Smaller rooms keep just the tape; from --large (text beside the photo) no dressing at all. */
.review__scratch,
.review__cells,
.review__badge,
.review__bubble,
.review__mascot {
    display: none;
}

/* A review with a tagline never gets the tape and stickers: the tagline box, with the
   mascot under it when it fits (below) */
.review__deco.review__deco--hornet {
    display: none;
}

@media (max-width: 960px) {
    @container (min-height: 200px) {
        .review__space--bottom .review__deco {
            inset: 16px 6px 22px 0;
            gap: 18px;
            overflow: hidden;
            background-color: var(--hornet-white);
            background-image: radial-gradient(rgb(39 27 29 / 0.16) 1.4px, transparent 1.8px);
            background-size: 14px 14px;
            border: 3px solid var(--hornet-ink);
            box-shadow: 6px 6px 0 var(--hornet-ink);
        }

        .review__scratch {
            display: block;
            position: absolute;
            top: 14px;
            left: 14px;
            width: 44px;
            fill: var(--hornet-ink);
        }

        .review__cells {
            display: block;
            position: absolute;
            right: -14px;
            bottom: -16px;
            width: 96px;
            stroke: var(--hornet-ink);
            stroke-width: 2.4;
            stroke-linejoin: round;
        }

        .review__cell--1 {
            fill: var(--hornet-yellow);
        }

        .review__cell--2 {
            fill: var(--hornet-white);
        }

        .review__cell--3 {
            fill: var(--hornet-orange);
        }

        .review__badge {
            display: block;
            position: relative;
            width: 104px;
            height: 104px;
        }

            .review__badge svg {
                width: 100%;
                height: 100%;
                fill: var(--hornet-yellow);
                stroke: var(--hornet-ink);
                stroke-width: 1.4;
                stroke-linejoin: round;
                filter: drop-shadow(5px 5px 0 var(--hornet-ink));
                transform: rotate(8deg);
            }

        .review__closing {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            padding-top: 30px;
            color: var(--hornet-ink);
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 900;
            font-size: 104px;
            line-height: 1;
        }

        /* The tape runs out of the panel's sides */
        .review__space--bottom .review__deco-row::before {
            right: -3px;
            left: -3px;
        }
    }

    /* With a tagline: never the tape and stickers. The tagline in a tilted yellow box,
       centered in the room; once the room is tall enough for the mascot as well, with a
       safe 16px above the author line (the queries below), the box becomes a speech
       bubble with a tail and the mascot stands under it (bottom left, facing up), the
       tail pointing down at its head with a little air between. Bubble and mascot are
       one group (.review__speaker): the bubble is centered and nearly as wide as the
       room on phones, the mascot placed from it and sized to the room beside it. */
    @container (min-height: 72px) {
        .review__space--bottom .review__deco--hornet {
            /* Bubble type size, the lines the tagline takes and the width it may use */
            --bubble-fs: 22px;
            --bubble-fs: clamp(18px, 7.4cqi, 28px);
            --bubble-lines: 3;
            --bubble-w: 320px;
            /* Height the bubble takes from the mascot: its lines, padding and tail (72px),
               the gap under it, the bottom margin and the tilt (44px) */
            --bubble-room: calc(var(--bubble-fs) * 1.08 * var(--bubble-lines) + 116px);
            /* How far the bubble sits right of the mascot's left edge; none without it */
            --bubble-x: 0px;
            display: flex;
            /* Centered between the review text and the author line: the room starts
               under the quote's 28px bottom margin, so it reaches up over it */
            inset: -28px 0 0;
            justify-content: center;
            align-items: center;
            overflow: visible;
            background: none;
            border: 0;
            box-shadow: none;
        }

            :is(.review__space--bottom .review__deco--hornet) .review__deco-row {
                display: none;
            }

        .review__speaker {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            max-width: 100%;
            padding-left: var(--bubble-x);
        }

        /* The bubble is one shape (box + tail) so its outline is even all round: the
           ink box cut to the shape, a yellow copy inset by the border width over it, and
           one hard drop-shadow on the wrapper following both. Without the mascot it is
           just the box (no tail). */
        .review__bubble {
            display: block;
            position: relative;
            /* A plain length: a percentage here is ignored when the group's width is
               worked out from its content, which then took the bubble's one-line width
               and pushed it off center */
            max-width: var(--bubble-w);
            margin-right: 8px;
            transform: rotate(-3deg);
            filter: drop-shadow(8px 8px 0 var(--hornet-ink));
        }

        /* Tail out of the bottom edge, 44..84px in, its tip 40px in */
        .review__bubble-box {
            --tail: 0px;
            position: relative;
            z-index: 0;
            display: block;
            padding: 18px 20px calc(18px + var(--tail));
            background: var(--hornet-ink);
            clip-path: polygon(
                0 0,
                100% 0,
                100% calc(100% - var(--tail)),
                84px calc(100% - var(--tail)),
                40px 100%,
                44px calc(100% - var(--tail)),
                0 calc(100% - var(--tail))
            );
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 900;
            font-size: var(--bubble-fs);
            line-height: 1.08;
            text-transform: uppercase;
            text-wrap: balance;

            /* Yellow fill: the same outline moved 4px inward (the tail's two edges too) */
        }
            .review__bubble-box::before {
                content: "";
                position: absolute;
                z-index: -1;
                inset: 0;
                background: var(--hornet-yellow);
                clip-path: polygon(
                    4px 4px,
                    calc(100% - 4px) 4px,
                    calc(100% - 4px) calc(100% - var(--tail) - 4px),
                    82.6px calc(100% - var(--tail) - 4px),
                    45px calc(100% - var(--tail) * 0.15 - 4px),
                    48.4px calc(100% - var(--tail) - 4px),
                    4px calc(100% - var(--tail) - 4px)
                );
            }
    }

    /* Wider rooms: a wider bubble in smaller type, so the tagline takes fewer lines
       (two from 440px, one from 560px) and leaves the mascot more of the height */
    @container (min-width: 440px) {
        .review__space--bottom .review__deco--hornet {
            --bubble-fs: 22px;
            --bubble-lines: 2;
            --bubble-w: 440px;
        }
    }

    @container (min-width: 560px) {
        .review__space--bottom .review__deco--hornet {
            --bubble-fs: 20px;
            --bubble-lines: 1;
            --bubble-w: 600px;
        }
    }

    /* Room for the mascot too: from a 200px room, the mascot as small as it has to be
       (sized from what the bubble leaves). Every room on screens up to 768px is taller
       than that, so there it always shows; on wider screens a shorter room gets just the
       box */
    @container (min-height: 200px) {
        .review__space--bottom .review__deco--hornet {
            --mascot-w: 150px;
            /* Capped by the height left under the bubble, and by the width: the bubble
               stays centered, at least 240px wide where it can (a narrower room just
               gets the mascot out of its way), the mascot taking only the room beside it (so a narrow room gets a smaller mascot, never an off-center
               bubble) */
            --mascot-w: min(150px, calc(100cqh - var(--bubble-room)), calc((50cqi - 80px) * 2));
            /* The tail tip (40px into the bubble) over the head, about half across the
               mascot's tilted box */
            --bubble-x: max(0px, calc(var(--mascot-w) * 0.5 - 40px));
            inset: 0;
            padding-bottom: 16px;
        }

        .review__bubble-box {
            --tail: 36px;
        }

        .review__mascot {
            display: block;
            flex: none;
            width: var(--mascot-w);
            margin-left: calc(var(--bubble-x) * -1);
            transform: rotate(-12deg);
        }

        /* The same room on the bubble's right as the mascot takes on its left: the
           bubble itself centered */
        .review__speaker {
            padding-right: var(--bubble-x);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .review__shape {
        animation: none;
    }
}

/* Big skewed quote chip hanging off the top edge */
.review__mark {
    position: absolute;
    top: -28px;
    left: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 64px;
    height: 56px;
    padding-top: 6px;
    background: var(--hornet-ink);
    border: 3px solid var(--hornet-yellow);
    color: var(--hornet-yellow);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: 88px;
    line-height: 1;
}
@media (min-width: 481px) {
.review__mark {
        left: 32px;
}
    }
@media (min-width: 961px) {
.review__mark {
        left: 56px;
}
    }

/* Strip of masking tape on the top-right corner */
.review__tape {
    position: absolute;
    top: -14px;
    right: 18px;
    padding: 4px 22px;
    background: rgb(255 255 255 / 0.85);
    border-left: 2px dashed var(--gray-500);
    border-right: 2px dashed var(--gray-500);
    box-shadow: 2px 2px 0 rgb(39 27 29 / 0.25);
    transform: rotate(4deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
}
@media (min-width: 769px) {
.review__tape {
        right: 40px;
        font-size: var(--fs-lg);
}
    }

.review__stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.review__star {
    width: 22px;
    height: 22px;
    fill: var(--hornet-white);
    stroke: var(--hornet-ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

@media (min-width: 769px) {

.review__star {
        width: 28px;
        height: 28px;
}
    }

.review__star--on {
    fill: var(--hornet-yellow);
}

.review__quote {
    margin: 0 0 28px;
}

.review__quote p {
        max-width: 46em;
        margin: 0;
        font-size: var(--fs-md);
        font-weight: 500;
        line-height: 1.6;
    }

@media (min-width: 769px) {

.review__quote p {
            font-size: var(--fs-xl);
            line-height: 1.55;
    }
        }

/* Short quote: a pull quote, bigger */
.review__quote--short p {
        font-size: var(--fs-lg);
        font-weight: 700;
        line-height: 1.45;
    }
@media (min-width: 769px) {
.review__quote--short p {
            font-size: 28px;
            line-height: 1.4;
    }
        }
@media (min-width: 961px) {
.review__quote--short p {
            font-size: var(--fs-2xl);
    }
        }

/* A review in labeled parts: one row each, the label a skewed yellow chip beside the
   text (above it on phones), rows split by a dashed rule; smaller type than a lone quote */
.review__quote--points {
    display: grid;
    gap: 16px;
}
.review__quote--points p {
        font-size: var(--fs-base);
    }
@media (min-width: 769px) {
.review__quote--points p {
            font-size: var(--fs-md);
            line-height: 1.6;
    }
        }

.review__point {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.review__point + .review__point {
        padding-top: 16px;
        border-top: 2px dashed var(--gray-300);
    }

@media (min-width: 769px) {

.review__point {
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: baseline;
        gap: 24px;
}
    }

/* A short review in one labeled part: the label above the text, set as big as a short
   quote (it doesn't need a label column to line up with other parts) */
.review__quote--points.review__quote--short .review__point {
        grid-template-columns: none;
        gap: 14px;
    }
.review__quote--points.review__quote--short p {
        font-size: var(--fs-lg);
        font-weight: 700;
        line-height: 1.45;
    }
@media (min-width: 769px) {
.review__quote--points.review__quote--short p {
            font-size: 28px;
            line-height: 1.4;
    }
        }
@media (min-width: 961px) {
.review__quote--points.review__quote--short p {
            font-size: var(--fs-2xl);
    }
        }

.review__label {
    padding: 4px 12px;
    background: var(--hornet-yellow);
    border: 2px solid var(--hornet-ink);
    box-shadow: 3px 3px 0 var(--hornet-ink);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.review__author {
    display: flex;
    align-items: center;
    padding-top: 20px;
    border-top: 2px solid var(--hornet-ink);
}

.review__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.review__name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-lg);
    line-height: 1.1;
    text-transform: uppercase;
}

@media (min-width: 769px) {

.review__name {
        font-size: var(--fs-xl);
}
    }

.review__company {
    font-size: var(--fs-sm);
    font-weight: 700;
}

@media (min-width: 769px) {

.review__company {
        font-size: var(--fs-base);
}
    }

.review__meta {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-700);
}

@media (min-width: 769px) {

.review__meta {
        font-size: var(--fs-sm);
}
    }

/* Prev | counter + dots + autoplay countdown | next */
.reviews__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    /* Keep the arrows' hard shadow inside the container */
    padding-right: 8px;
}

.reviews__arrow {
    flex: none;
}

.reviews__arrow  > span {
        font-family: var(--font-body);
        font-style: normal;
        font-weight: 700;
    }

.reviews__status {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.reviews__counter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
}

.reviews__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.reviews__dot {
    width: 18px;
    height: 14px;
    padding: 0;
    background: var(--hornet-white);
    border: 2px solid var(--hornet-ink);
    border-radius: 0;
    transform: skewX(var(--skew));
    cursor: pointer;
    transition: width 0.15s, background-color 0.15s;
}

.reviews__dot:focus-visible {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 3px;
    }

.reviews__dot--active {
    width: 36px;
    background: var(--hornet-ink);
}

/* Thin bar filling up until the next auto switch; empty while autoplay is stopped */
.reviews__progress {
    display: block;
    width: min(160px, 100%);
    height: 6px;
    background: var(--hornet-white);
    border: 2px solid var(--hornet-ink);
    overflow: hidden;
}

.reviews__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--hornet-ink);
    transform-origin: left;
    animation: reviews-progress linear forwards;
}

@keyframes reviews-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

.shell {
    min-height: 100vh;
    min-height: 100dvh;
    /* 100dvh changes when the mobile URL bar shows/hides: ease the height (and anything
       centered in it) instead of jumping. Off with prefers-reduced-motion (global.css). */
    transition: min-height 0.35s ease-out;
    display: flex;
    flex-direction: column;
    background: var(--hornet-white);
    color: var(--hornet-ink);
}

.shell__container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.shell__main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Sticky header: logo plus the page's section links. Fixed height (no shrinking on
   scroll), so anchor jumps land exactly under it (scroll-padding-top in global.css). */
.shell__header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: var(--border-thick);
    background: var(--hornet-white);
}

.shell__header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 14px;
}

/* The logo PNG is transparent outside its frame, so drop-shadow gives a hard black
   backing that follows the skewed frame. */
.shell__logo {
    display: block;
    width: 150px;
    height: auto;
    filter: drop-shadow(4px 4px 0 var(--hornet-ink));
}
@media (min-width: 481px) {
.shell__logo {
        width: 180px;
}
    }

/* Clicked: the hornet buzzes, a quick shake with a pop, settling back */
.shell__logo--buzz {
    transform-origin: 30% 50%;
    animation: shell-logo-buzz 0.7s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.shell__logo--buzz {
        animation: none;
}
    }

@keyframes shell-logo-buzz {
    0% {
        transform: none;
    }

    12% {
        transform: scale(1.12) rotate(-7deg);
    }

    24% {
        transform: scale(1.12) rotate(6deg);
    }

    36% {
        transform: scale(1.1) rotate(-5deg);
    }

    48% {
        transform: scale(1.08) rotate(4deg);
    }

    60% {
        transform: scale(1.05) rotate(-2deg);
    }

    76% {
        transform: scale(0.97) rotate(1deg);
    }

    100% {
        transform: none;
    }
}

/* Header logo link: home from other pages, back to the top on home */
.shell__logo-link {
    display: block;
    transition: transform 0.15s ease;
}
@media (hover: hover) {
        .shell__logo-link:hover {
            transform: translate(-2px, -2px);
        }
    }

/* Scoped under the header so it wins over .button's display (declared later) */
.shell__header .shell__menu-button {
    margin-right: 6px;
}
@media (min-width: 961px) {
.shell__header .shell__menu-button {
        display: none;
}
    }

/*
 * Section links. Phones/tablets: a panel dropping under the header, toggled by the menu
 * button. Desktop: inline in the header.
 */
.shell__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 12px var(--gutter) 20px;
    background: var(--hornet-white);
    border-bottom: var(--border-thick);
}
@media (min-width: 961px) {
.shell__nav {
        display: block;
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
}
    }

.shell__nav--open {
    display: block;
}

.shell__nav-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 961px) {

.shell__nav-list {
        flex-direction: row;
        align-items: center;
        gap: 4px;
}
    }

.shell__nav-link {
    display: block;
    padding: 12px 4px;
    border-bottom: 2px solid var(--gray-300);
    color: var(--hornet-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-decoration: none;
    text-transform: uppercase;
}

@media (min-width: 961px) {

.shell__nav-link {
        padding: 6px 14px;
        border: 0;
        font-size: var(--fs-lg);
}
    }

/* Yellow skewed block slides in behind the hovered link */

@media (hover: hover) {
        .shell__nav-link:hover {
            background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
        }
    }

/* The page being viewed (page links only; sections don't track scroll): a yellow bar
   in the phone panel, the hover highlight kept on in the desktop header */
.shell__nav-link--current {
    padding-left: 12px;
    border-left: 8px solid var(--hornet-yellow);
}
@media (min-width: 961px) {
.shell__nav-link--current {
        padding-left: 14px;
        border-left: 0;
        background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
}
    }

/* Hazard-tape strip */
.hazard {
    height: 28px;
    flex-shrink: 0;
    border-top: var(--border-thick);
    border-bottom: var(--border-thick);
    background: repeating-linear-gradient(
        -45deg,
        var(--hornet-yellow) 0 22px,
        var(--hornet-ink) 22px 44px
    );
}

.hazard--thin {
    height: 20px;
    border: 0;
    background: repeating-linear-gradient(
        -45deg,
        var(--hornet-yellow) 0 16px,
        var(--hornet-ink) 16px 32px
    );
}

/* Footer */
.shell__footer {
    padding: 48px 0;
    background: var(--hornet-ink);
}

.shell__footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.shell__footer-logo {
    width: 180px;
    height: auto;
}

@media (min-width: 481px) {

.shell__footer-logo {
        width: 200px;
}
    }

/* Social links: yellow skewed icon chip + label/handle, like the contact card rows */
.shell__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell__social {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hornet-white);
    text-decoration: none;
}

@media (hover: hover) {
        .shell__social:hover .shell__social-icon {
            transform: skewX(var(--skew)) translate(2px, 2px);
            box-shadow: 1px 1px 0 var(--hornet-orange);
        }

        .shell__social:hover .shell__social-handle {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
    }

.shell__social-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--hornet-yellow);
    box-shadow: 3px 3px 0 var(--hornet-orange);
    transform: skewX(var(--skew));
    transition: transform 0.08s, box-shadow 0.08s;
}

.shell__social-icon svg {
        width: 22px;
        height: 22px;
        stroke: var(--hornet-ink);
        transform: skewX(calc(var(--skew) * -1));
    }

.shell__social-text {
    display: flex;
    flex-direction: column;
}

.shell__social-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hornet-on-dark);
}

.shell__social-handle {
    font-weight: 700;
    color: var(--hornet-yellow);
}

/* Full-width line under the logo and the links */
.shell__copyright {
    flex-basis: 100%;
    padding-top: 20px;
    border-top: 1px solid rgb(233 228 229 / 0.2);
    font-size: var(--fs-sm);
    color: var(--hornet-on-dark);
}

/* Back to the main Dumons Coating site */
.shell__footer-link {
    color: var(--hornet-yellow);
    font-weight: 700;
    text-decoration: none;
}
.shell__footer-link:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

/*
 * Skewed button: the outer element is skewed like the logo frame, the inner span is
 * skewed back so the text stays upright. Hover presses it in (hover-capable devices only), active fully.
 * Works on <a> and <button>.
 */
.button {
    display: inline-block;
    margin: 0;
    border: var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    transform: skewX(var(--skew));
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
.button  > span {
        display: inline-block;
        transform: skewX(calc(var(--skew) * -1));
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
/* Only where hover exists: on touch screens :hover sticks after a tap,
       leaving the button looking half-pressed */
@media (hover: hover) {
        .button:hover {
            transform: skewX(var(--skew)) translate(2px, 2px);
            box-shadow: 3px 3px 0 var(--hornet-ink);
        }
    }
.button:active {
        transform: skewX(var(--skew)) translate(5px, 5px);
        box-shadow: none;
    }
.button:focus-visible {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 4px;
    }

.button--sm {
    padding: 8px 14px;
    font-size: var(--fs-sm);
}

@media (min-width: 481px) {

.button--sm {
        padding: 10px 22px;
        font-size: var(--fs-lg);
}
    }

.button--lg {
    padding: 14px 26px;
    font-size: var(--fs-lg);
}

@media (min-width: 769px) {

.button--lg {
        padding: 16px 30px;
        font-size: var(--fs-xl);
}
    }

.button--xl {
    padding: 16px 28px;
    font-size: var(--fs-xl);
}

@media (min-width: 769px) {

.button--xl {
        padding: 18px 34px;
        font-size: 28px;
}
    }

.button--yellow {
    background: var(--hornet-yellow);
    color: var(--hornet-ink);
}

.button--white {
    background: var(--hornet-white);
    color: var(--hornet-ink);
}

/* Orange hard shadow, so the shadow reads against the ink fill */
.button--dark {
    background: var(--hornet-ink);
    color: var(--hornet-white);
    box-shadow: 6px 6px 0 var(--hornet-orange);
}
@media (hover: hover) {
        .button--dark:hover {
            box-shadow: 3px 3px 0 var(--hornet-orange);
        }
    }

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

/*
 * Floating WhatsApp button: skewed yellow chip with a hard ink shadow, bottom-right.
 * Slides in from below when shown; the label only fits from --small up.
 */
.wa-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--hornet-yellow);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--hornet-ink);
    text-decoration: none;
    transform: skewX(var(--skew)) translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease-out, opacity 0.25s, box-shadow 0.08s;
}
@media (min-width: 769px) {
.wa-float {
        right: 28px;
        bottom: 28px;
        padding: 12px 20px;
}
    }
.wa-float:focus-visible {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 4px;
    }

.wa-float--visible {
    transform: skewX(var(--skew));
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
        .wa-float--visible:hover {
            transform: skewX(var(--skew)) translate(2px, 2px);
            box-shadow: 3px 3px 0 var(--hornet-ink);
        }
    }

.wa-float--visible:active {
        transform: skewX(var(--skew)) translate(5px, 5px);
        box-shadow: none;
    }

.wa-float__icon {
    display: flex;
    transform: skewX(calc(var(--skew) * -1));
}

.wa-float__icon svg {
        width: 26px;
        height: 26px;
        stroke: var(--hornet-ink);
    }

.wa-float__label {
    display: none;
    transform: skewX(calc(var(--skew) * -1));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-lg);
    text-transform: uppercase;
}

@media (min-width: 481px) {

.wa-float__label {
        display: inline;
}
    }

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

.hero__inner,
.features__inner,
.stats__inner,
.promos__inner,
.products__inner,
.testimonials__inner,
.results__inner,
.partners-band__inner,
.faq__inner,
.cta__inner {
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Hero (also used by the 404 page) */
.hero {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 48px 0 72px;
    overflow: hidden;
}
@media (min-width: 769px) {
.hero {
        padding: 72px 0 96px;
}
    }

/* Yellow slab behind the copy, skewed like the logo frame */
.hero__slab {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8%;
    width: 70%;
    background: var(--hornet-yellow);
    transform: skewX(var(--skew));
    transform-origin: top left;
}
@media (min-width: 769px) {
.hero__slab {
        width: 46%;
}
    }

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 56px;

    /* Two columns with a wide gap that grows with the screen, so the title never crowds the photo */
}

@media (min-width: 961px) {

.hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(64px, 7vw, 160px);
}
    }

/* 404: the hornet painter in the photo column, as if the page is still waiting for paint.
   Room on the right for its paint puffs */
.not-found__sprayer {
    width: 80%;
    max-width: 520px;
    justify-self: center;
}

/* The can lineup is wide: give it the bigger column */
@media (min-width: 961px) {
.hero__inner--lineup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: clamp(48px, 5vw, 120px);
}
    }

.hero__copy {
    min-width: 0;
    /* Lets the title size itself from this column's width (cqi units) */
    container-type: inline-size;
}

.hero__tag {
    display: inline-block;
    margin-bottom: 24px;
    padding: 8px 16px;
    background: var(--hornet-ink);
    color: var(--hornet-white);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

@media (min-width: 769px) {

.hero__tag {
        font-size: var(--fs-md);
}
    }

.hero__title {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    /* Sized from the copy column, not the viewport: the longest line ("PILIHAN SOLID")
       always fits the column, however wide the screen is */
    /* Browsers without container units (iOS < 16) */
    font-size: clamp(44px, 11vw, 84px);
    font-size: clamp(44px, 15.5cqi, 146px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.hero__message {
    max-width: 34em;
    margin: 0 0 36px;
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.55;
}

@media (min-width: 769px) {

.hero__message {
        font-size: var(--fs-lg);
}
    }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hero__media {
    min-width: 0;
    display: flex;
    justify-content: center;
}

@media (min-width: 961px) {

.hero__media {
        justify-content: flex-end;
}
    }

.hero__frame {
    position: relative;
    /* Leave room for the hard shadow so it isn't clipped on small screens */
    width: calc(100% - 14px);
    max-width: 460px;
}

@media (min-width: 1601px) {

.hero__frame {
        max-width: 560px;
}
    }

.hero__photo {
    aspect-ratio: 4 / 5;
    background: var(--gray-100);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hero__photo img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

/* Product photo: shown whole on white, like the product cards */
.hero__photo--product {
    background: var(--hornet-white);
}
.hero__photo--product img {
        -o-object-fit: contain;
           object-fit: contain;
    }

.hero__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 18px,
            var(--gray-300) 18px 20px
        ),
        var(--hornet-white);
}

.hero__photo--placeholder img {
        width: 72%;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }

.hero__sticker {
    position: absolute;
    left: -8px;
    bottom: 36px;
    padding: 10px 18px;
    background: var(--hornet-yellow);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}

@media (min-width: 769px) {

.hero__sticker {
        left: -20px;
        font-size: 28px;
}
    }

/*
 * Can lineup stage: a dark panel dressed like the brand posters (yellow corner wedges,
 * white slashes), with the die-cut cans standing on a yellow
 * plinth and spilling over the panel's sides
 */
.hero__stage {
    position: relative;
    /* Room for the panel's hard shadow and the cans spilling out */
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 12px 0 28px;
}
@media (min-width: 1601px) {
.hero__stage {
        max-width: 860px;
}
    }

.hero__stage-panel {
    position: relative;
    /* Just tall enough for the cans (about 44% of the width) plus a band of stage above them */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(circle, rgb(255 255 0 / 0.14) 1.6px, transparent 2px) 0 0 / 14px 14px,
        var(--hornet-ink);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);

    /* Yellow wedges in two corners, cut at the logo's angle */
}

.hero__stage-panel::before,.hero__stage-panel::after {
        content: "";
        position: absolute;
        width: 34%;
        height: 70%;
        background: var(--hornet-yellow);
        transform: skewX(var(--skew));
    }

.hero__stage-panel::before {
        top: 0;
        left: -24%;
    }

.hero__stage-panel::after {
        right: -24%;
        bottom: 0;
    }

.hero__stage-slashes {
    position: absolute;
    top: 5%;
    left: 13%;
    width: 18%;
    height: 5%;
    background: repeating-linear-gradient(
        90deg,
        var(--hornet-white) 0 14%,
        transparent 14% 26%
    );
    transform: skewX(-35deg);
    z-index: 1;
}

.hero__stage-plinth {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -4%;
    height: 12%;
    background: var(--hornet-yellow);
    border: var(--border-thick);
    box-shadow: var(--shadow-md);
    transform: skewX(var(--skew));
}

.hero__stage-cans {
    position: absolute;
    left: -3%;
    bottom: 1%;
    width: 106%;
    height: auto;

    /* Spill further once there's room beside the stage */
}

@media (min-width: 769px) {

.hero__stage-cans {
        left: -5%;
        width: 110%;
}
    }

.hero__stage-cans {
    /* Die-cut white outline, then a hard ink shadow, like the mascot */
    filter:
        drop-shadow(3px 0 0 var(--hornet-white))
        drop-shadow(-3px 0 0 var(--hornet-white))
        drop-shadow(0 3px 0 var(--hornet-white))
        drop-shadow(0 -3px 0 var(--hornet-white))
        drop-shadow(8px 8px 0 var(--hornet-ink));
}

.hero__sticker--stage {
    left: auto;
    right: -12px;
    top: -18px;
    bottom: auto;
    transform: rotate(5deg);
}

@media (min-width: 769px) {

.hero__sticker--stage {
        left: auto;
        right: -22px;
}
    }

/* Features */
.features {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    background-color: var(--hornet-white);
    background-image:
        linear-gradient(var(--gray-100) 2px, transparent 2px),
        linear-gradient(90deg, var(--gray-100) 2px, transparent 2px);
    background-size: 40px 40px;
}
@media (min-width: 769px) {
.features {
        padding: 96px 0;
}
    }

.features__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

/* Marker-pen highlight behind a word */
.features__highlight {
    padding: 0 0.1em;
    background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
}

.features__lead {
    max-width: 38em;
    margin: 0 0 48px;
    font-size: var(--fs-md);
}

@media (min-width: 769px) {

.features__lead {
        font-size: var(--fs-lg);
}
    }

/* Two by two from --medium: four narrow columns made the longer texts run twice as tall
   as the shorter ones, leaving the other cards half empty */
.features__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}
@media (min-width: 769px) {
.features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
}
    }

/* Subgrid rows: card heads in a row share one height, so the body text lines up
   even when one title wraps to two lines. */
.feature {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-md);
}

.feature__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--hornet-ink);
}

/* Yellow skewed chip like the logo frame; the icon is skewed back upright */
.feature__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--hornet-yellow);
    transform: skewX(var(--skew));
}
.feature__icon svg {
        width: 28px;
        height: 28px;
        stroke: var(--hornet-ink);
        transform: skewX(calc(var(--skew) * -1));
    }

.feature__title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-xl);
    line-height: 1.1;
    color: var(--hornet-white);
}

.feature__text {
    margin: 0;
    padding: 20px;
    font-size: var(--fs-base);
    line-height: 1.6;
}

@media (min-width: 769px) {

.feature__text {
        font-size: var(--fs-md);
}
    }

/* Trust numbers: ink band between the white features and the yellow promotions */
.stats {
    padding: 48px 0;
    border-top: var(--border-thick);
    background: var(--hornet-ink);
    color: var(--hornet-white);
}
@media (min-width: 769px) {
.stats {
        padding: 56px 0;
}
    }

/* The heading (statsTitle) above the numbers, beside them from --xlarge (any earlier and the
   numbers' columns get too narrow for their one-line labels) */
.stats__inner {
    display: grid;
    gap: 32px;
}
@media (min-width: 1201px) {
.stats__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: center;
        gap: 56px;
}
    }

.stats__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.stats__tag {
    padding: 4px 12px;
    background: var(--hornet-yellow);
    color: var(--hornet-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: skewX(var(--skew));
    box-shadow: 4px 4px 0 var(--hornet-white);
}

/* Big white lead with a hard orange offset shadow, the last word on a tilted yellow marker
   below it */
.stats__title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(38px, 4.2vw, 64px);
    line-height: 1.05;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 3px 3px 0 var(--hornet-orange);
}

/* The heading's last word on a tilted yellow marker with a hard white shadow, twinkling
   sparkles on its corner */
.stats__mark {
    position: relative;
    display: inline-block;
    margin-top: 0.14em;
    padding: 0.08em 0.24em 0.02em 0.16em;
    background: var(--hornet-yellow);
    color: var(--hornet-ink);
    text-shadow: none;
    border: 3px solid var(--hornet-white);
    box-shadow: 7px 7px 0 var(--hornet-white);
    transform: rotate(-3deg);
}

.stats__sparkle {
    position: absolute;
    top: -0.42em;
    right: -0.36em;
    width: 0.6em;
    height: 0.6em;
    fill: var(--hornet-yellow);
    stroke: var(--hornet-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    filter: drop-shadow(2px 2px 0 var(--hornet-white));
    animation: stats-twinkle 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

.stats__sparkle {
        animation: none;
}
    }

.stats__sparkle--small {
    top: auto;
    right: auto;
    bottom: -0.3em;
    left: -0.3em;
    width: 0.34em;
    height: 0.34em;
    animation-delay: -1.2s;
}

@keyframes stats-twinkle {
    0%, 100% { transform: scale(1) rotate(0); }
    50% { transform: scale(0.6) rotate(45deg); }
}

/* Speed bars under the heading: three skewed bars, yellow, orange, white, each shorter than
   the last, as if the heading just raced past */
.stats__rule {
    width: 168px;
    height: 10px;
    margin-top: 12px;
    background:
        linear-gradient(var(--hornet-yellow), var(--hornet-yellow)) 0 0 / 96px 100% no-repeat,
        linear-gradient(var(--hornet-orange), var(--hornet-orange)) 108px 0 / 36px 100% no-repeat,
        linear-gradient(var(--hornet-white), var(--hornet-white)) 156px 0 / 12px 100% no-repeat;
    transform: skewX(var(--skew));
}

/* One equal column per stat in a single row; four or more go two to a row below --medium.
   Phones (--xsmall): one stat per row, the number beside its label, so a label such as
   "Retail & Workshop" never breaks onto two lines */
.stats__list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.stats__list:has( > :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 32px 16px;
    }
@media (max-width: 480px) {
        .stats__list,.stats__list:has( > :nth-child(4)) {
            grid-template-columns: minmax(0, 1fr);
            grid-auto-flow: row;
            gap: 0;
        }
    }
@media (min-width: 769px) {
        .stats__list,.stats__list:has( > :nth-child(4)) {
            grid-template-columns: none;
            grid-auto-flow: column;
            gap: 0;
        }
    }

.stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* The label is sized from the stat's width */
    container-type: inline-size;

    /* Below --medium, four or more: an odd last stat takes the whole row instead of leaving a hole */
}

.stats__list:has( > :nth-child(4)) > .stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

/* Phones: a row with the number (fixed width, so the labels line up) and its label on
       one line, rows split by a thin yellow rule */

@media (max-width: 480px) {

.stat {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 14px 0;
}

        .stat:first-child {
            padding-top: 0;
        }

        .stat:last-child {
            padding-bottom: 0;
        }

        .stat + .stat {
            border-top: 2px solid rgb(255 255 0 / 0.25);
        }
    }

/* Skewed yellow divider between the numbers (one row only) */

@media (min-width: 769px) {

.stat {
        position: relative;
        padding: 0 16px 0 40px;
}

        .stats__list:has( > :nth-child(4)) > .stat:last-child:nth-child(odd) {
            grid-column: auto;
        }

        .stat:first-child {
            padding-left: 0;
        }

        .stat + .stat::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 12px;
            width: 6px;
            background: var(--hornet-yellow);
            transform: skewX(var(--skew));
        }
    }

.stat__value {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(40px, 4.2vw, 76px);
    line-height: 1;
    color: var(--hornet-yellow);
    white-space: nowrap;
    /* Equal-width digits, so the number doesn't wobble while counting */
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {

.stat__value {
        flex: none;
        min-width: 2.4em;
}
    }

.stat__suffix {
    color: var(--hornet-orange);
}

/* Every label on one line, never cut: sized from its column (each stat is a size container)
   and the longest label (--label-chars, set in Home.tsx), about 0.78em per uppercase
   character with its spacing, capped at the normal size. Browsers without container units
   keep the plain size and wrap */
.stat__label {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    color: var(--hornet-on-dark);
}
@media (min-width: 769px) {
.stat__label {
        font-size: var(--fs-base);
}
    }
@supports (font-size: 1cqi) {
.stat__label {
        white-space: nowrap;
        font-size: min(var(--fs-base), calc(100cqi / (var(--label-chars) * 0.78)));

        /* Phones: the label shares the row with the number (2.4em of 40px) and the 18px gap */
}
        @media (max-width: 480px) {
.stat__label {
            font-size: min(var(--fs-base), calc((100cqi - 114px) / (var(--label-chars) * 0.78)));
}
        }
    }

/* Promotions: yellow band between the white features and the dark CTA, opened by a ticker */
.promos {
    padding: 0 0 72px;
    border-top: var(--border-thick);
    background: var(--hornet-yellow);
    overflow: hidden;
}
@media (min-width: 769px) {
.promos {
        padding-bottom: 96px;
}
    }

/* Ink ticker tape scrolling "PROMO • DISKON • ..." across the top of the band */
.ticker {
    margin-bottom: 24px;
    padding: 12px 0;
    background: var(--hornet-ink);
    border-bottom: var(--border-thick);
    overflow: hidden;
}
@media (min-width: 481px) {
.ticker {
        margin-bottom: 40px;
}
    }

.ticker__track {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    /* Slides one copy (half the track) per loop; scale with TICKER_COPY's length to keep the speed */
    animation: ticker-scroll 88s linear infinite;
}

.ticker__group {
    display: flex;
}

.ticker__item {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--hornet-yellow);
    text-transform: uppercase;
    white-space: nowrap;

    /* Skewed orange chip between words */
}

.ticker__item::after {
        content: "";
        width: 18px;
        height: 18px;
        margin: 0 24px;
        background: var(--hornet-orange);
        transform: skewX(var(--skew));
    }

@keyframes ticker-scroll {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

/* Title + lead with the mascot flying beside them */
/*
 * Phones: a grid with the title (stacked PROMO / HÖRNET) beside the mascot and the lead
 * across the full width under both; .promos__copy dissolves so its children join the
 * grid. From --small up: title + lead on the left, mascot on the right.
 */
.promos__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title mascot"
        "lead  lead";
    align-items: center;
    -moz-column-gap: 8px;
         column-gap: 8px;
    margin-bottom: 36px;
}
@media (min-width: 481px) {
.promos__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 32px;
}
    }

.promos__copy {
    display: contents;
}

@media (min-width: 481px) {

.promos__copy {
        display: block;
        min-width: 0;
}
    }

.promos__mascot {
    grid-area: mascot;
    position: relative;
    flex: none;
    width: clamp(112px, 38vw, 172px);
    /* Room for the "PROMO!" burst above the head and the hard shadow on the right */
    margin: 28px 8px 0 0;
}

@media (min-width: 481px) {

.promos__mascot {
        width: clamp(160px, 24vw, 300px);
        margin: 0 8px 0 0;
}
    }

/* Speech burst shouted by the mascot, next to its head */
.promos__shout {
    position: absolute;
    top: -8%;
    right: -2%;
    z-index: 1;
    padding: 4px 10px;
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(-10deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(14px, 2.4vw, 28px);
    line-height: 1;
    text-transform: uppercase;
    animation: shout-pop 1.2s ease-in-out infinite;
}
@media (min-width: 769px) {
.promos__shout {
        padding: 6px 14px;
}
    }

@keyframes shout-pop {
    0%, 100% {
        transform: rotate(-10deg) scale(1);
    }

    50% {
        transform: rotate(-6deg) scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .promos__shout {
        animation: none;
    }
}

.promos__title {
    grid-area: title;
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    /* Phones: big, and the narrow column wraps it onto two lines (PROMO / HÖRNET) */
    font-size: clamp(40px, 13vw, 60px);
    line-height: 1.05;
    text-transform: uppercase;
}

@media (min-width: 481px) {

.promos__title {
        margin-bottom: 20px;
        font-size: clamp(40px, 6vw, 88px);
        line-height: 1;
}
    }

/* Ink block behind a word (the yellow marker wouldn't show on the yellow band) */
.promos__highlight {
    padding: 0 0.15em;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
}

.promos__lead {
    grid-area: lead;
    max-width: 38em;
    /* Set off with an ink bar so it reads as part of the header */
    margin: 20px 0 0;
    padding-left: 14px;
    border-left: 6px solid var(--hornet-ink);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 481px) {

.promos__lead {
        margin: 0;
        padding-left: 18px;
        font-size: var(--fs-md);
}
    }

@media (min-width: 769px) {

.promos__lead {
        font-size: var(--fs-lg);
}
    }

/*
 * Justified rows for posters of any orientation and count. Each card's width follows
 * its own aspect ratio (--ratio, set inline from the image size), so every poster in a
 * row ends up the same height and is shown whole: no cropping, no letterboxing.
 *   flex-basis  = ratio x --row-h      ideal row height; a row wraps when it's full
 *   flex-grow   = ratio                spare width shared so heights stay equal
 *   max-width   = ratio x --row-max-h  a short last row stays about as tall as the full
 *                                      rows instead of blowing up; it's centered
 * Phones: one poster per row at full width, so the text on it stays readable.
 */
.promos__grid {
    --row-h: 220px;
    --row-max-h: 290px;
    --gap: 28px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px var(--gap);
    margin: 0;
    /* Room for the cards' hard shadow inside the container */
    padding: 0 8px 0 0;
    list-style: none;
}
@media (min-width: 961px) {
.promos__grid {
        --row-h: 260px;
        --row-max-h: 340px;
}
    }
@media (min-width: 1601px) {
.promos__grid {
        --row-h: 320px;
        --row-max-h: 420px;
}
    }

.promo {
    /* Layout ratio, clamped to 9:16 (story) .. 2.2:1: a very tall poster would otherwise become a thin strip next to
       the others (and huge on phones), a very wide banner a sliver. Beyond the clamp the
       poster is still shown whole, centered on the hatched background. */
    --r: clamp(0.55, var(--ratio), 2.2);

    /* Sizes below apply to the image area; the border sits outside, so heights match exactly */
    box-sizing: content-box;
    flex: var(--r) 1 calc(var(--r) * var(--row-h));
    max-width: min(calc(var(--r) * var(--row-max-h)), calc(100% - 6px));
    aspect-ratio: var(--r);
    background:
        repeating-linear-gradient(-45deg, transparent 0 14px, var(--gray-300) 14px 16px),
        var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-md);
    transition: transform 0.08s, box-shadow 0.08s;
}

@media (max-width: 480px) {

.promo {
        flex-basis: 100%;
        max-width: calc(100% - 6px);
}
    }

/* Pressed in like the buttons (hover-capable devices only) */

@media (hover: hover) {
        .promo:hover {
            transform: translate(3px, 3px);
            box-shadow: 5px 5px 0 var(--hornet-ink);
        }
    }

/* A lone poster gets more room than a row of them */

.promo:only-child {
        max-width: min(calc(var(--r) * var(--row-max-h) * 1.4), calc(100% - 6px));
    }

.promo:active {
        transform: translate(8px, 8px);
        box-shadow: none;
    }

.promo:focus-within {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 4px;
    }

.promo__link {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
}

.promo__image {
    display: block;
    width: 100%;
    height: 100%;
    /* Never cropped: same ratio as the card, except past the clamp (or with a wrong
       width/height in PROMOTIONS), where it's fitted inside the card instead */
    -o-object-fit: contain;
       object-fit: contain;
}

/* Highlighted products: two cards side by side (stacked on phones), on the white grid */
.products {
    padding: 72px 0;
    border-top: var(--border-thick);
    background-color: var(--hornet-white);
    background-image:
        linear-gradient(var(--gray-100) 2px, transparent 2px),
        linear-gradient(90deg, var(--gray-100) 2px, transparent 2px);
    background-size: 40px 40px;
}
@media (min-width: 769px) {
.products {
        padding: 96px 0;
}
    }

.products__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

.products__highlight {
    padding: 0 0.1em;
    background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
}

.products__lead {
    max-width: 38em;
    margin: 0 0 48px;
    font-size: var(--fs-md);
}

@media (min-width: 769px) {

.products__lead {
        font-size: var(--fs-lg);
}
    }

.products__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    /* Room for the cards' hard shadow inside the container */
    padding-right: 14px;
}

@media (min-width: 769px) {

.products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(32px, 4vw, 72px);
}
    }

/* "Lihat semua produk": to the full catalog on /produk */
.products__more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
@media (min-width: 769px) {
.products__more {
        margin-top: 72px;
}
    }

/* Customer reviews: yellow band between the white products and the dark CTA */
.testimonials {
    position: relative;
    padding: 72px 0;
    border-top: var(--border-thick);
    background: var(--hornet-yellow);
    overflow: hidden;
}
@media (min-width: 769px) {
.testimonials {
        padding: 96px 0;
}
    }

/* Ornaments sit behind the content (which is position: relative, later in the DOM) */
.testimonials__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Ink halftone dots fading out from the top-right corner */
.testimonials__halftone {
    position: absolute;
    top: 0;
    right: 0;
    width: min(70%, 720px);
    height: 70%;
    background-image: radial-gradient(var(--hornet-ink) 2px, transparent 2.5px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
    opacity: 0.35;
}

/* Giant outlined quote mark between the title and the stamp (phones: no room) */
.testimonials__bigquote {
    display: none;
    position: absolute;
    top: -0.12em;
    left: 52%;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(240px, 30vw, 520px);
}
@media (min-width: 769px) {
.testimonials__bigquote {
        display: block;
}
    }
.testimonials__bigquote {
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 4px var(--hornet-ink);
    opacity: 0.18;
}

/* Four-point sparkles scattered over the band, twinkling */
.sparkle {
    position: absolute;
    width: 28px;
    height: 28px;
    fill: var(--hornet-white);
    stroke: var(--hornet-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

.sparkle--1 {
    top: 40px;
    left: 46%;
    width: 36px;
    height: 36px;
}

.sparkle--2 {
    top: 30%;
    right: 3%;
    animation-delay: 0.6s;
}

.sparkle--3 {
    bottom: 64px;
    right: 12%;
    width: 22px;
    height: 22px;
    animation-delay: 1.2s;
}

.sparkle--4 {
    bottom: 36%;
    left: 1.5%;
    width: 20px;
    height: 20px;
    fill: var(--hornet-orange);
    animation-delay: 1.8s;
}

@keyframes sparkle-twinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(0.6) rotate(45deg);
    }
}

/* Skewed orange chips, like the ticker separators */
.testimonials__chip {
    position: absolute;
    width: 26px;
    height: 26px;
    background: var(--hornet-orange);
    border: 3px solid var(--hornet-ink);
    transform: skewX(var(--skew));
}

.testimonials__chip--1 {
    top: 22px;
    left: 8%;
}

.testimonials__chip--2 {
    top: 46%;
    right: 1%;
    width: 18px;
    height: 40px;
}

.testimonials__chip--3 {
    bottom: 28px;
    left: 38%;
    width: 40px;
    height: 16px;
    background: var(--hornet-white);
}

@media (prefers-reduced-motion: reduce) {
    .sparkle {
        animation: none;
    }
}

/* Title + lead with the spinning stamp beside them */
.testimonials__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.testimonials__copy {
    min-width: 0;
}

.stamp {
    flex: none;
    width: clamp(96px, 22vw, 200px);
    height: auto;
    margin-right: 8px;
    transform: rotate(-8deg);
    filter: drop-shadow(6px 6px 0 var(--hornet-ink));
}

.stamp__outer {
    fill: var(--hornet-white);
    stroke: var(--hornet-ink);
    stroke-width: 4;
}

.stamp__inner {
    fill: var(--hornet-yellow);
    stroke: var(--hornet-ink);
    stroke-width: 3;
}

.stamp__ring {
    transform-origin: 100px 100px;
    animation: stamp-spin 18s linear infinite;
}

.stamp__text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    fill: var(--hornet-ink);
}

@keyframes stamp-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stamp__ring {
        animation: none;
    }
}

.testimonials__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

/* Ink block behind a word (the yellow marker wouldn't show on the yellow band) */
.testimonials__highlight {
    padding: 0 0.15em;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
}

.testimonials__lead {
    max-width: 38em;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
}

@media (min-width: 769px) {

.testimonials__lead {
        font-size: var(--fs-lg);
}
    }

/* "Jadi mitra" under the lead (left out with reviewsJoinHidden; nothing else moves) */
.testimonials__join {
    margin-top: 24px;
}
@media (min-width: 769px) {
.testimonials__join {
        margin-top: 28px;
}
    }

/* Results gallery: white grid band, a bento of result photos with the product cut out on them */
.results {
    padding: 72px 0;
    background-color: var(--hornet-white);
    background-image:
        linear-gradient(var(--gray-100) 2px, transparent 2px),
        linear-gradient(90deg, var(--gray-100) 2px, transparent 2px);
    background-size: 40px 40px;
}
@media (min-width: 769px) {
.results {
        padding: 96px 0;
}
    }

.results__head {
    margin-bottom: 40px;
}

@media (min-width: 961px) {

.results__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 48px;
}
    }

.results__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

@media (min-width: 961px) {

.results__title {
        margin: 0;
}
    }

.results__highlight {
    padding: 0 0.1em;
    background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
}

.results__lead {
    max-width: 30em;
    margin: 0;
    font-size: var(--fs-md);
}

@media (min-width: 769px) {

.results__lead {
        font-size: var(--fs-lg);
}
    }

/*
 * Bento grid of square tiles; the first tile spans 2x2. Phones: one column, every tile
 * the same. Dense flow fills the holes, whatever the count.
 */
.results__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: dense;
    gap: 28px;
    margin: 0;
    /* Room for the tiles' hard shadow inside the container */
    padding: 0 10px 0 0;
    list-style: none;
}
@media (min-width: 481px) {
.results__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
}
    }
@media (min-width: 961px) {
.results__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
}
    }

.result {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-md);

    /* Two columns: full-width banner. Three columns: 2x2 next to two small tiles */
}

@media (min-width: 481px) {

.result:first-child {
            grid-column: span 2;
    }
        }

@media (min-width: 961px) {

.result:first-child {
            grid-row: span 2;
    }
        }

.result__canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: var(--border-thick);

    /* Tablet up: square tiles. The big one is a 16:9 banner on two columns, and on
       three it stretches to its 2x2 area (rows sized by the small tiles beside it) */
}

@media (min-width: 481px) {

.result__canvas {
        aspect-ratio: 1;
}
    }

@media (min-width: 481px) {

.result:first-child .result__canvas {
            aspect-ratio: 16 / 9;
    }
        }

@media (min-width: 961px) {

.result:first-child .result__canvas {
            aspect-ratio: auto;
    }
        }

.result__photo {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.4s;
}

@media (hover: hover) {
        .result:hover .result__photo {
            transform: scale(1.05);
        }
    }

/* Surface label, skewed chip on the top-left */
.result__surface {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    border: 2px solid var(--hornet-yellow);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
@media (min-width: 769px) {
.result:first-child .result__surface {
            top: 24px;
            left: 24px;
            font-size: var(--fs-lg);
    }
        }

/* Product cutout standing in the bottom-right corner, die-cut like the mascot */
.result__product {
    position: absolute;
    right: 6%;
    bottom: 0;
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result__cutout {
    display: block;
    width: 100%;
    height: auto;
    filter:
        drop-shadow(3px 0 0 var(--hornet-white))
        drop-shadow(-3px 0 0 var(--hornet-white))
        drop-shadow(0 3px 0 var(--hornet-white))
        drop-shadow(0 -3px 0 var(--hornet-white))
        drop-shadow(6px 6px 0 var(--hornet-ink));
    transform: rotate(6deg);
    transform-origin: bottom center;
    transition: transform 0.2s;
}

@media (hover: hover) {
        .result:hover .result__cutout {
            transform: rotate(0deg) translateY(-6px);
        }
    }

.result__code {
    margin: -4px 0 12px;
    padding: 2px 10px;
    background: var(--hornet-yellow);
    border: 2px solid var(--hornet-ink);
    transform: rotate(-4deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

@media (min-width: 769px) {

.result:first-child .result__code {
            margin-bottom: 20px;
            font-size: var(--fs-xl);
    }
        }

.result__caption {
    margin: 0;
    padding: 14px 16px;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
}

@media (min-width: 769px) {

.result__caption {
        font-size: var(--fs-base);
}
    }

.result:first-child .result__caption {
        background: var(--hornet-yellow);
    }

@media (min-width: 769px) {

.result:first-child .result__caption {
            padding: 18px 24px;
            font-size: var(--fs-lg);
    }
        }

@media (prefers-reduced-motion: reduce) {
    .result__photo,
    .result__cutout {
        transition: none;
    }
}

/*
 * Ornaments floating in the empty cells after the last result (counts in Home.tsx): no
 * tile around them, just stickers on the grid background.
 * Hidden by default; --medium shows on two columns, --large on three.
 */
.result-filler {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    /* As tall as the real tile beside it (a filler row always has one). No aspect-ratio:
       with the row taller than the column (photo + caption), it widened the cell past its
       column and pushed everything right */
    align-self: stretch;
}

@media (min-width: 481px) {

.result-filler--medium {
        display: flex;
}
    }

@media (min-width: 961px) {

.result-filler--medium {
        display: none;
}
    }

@media (min-width: 961px) {

.result-filler--large {
        display: flex;
}
    }

/* The hornet painter under the bubble, asking for the next result. Narrower than the cell
   so its paint puffs (out of the nozzle on the right) stay inside it */
.result-filler__sprayer {
    width: 72%;
    margin-right: 8%;
}

.result-filler__bubble {
    position: relative;
    z-index: 1;
    padding: 6px 14px;
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(-6deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(16px, 2vw, 26px);
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Halftone blob behind a shouted sticker */
.result-filler--shine::before {
    content: "";
    position: absolute;
    inset: 12%;
    background-image: radial-gradient(var(--hornet-ink) 2px, transparent 2.5px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
            mask-image: radial-gradient(circle, #000 0%, transparent 68%);
    opacity: 0.35;
}

.result-filler__word {
    position: relative;
    z-index: 1;
    padding: 4px 18px;
    background: var(--hornet-yellow);
    border: var(--border-thick);
    box-shadow: var(--shadow-md);
    transform: rotate(-8deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
    text-transform: uppercase;
}

/* Skewed chips, like the ticker separators */
.result-filler__chip {
    position: absolute;
    background: var(--hornet-orange);
    border: 3px solid var(--hornet-ink);
    transform: skewX(var(--skew));
}

.result-filler__chip--1 {
    top: 14%;
    right: 18%;
    width: 22px;
    height: 22px;
}

.result-filler__chip--2 {
    bottom: 16%;
    right: 10%;
    width: 44px;
    height: 16px;
    background: var(--hornet-yellow);
}

.result-filler__sparkle {
    position: absolute;
    width: 30px;
    height: 30px;
    fill: var(--hornet-yellow);
    stroke: var(--hornet-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

.result-filler__sparkle--1 {
    top: 12%;
    left: 12%;
}

.result-filler__sparkle--2 {
    top: 20%;
    right: 12%;
    width: 20px;
    height: 20px;
    animation-delay: 0.8s;
}

.result-filler__sparkle--3 {
    bottom: 12%;
    left: 22%;
    width: 22px;
    height: 22px;
    animation-delay: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
    .result-filler__sparkle {
        animation: none;
    }
}

/*
 * "Photo shoot in progress", shown instead of the grid while no result has a photo:
 * a camera viewfinder on the set (cans on a plinth hunting focus, then a flash) beside a
 * card with the copy and a contact sheet of the planned shots
 */
.shoot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    /* Room for the hard shadows inside the container */
    padding: 0 14px 14px 0;
}
@media (min-width: 961px) {
.shoot {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: 48px;
}
    }

/* Beside the card from --large, pinned under the header while the card scrolls by */
.shoot__viewfinder {
    position: relative;
}
@media (min-width: 961px) {
.shoot__viewfinder {
        position: sticky;
        top: 120px;
}
    }
.shoot__viewfinder {

    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--hornet-ink);
    background-image: radial-gradient(rgba(255, 255, 0, 0.22) 1.5px, transparent 2px);
    background-size: 12px 12px;
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
}

.shoot__viewfinder > * {
    position: absolute;
}

/* Yellow wedge behind the set, like the poster stages */
.shoot__wedge {
    inset: 0;
    background: var(--hornet-yellow);
    clip-path: polygon(0 34%, 62% 100%, 0 100%);
    opacity: 0.9;
}

.shoot__plinth {
    left: 10%;
    right: 10%;
    bottom: 15%;
    height: 10%;
    background: var(--hornet-yellow);
    border: var(--border-thick);
    box-shadow: var(--shadow-sm);
    transform: skewX(var(--skew));
}

/* The cans standing on the plinth, overlapping a little; size container for the overlap */
.shoot__cans {
    left: 5%;
    right: 5%;
    bottom: 21%;
    height: 38%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    container-type: size;
    animation: shoot-focus 5s ease-in-out infinite;
}
.shoot__cans img {
        flex: none;
        height: 100%;
        width: auto;
        filter:
            drop-shadow(2px 0 0 var(--hornet-white))
            drop-shadow(-2px 0 0 var(--hornet-white))
            drop-shadow(0 2px 0 var(--hornet-white))
            drop-shadow(0 -2px 0 var(--hornet-white))
            drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.55));
    }
.shoot__cans img + img {
        margin-left: -6%;
        margin-left: -14cqh;
    }
/* Wider kits (clear + hardener) stand shorter than the single cans */
.shoot__cans .shoot__can--wide {
        height: 78%;
    }

.shoot__mascot {
    top: 9%;
    right: 7%;
    width: 22%;
}

/* Rule-of-thirds grid of the viewfinder */
.shoot__thirds {
    inset: 0;
    background:
        linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255, 255, 255, 0.28) calc(33.33% - 1px) 33.33%, transparent 33.33% calc(66.66% - 1px), rgba(255, 255, 255, 0.28) calc(66.66% - 1px) 66.66%, transparent 66.66%),
        linear-gradient(transparent calc(33.33% - 1px), rgba(255, 255, 255, 0.28) calc(33.33% - 1px) 33.33%, transparent 33.33% calc(66.66% - 1px), rgba(255, 255, 255, 0.28) calc(66.66% - 1px) 66.66%, transparent 66.66%);
}

.shoot__corner {
    width: 9%;
    aspect-ratio: 1;
    border: 0 solid var(--hornet-white);
}

.shoot__corner--tl {
    top: 6%;
    left: 4.5%;
    border-width: 4px 0 0 4px;
}

.shoot__corner--tr {
    top: 6%;
    right: 4.5%;
    border-width: 4px 4px 0 0;
}

.shoot__corner--bl {
    bottom: 6%;
    left: 4.5%;
    border-width: 0 0 4px 4px;
}

.shoot__corner--br {
    bottom: 6%;
    right: 4.5%;
    border-width: 0 4px 4px 0;
}

/* Autofocus box on the middle can: white while hunting, yellow once it locks */
.shoot__focus {
    left: 50%;
    top: 60%;
    width: 18%;
    aspect-ratio: 1;
    border: 3px solid var(--hornet-white);
    transform: translate(-50%, -50%);
    animation: shoot-focus-box 5s ease-in-out infinite;
}

.shoot__rec,
.shoot__count,
.shoot__readout {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(11px, 1.6vw, 16px);
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--hornet-white);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--hornet-ink);
}

.shoot__rec {
    top: 8%;
    left: 15.5%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shoot__rec::before {
        content: "";
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        background: var(--hornet-orange);
        border: 2px solid var(--hornet-ink);
        animation: shoot-blink 1s steps(1) infinite;
    }

.shoot__count {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.shoot__readout {
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Camera flash right after the focus locks */
.shoot__flash {
    inset: 0;
    background: var(--hornet-white);
    opacity: 0;
    pointer-events: none;
    animation: shoot-flash 5s ease-out infinite;
}

@keyframes shoot-focus {
    0% {
        filter: blur(5px);
    }

    14% {
        filter: blur(1px);
    }

    24% {
        filter: blur(3px);
    }

    36%,
    92% {
        filter: blur(0);
    }

    100% {
        filter: blur(5px);
    }
}

@keyframes shoot-focus-box {
    0%,
    34% {
        border-color: var(--hornet-white);
        transform: translate(-50%, -50%) scale(1.15);
    }

    38%,
    88% {
        border-color: var(--hornet-yellow);
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        border-color: var(--hornet-white);
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes shoot-flash {
    0%,
    44% {
        opacity: 0;
    }

    46% {
        opacity: 0.9;
    }

    62%,
    100% {
        opacity: 0;
    }
}

@keyframes shoot-blink {
    50% {
        opacity: 0;
    }
}

/* Copy card beside the viewfinder */
.shoot__copy {
    padding: 24px 20px 28px;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-md);
}
@media (min-width: 769px) {
.shoot__copy {
        padding: 32px;
}
    }

/* "On air"-style sign with a blinking bulb */
.shoot__sign {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    border: var(--border);
    box-shadow: 4px 4px 0 var(--hornet-orange);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.shoot__bulb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hornet-orange);
    box-shadow: 0 0 8px 2px var(--hornet-orange);
    animation: shoot-blink 1.2s steps(1) infinite;
}

.shoot__title {
    margin: 20px 0 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
    text-transform: uppercase;
}

.shoot__text {
    margin: 0 0 24px;
    font-size: var(--fs-base);
    line-height: 1.55;
}

@media (min-width: 769px) {

.shoot__text {
        font-size: var(--fs-md);
}
    }

.shoot__strip-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shoot__strip-label span {
        color: var(--gray-700);
    }

/* Contact sheet on a film strip: sprocket holes top and bottom */
.shoot__strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 24px;
    padding: 22px 10px;
    list-style: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 8px, var(--hornet-white) 8px 18px) top 6px left 0 / 100% 9px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 8px, var(--hornet-white) 8px 18px) bottom 6px left 0 / 100% 9px no-repeat,
        var(--hornet-ink);
    border: var(--border);
}
@media (min-width: 481px) {
.shoot__strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
}
    }

.shoot__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    aspect-ratio: 4 / 3;
    padding: 8px;
    background:
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.06) 8px 10px),
        #3a2c2e;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.shoot__frame-no {
    position: absolute;
    top: 6px;
    left: 8px;
    color: var(--hornet-orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.shoot__frame-surface {
    overflow: hidden;
    color: var(--hornet-white);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.shoot__frame-code {
    overflow: hidden;
    color: var(--hornet-yellow);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shoot__frame-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 6px;
    background: var(--hornet-yellow);
    color: var(--hornet-ink);
    border: 2px solid var(--hornet-ink);
    transform: rotate(6deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shoot__invite {
    margin: 0 0 16px;
    font-weight: 700;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .shoot__cans,
    .shoot__focus,
    .shoot__flash,
    .shoot__bulb,
    .shoot__rec::before {
        animation: none;
    }

    .shoot__focus {
        border-color: var(--hornet-yellow);
    }
}

/* Partner workshops: yellow band between the white results and the dark CTA */
.partners-band {
    padding: 72px 0;
    border-top: var(--border-thick);
    background: var(--hornet-yellow);
}
@media (min-width: 769px) {
.partners-band {
        padding: 96px 0;
}
    }

.partners-band__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 36px;
}

.partners-band__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

/* Ink block behind a word (the yellow marker wouldn't show on the yellow band) */
.partners-band__highlight {
    padding: 0 0.15em;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
}

.partners-band__lead {
    max-width: 34em;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
}

@media (min-width: 769px) {

.partners-band__lead {
        font-size: var(--fs-lg);
}
    }

.partners-band__join {
    flex: none;
    margin-right: 8px;
}

/* FAQ: white band before the CTA; intro on the left, accordion on the right */
.faq {
    /* Positions the mascot following the mouse */
    position: relative;
    padding: 72px 0;
    border-top: var(--border-thick);
    background: var(--hornet-white);
}
@media (min-width: 769px) {
.faq {
        padding: 96px 0;
}
    }

.faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

@media (min-width: 961px) {

.faq__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: clamp(48px, 6vw, 120px);
}
    }

/* Intro stays in view while the long list scrolls past (desktop) */
@media (min-width: 961px) {
.faq__intro {
        position: sticky;
        top: 120px;
}
    }

.faq__title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

.faq__highlight {
    padding: 0 0.1em;
    background: linear-gradient(transparent 55%, var(--hornet-yellow) 55%);
}

.faq__lead {
    max-width: 26em;
    margin: 0 0 28px;
    font-size: var(--fs-md);
}

@media (min-width: 769px) {

.faq__lead {
        font-size: var(--fs-lg);
}
    }

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Room for the items' hard shadow */
    padding-right: 8px;
}

.faq-item {
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}

.faq-item[open] {
        box-shadow: var(--shadow-md);
    }

/* Lifts off the page while its question is hovered */

@media (hover: hover) {
        .faq-item:has( > .faq-item__question:hover) {
            transform: translate(-3px, -3px);
            box-shadow: var(--shadow-md);
        }

        .faq-item[open]:has( > .faq-item__question:hover) {
            box-shadow: var(--shadow-lg);
        }
    }

.faq-item__question {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    /* Skewed yellow wipe, parked off to the right until hovered */
    background-image: linear-gradient(100deg, var(--hornet-yellow) 50%, transparent 50%);
    background-size: 250% 100%;
    background-position: 100% 0;
    transition: background-position 0.3s ease-out;

    /* Hide the default disclosure triangle */
}

.faq-item__question::-webkit-details-marker {
        display: none;
    }

.faq-item[open] .faq-item__question {
        background: var(--hornet-yellow);
        border-bottom: var(--border);
    }

@media (hover: hover) {
        .faq-item__question:hover {
            background-position: 0 0;
        }

        .faq-item__question:hover .faq-item__number {
            color: var(--hornet-ink);
        }
    }

.faq-item__question:focus-visible {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 3px;
    }

.faq-item__number {
    flex: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-lg);
    color: var(--gray-500);
    transition: color 0.2s;
}

.faq-item[open] .faq-item__number {
        color: var(--hornet-ink);
    }

.faq-item__text {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: var(--fs-base);
    line-height: 1.35;
}

@media (min-width: 769px) {

.faq-item__text {
        font-size: var(--fs-md);
}
    }

/* Skewed ink chip with a plus that turns into a minus when open */
.faq-item__toggle {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    background: var(--hornet-ink);
    transform: skewX(var(--skew));
}
.faq-item__toggle::before,.faq-item__toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 3px;
        background: var(--hornet-yellow);
        transform: translate(-50%, -50%) skewX(calc(var(--skew) * -1));
        transition: transform 0.2s;
    }
.faq-item__toggle::after {
        transform: translate(-50%, -50%) skewX(calc(var(--skew) * -1)) rotate(90deg);
    }
.faq-item[open] .faq-item__toggle::after {
        transform: translate(-50%, -50%) skewX(calc(var(--skew) * -1)) rotate(0deg);
    }

.faq-item__answer {
    margin: 0;
    padding: 16px 18px 20px 52px;
    font-size: var(--fs-base);
    line-height: 1.6;
    /* Line breaks in an answer (e.g. a list of shops) show as new lines */
    white-space: pre-line;
}

@media (min-width: 769px) {

.faq-item__answer {
        font-size: var(--fs-md);
}
    }

/* An answer followed by logo rows: tighter below, the rows carry the bottom padding */
.faq-item__answer--lead {
    padding-bottom: 12px;
}

.faq-item__channels {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0 18px 22px 52px;
    list-style: none;
}

.faq-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-base);
    line-height: 1.4;
}

@media (min-width: 769px) {

.faq-channel {
        font-size: var(--fs-md);
}
    }

/* Logo on a white square chip with an ink border and hard shadow, like the site's
   stickers; the storefront (no logo of its own) gets the yellow one */
.faq-channel__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--hornet-white);
    border: var(--border);
    box-shadow: 3px 3px 0 var(--hornet-ink);
}
.faq-channel__icon img,.faq-channel__icon svg {
        display: block;
        width: 24px;
        height: 24px;
    }

.faq-channel__icon--store {
    background: var(--hornet-yellow);
}

/* Contact CTA */
.cta {
    padding: 72px 0;
    border-top: 8px solid var(--hornet-yellow);
    background: var(--hornet-ink);
    color: var(--hornet-white);
}
@media (min-width: 769px) {
.cta {
        padding: 96px 0;
}
    }

/* Copy and contact card side by side from --tablet (the card's column narrower until --large),
   stacked and centered on phones */
.cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}
@media (min-width: 701px) {
.cta__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        gap: 32px;
}
    }
@media (min-width: 961px) {
.cta__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        gap: clamp(48px, 6vw, 120px);
}
    }

/* Phones: full width like every other section, as wide as the contact card under it (which
   leaves 10px for its hard shadow), so the title and text start on the card's left edge and
   the painter ends on its right edge */
.cta__copy {
    width: calc(100% - 10px);
    min-width: 0;
}
@media (min-width: 701px) {
.cta__copy {
        width: auto;
}
    }

/* Holds the title and, below --large, the painter beside it */
.cta__heading {
    --title-size: clamp(40px, 5vw, 72px);
    position: relative;
    margin: 0 0 16px;
}

.cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--title-size);
    line-height: 0.9;
    color: var(--hornet-yellow);
    text-transform: uppercase;
}

.cta__message {
    max-width: 34em;
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--hornet-on-dark);
}

/* The hornet painter. From --tablet under the copy, aiming its spray gun at the contact card
   beside it. Phones stack the card under the copy, where a painter between them pushed the
   card ~300px away: there it stands beside the title instead, flipped and tilted so the gun
   points at it, as on /produk */
.cta__sprayer--below {
    display: none;
}
@media (min-width: 701px) {
.cta__sprayer--below {
        display: block;
        width: 70%;
        max-width: 400px;
        margin-top: 40px;
}
    }

.cta__sprayer--title {
    /* At the copy's right edge, which is the contact card's right edge (see .cta__copy), so the
       copy and the card line up evenly; as wide as the room after the title's longest line
       ("LEBIH LANJUT?", 6.25em) and 12px of air allows, up to 110px (~54px on a 360px phone,
       ~84px at 390). Centered on the two title lines */
    --after-title: calc(var(--title-size) * 6.3 + 12px);
    position: absolute;
    top: 50%;
    right: 0;
    width: min(110px, calc(100% - var(--after-title)));
    transform: translateY(-50%) rotate(-8deg);
}

@media (min-width: 701px) {

.cta__sprayer--title {
        display: none;
}
    }

/*
 * Contact card: white panel with a hard yellow shadow on the dark band. The WhatsApp
 * button spans the card, so long contact details never push it around.
 */
/* Full width under the copy on phones, the right column beside it from --tablet; always
   10px short, the room its hard shadow sticks out on the right */
.contact-card {
    position: relative;
    width: calc(100% - 10px);
    padding: 36px 24px 24px;
    background: var(--hornet-white);
    color: var(--hornet-ink);
    border: var(--border);
    box-shadow: 10px 10px 0 var(--hornet-yellow);
}
@media (min-width: 961px) {
.contact-card {
        padding: 40px 28px 28px;
}
    }

/* Large phones / small tablets, where the card spans a wide screen: the two buttons side by
   side (the contact rows still under them), so the card stays short */
@media (min-width: 561px) and (max-width: 700px) {
    .contact-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        -moz-column-gap: 24px;
             column-gap: 24px;
        align-items: start;
    }

    .contact-card .contact-card__shop {
        margin-top: 0;
    }

    .contact-card__list {
        grid-column: 1 / -1;
    }
}

/* Tag sitting on the card's top edge */
.contact-card__tag {
    position: absolute;
    top: -18px;
    left: 20px;
    padding: 6px 14px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    border: 3px solid var(--hornet-yellow);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.contact-card__whatsapp,
.contact-card__shop {
    display: block;
    text-align: center;
}

.contact-card__shop {
    margin-top: 18px;
}

.contact-card__list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.contact-card__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    -moz-column-gap: 14px;
         column-gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 2px solid var(--hornet-ink);
}

.contact-card__row:last-child {
        padding-bottom: 0;
    }

.contact-card__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--hornet-yellow);
    border: 2px solid var(--hornet-ink);
    transform: skewX(var(--skew));
}

.contact-card__icon svg {
        width: 22px;
        height: 22px;
        stroke: var(--hornet-ink);
        transform: skewX(calc(var(--skew) * -1));
    }

.contact-card__label {
    grid-area: label;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.contact-card__value {
    grid-area: value;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--hornet-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

@media (min-width: 481px) {

.contact-card__value {
        font-size: var(--fs-md);
}
    }

.contact-card__value:hover {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-decoration-color: var(--hornet-yellow);
        text-underline-offset: 4px;
    }

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

.catalog-head__inner,
.catalog__inner,
.catalog-help__inner {
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/*
 * Page heading: a dark stage dressed like the brand posters (yellow halftone, yellow wedges,
 * white slashes), the copy on the left and the hoverable can lineup on the right (under the
 * copy on phones)
 */
.catalog-head {
    position: relative;
    padding: 48px 0 56px;
    overflow: hidden;
    background:
        radial-gradient(circle, rgb(255 255 0 / 0.14) 1.6px, transparent 2px) 0 0 / 16px 16px,
        var(--hornet-ink);
    color: var(--hornet-white);
}
@media (min-width: 769px) {
.catalog-head {
        padding: 72px 0 80px;
}
    }

.catalog-head__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.catalog-head__wedge {
    position: absolute;
    background: var(--hornet-yellow);
    transform: skewX(var(--skew));
}

/* Behind the lineup, so the die-cut cans stand half on yellow like on the posters; from
   --medium only, on phones it would just float beside the title */
.catalog-head__wedge--top {
    display: none;
}
@media (min-width: 769px) {
.catalog-head__wedge--top {
        display: block;
        top: 0;
        right: -8%;
        width: 30%;
        height: 64%;
}
    }

/* Only where the gutter beside the copy is wide enough for it */
.catalog-head__wedge--bottom {
    display: none;
}
@media (min-width: 1201px) {
.catalog-head__wedge--bottom {
        display: block;
        bottom: 0;
        left: -2%;
        width: 5%;
        height: 46%;
}
    }

/* From --medium: on phones the tag sits where they would go */
.catalog-head__slashes {
    display: none;
    position: absolute;
    top: 7%;
    right: 30%;
    width: 120px;
    height: 16px;
    background: repeating-linear-gradient(90deg, var(--hornet-white) 0 14%, transparent 14% 26%);
    transform: skewX(-35deg);
}
@media (min-width: 769px) {
.catalog-head__slashes {
        display: block;
        width: 180px;
        height: 22px;
}
    }

@media (min-width: 769px) {

.catalog-head__inner {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 40px;
        align-items: center;
}
    }

.catalog-head__copy {
    position: relative;
}

.catalog-head__tag {
    display: inline-block;
    margin-bottom: 24px;
    padding: 8px 18px;
    background: var(--hornet-yellow);
    color: var(--hornet-ink);
    box-shadow: 5px 5px 0 var(--hornet-orange);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

@media (min-width: 769px) {

.catalog-head__tag {
        font-size: var(--fs-md);
}
    }

/* The title with, on phones, the hornet vertically centered beside it */
.catalog-head__heading {
    position: relative;
    margin: 0 0 24px;
}

.catalog-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(52px, 8vw, 128px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.catalog-head__title-line {
    display: block;

    /* The last line in yellow with a hard orange shadow */
}

.catalog-head__title-line:last-child {
        color: var(--hornet-yellow);
        text-shadow: 6px 6px 0 var(--hornet-orange);
    }

.catalog-head__lead {
    max-width: 30em;
    margin: 0 0 28px;
    font-size: var(--fs-md);
    font-weight: 500;
    /* Room for the highlighter strokes between lines */
    line-height: 1.8;
    color: var(--hornet-on-dark);
}

@media (min-width: 769px) {

.catalog-head__lead {
        font-size: var(--fs-lg);
        line-height: 1.75;
}
    }

/* Product names in the lead (*...* in products.json): the name in the display font on a
   slanted yellow highlighter stroke */
.catalog-head__mark {
    position: relative;
    z-index: 0;
    display: inline-block;
    margin: 0 8px 0 6px;
    background: none;
    color: var(--hornet-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (min-width: 769px) {
.catalog-head__mark {
        margin: 0 10px 0 8px;
}
    }
.catalog-head__mark::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 14%;
        bottom: 2%;
        left: -5px;
        right: -5px;
        background: var(--hornet-yellow);
        box-shadow: 3px 3px 0 var(--hornet-orange);
        transform: skewX(var(--skew)) rotate(-1.5deg);
    }
@media (min-width: 769px) {
.catalog-head__mark::before {
            left: -6px;
            right: -6px;
    }
        }

/* A highlighted word that leads to its product's card: lifts on hover, pressed on click */
.catalog-head__mark--link {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.catalog-head__mark--link::before {
        transition: box-shadow 0.15s ease;
    }
.catalog-head__mark--link:hover {
        transform: translate(-2px, -2px);
    }
.catalog-head__mark--link:hover::before {
            box-shadow: 5px 5px 0 var(--hornet-orange);
        }
.catalog-head__mark--link:active {
        transform: translate(2px, 2px);
    }
.catalog-head__mark--link:active::before {
            box-shadow: 0 0 0 var(--hornet-orange);
        }
.catalog-head__mark--link:focus-visible {
        outline: 3px solid var(--hornet-white);
        outline-offset: 4px;
    }
@media (prefers-reduced-motion: reduce) {
.catalog-head__mark--link {
        transition: none;
}
    }

/* Count stamp: a big yellow number in a tilted white frame */
.catalog-head__count {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 18px 6px;
    border: 3px solid var(--hornet-white);
    box-shadow: 5px 5px 0 var(--hornet-yellow);
    transform: rotate(-3deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.catalog-head__count strong {
        font-size: 48px;
        line-height: 1;
        letter-spacing: 0;
        color: var(--hornet-yellow);
    }

/*
 * Every product's die-cut cutout: the first half of the catalog in front, the rest on a
 * raised row behind it, standing on a yellow plinth like the home hero stage. Sized from
 * its own width.
 */
.catalog-head__lineup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
    margin: 72px auto 8px;
    container-type: inline-size;
    /* Height of a front-row can */
    --can: 120px;
    --can: 36cqi;
}
@media (min-width: 769px) {
.catalog-head__lineup {
        max-width: none;
        margin: 24px 0 0;
        --can: 180px;
        --can: min(36cqi, 250px);
}
    }

/* The hornet painter, flipped to face left and tilted so its spray gun points down at the
   cans (or the title, on phones), the paint puffs flying toward them */
.catalog-head__sprayer {
    position: absolute;
    z-index: 2;
    transform: rotate(-8deg);
}

.catalog-head__sprayer--title {
    /* Grows with the phone (~108px at 360, ~129px at 430) so a wide phone has no big gap
       beside the title; margin-top is half its height (art is 647x561) to center it */
    --sprayer-w: clamp(100px, 30vw, 130px);

    /* The narrowest phones: at 100px its spray gun touched the title's period */
}

@media (max-width: 320px) {

.catalog-head__sprayer--title {
        --sprayer-w: 80px;
}
    }

/* Tablets up to --medium still use this layout, with plenty of room beside the title */

@media (min-width: 481px) {

.catalog-head__sprayer--title {
        --sprayer-w: clamp(130px, 26vw, 200px);
}
    }

.catalog-head__sprayer--title {
    top: 50%;
    right: 0;
    width: var(--sprayer-w);
    margin-top: calc(var(--sprayer-w) * -0.434);
}

@media (min-width: 769px) {

.catalog-head__sprayer--title {
        display: none;
}
    }

/* Heavier than the old flying mascot (0.62 of a can), so a bit wider and higher */
.catalog-head__sprayer--lineup {
    display: none;
}
@media (min-width: 769px) {
.catalog-head__sprayer--lineup {
        display: block;
        top: calc(var(--can) * -0.5);
        right: calc(var(--can) * -0.1);
        width: calc(var(--can) * 0.9);
}
    }

.catalog-head__row {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Raised row behind: smaller, and its lower part hidden behind the front row */
    --row-can: calc(var(--can) * 0.8);
    margin-bottom: calc(var(--can) * -0.2);
}

.catalog-head__row--front {
    --row-can: var(--can);
    margin-bottom: 0;
}

/* Inside the front row, so it is always as wide as the cans standing on it */
.catalog-head__plinth {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: calc(var(--can) * -0.08);
    height: calc(var(--can) * 0.2);
    background: var(--hornet-yellow);
    border: var(--border-thick);
    box-shadow: 8px 8px 0 var(--hornet-orange);
    transform: skewX(var(--skew));
}

.catalog-head__can {
    position: relative;
    display: block;
    /* Neighbours overlap a little, like cans lined up on a shelf */
    margin: 0 calc(var(--row-can) * -0.05);
    transition: transform 0.2s ease;
}

.catalog-head__can img {
        display: block;
        /* Sized from the cutout's ratio (set inline), so the row is laid out before it loads */
        width: calc(var(--row-can) * var(--ratio, 1));
        height: var(--row-can);
        /* Die-cut white outline, then a hard ink shadow, like the home lineup */
        filter:
            drop-shadow(3px 0 0 var(--hornet-white))
            drop-shadow(-3px 0 0 var(--hornet-white))
            drop-shadow(0 3px 0 var(--hornet-white))
            drop-shadow(0 -3px 0 var(--hornet-white))
            drop-shadow(6px 6px 0 var(--hornet-ink));
        /* Each can on its own layer, its outline drawn once: painted together, phones
           (Chrome on Android) kept redrawing the edge where two cans overlap, so the white
           outline between the back-row cans flickered */
        will-change: transform;
    }

/* Only with a real pointer: on phones a tap left the can lifted until the next tap */

@media (hover: hover) {
        .catalog-head__can:hover {
            z-index: 1;
            transform: translateY(-8px);
        }
    }

@media (prefers-reduced-motion: reduce) {

.catalog-head__can {
        transition: none;
}

        .catalog-head__can:hover {
            transform: none;
        }
    }

/* Code sticker shown on the hovered can */
.catalog-head__code {
    position: absolute;
    left: 50%;
    top: 12%;
    padding: 4px 10px;
    background: var(--hornet-yellow);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-base);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--hornet-ink);
    opacity: 0;
    transform: translateX(-50%) rotate(-4deg);
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.catalog-head__can:hover .catalog-head__code {
        opacity: 1;
    }

/* Product codes scrolling on a yellow band between the heading and the catalog */
.catalog-ticker {
    padding: 12px 0;
    background: var(--hornet-yellow);
    border-top: var(--border-thick);
    border-bottom: var(--border-thick);
    overflow: hidden;
}

.catalog-ticker__track {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    animation: catalog-ticker 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

.catalog-ticker__track {
        animation: none;
}
    }

.catalog-ticker__group {
    display: flex;
}

.catalog-ticker__item {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--hornet-ink);
    text-transform: uppercase;
    white-space: nowrap;

    /* Skewed ink chip between codes */
}

.catalog-ticker__item::after {
        content: "";
        width: 16px;
        height: 16px;
        margin: 0 24px;
        background: var(--hornet-ink);
        transform: skewX(var(--skew));
    }

@keyframes catalog-ticker {
    to {
        transform: translateX(-50%);
    }
}

/* Catalog grid on the white grid paper of the home products section */
.catalog {
    padding: 56px 0 72px;
    background-color: var(--hornet-white);
    background-image:
        linear-gradient(var(--gray-100) 2px, transparent 2px),
        linear-gradient(90deg, var(--gray-100) 2px, transparent 2px);
    background-size: 40px 40px;
}
@media (min-width: 769px) {
.catalog {
        padding: 80px 0 96px;
}
    }

/* 1 / 2 / 3 columns. Cards are always a column wide and rows are centered, so a last row
   with fewer products than columns (or a catalog smaller than a row) has no hole */
.catalog__grid {
    --gap: 48px;
    --columns: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}
.catalog__grid > * {
        width: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
    }
.catalog__grid {

    /* Room for the cards' hard shadow inside the container */
    padding-right: 14px;
}
@media (min-width: 769px) {
.catalog__grid {
        --gap: clamp(32px, 4vw, 56px);
        --columns: 2;
}
    }
/* Small tablets (--tablet up to --large): two columns made the cards ~330px wide, tall
       with a small photo; one card per row instead, photo beside the text (below) */
@media (min-width: 701px) and (max-width: 960px) {
.catalog__grid {
        --columns: 1;
}
    }
/* Three only once the container widens (--xxlarge): below that a third column made the
       cards ~330px wide, too narrow for their name and description */
@media (min-width: 1601px) {
.catalog__grid {
        --columns: 3;
}
    }

/* Wide single-column card: the photo on the left, the canvas as tall as the card; the photo
   is shown whole (a kit of two cans would lose one to cropping), vertically centered on ink,
   the color of its stage, so a text taller than the photo leaves no white gap */
@media (min-width: 701px) and (max-width: 960px) {
    .catalog__grid .product {
        flex-direction: row;
    }

    .catalog__grid .product__canvas {
        flex: 0 0 50%;
        aspect-ratio: auto;
        min-height: 0;
        border-bottom: 0;
        border-right: var(--border-thick);
        background: var(--hornet-ink);
    }

        :is(.catalog__grid .product__canvas)  > img {
            position: absolute;
            inset: 0;
            -o-object-fit: contain;
               object-fit: contain;
        }

    .catalog__grid .product__photo--placeholder {
        position: absolute;
        inset: 0;
    }
}

/* The card a highlighted word in the lead led to: a yellow ring with an ink edge around it
   (on top of its hard shadow) that pulses twice, then fades */
.catalog .product--spotlight {
    animation: catalog-spotlight 1.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.catalog .product--spotlight {
        animation-name: catalog-spotlight-still;
}
    }

@keyframes catalog-spotlight {
    0%, 40% {
        box-shadow: 0 0 0 8px var(--hornet-yellow), 0 0 0 12px var(--hornet-ink), var(--shadow-lg);
    }

    20%, 60% {
        box-shadow: 0 0 0 16px var(--hornet-yellow), 0 0 0 20px var(--hornet-ink), var(--shadow-lg);
    }

    100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, var(--shadow-lg);
    }
}

/* Reduced motion: the ring just shows, then fades */
@keyframes catalog-spotlight-still {
    0%, 70% {
        box-shadow: 0 0 0 8px var(--hornet-yellow), 0 0 0 12px var(--hornet-ink), var(--shadow-lg);
    }

    100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, var(--shadow-lg);
    }
}

/* "Bingung pilih yang mana?": dark band with WhatsApp and Shopee */
.catalog-help {
    padding: 56px 0;
    border-top: 8px solid var(--hornet-yellow);
    background: var(--hornet-ink);
    color: var(--hornet-white);
}
@media (min-width: 769px) {
.catalog-help {
        padding: 72px 0;
}
    }

.catalog-help__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 961px) {

.catalog-help__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
}
    }

.catalog-help__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 0.95;
    color: var(--hornet-yellow);
    text-transform: uppercase;
}

.catalog-help__message {
    max-width: 32em;
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--hornet-on-dark);
}

.catalog-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-shrink: 0;
}

:root {

    /*
     * Hornet brand palette, sampled from public/assets/logo-bordered.webp.
     * Everything else references these tokens.
     */
    --hornet-yellow: #ffff00;
    --hornet-ink: #271b1d;
    --hornet-white: #ffffff;
    --hornet-orange: #f9aa52;
    --hornet-on-dark: #e9e4e5;

    /*
     * Neo-brutalism: thick ink borders, hard shadows with no blur,
     * action elements skewed like the logo frame, no border radius.
     */
    --border: 3px solid var(--hornet-ink);
    --border-thick: 4px solid var(--hornet-ink);
    --shadow-sm: 5px 5px 0 var(--hornet-ink);
    --shadow-md: 8px 8px 0 var(--hornet-ink);
    --shadow-lg: 14px 14px 0 var(--hornet-ink);
    --skew: -12deg;

    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f1f3f5;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;

    /*
     * Fonts. Display (headings, buttons, tags, stickers): Roboto Condensed, closest to the
     * logo wordmark, self-hosted and italic only, so always pair it with font-style: italic.
     * Body: Helvetica (system font, falls back to Arial where not installed).
     */
    --font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-4xl: 48px;
    --fs-6xl: 72px;

    /* Content width and side gutter; both grow on large monitors (see below) */
    --container: 1280px;
    --gutter: 16px;
}
/* Wide enough for two columns of content side by side (768px tablets included) */
/* Everything below --medium (phones and small tablets) */

@media (min-width: 769px) {

:root {
        --gutter: 32px;
}
    }

@media (min-width: 1201px) {

:root {
        --gutter: 48px;
}
    }

/* 24" and up: use most of the screen instead of a narrow centered column */

@media (min-width: 1601px) {

:root {
        --container: min(86vw, 1800px);
        --gutter: 64px;
}
    }

.detail__inner {
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Product: photo and details side by side from --large, on a yellow slab like the hero */
.detail {
    position: relative;
    padding: 28px 0 72px;
    overflow: hidden;
}
.detail::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8%;
        width: 70%;
        background: var(--hornet-yellow);
        transform: skewX(var(--skew));
        transform-origin: top left;
    }
@media (min-width: 961px) {
.detail::before {
            width: 50%;
    }
        }
@media (min-width: 769px) {
.detail {
        padding: 36px 0 96px;
}
    }

.detail__crumbs {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-md);
    text-transform: uppercase;
}

.detail__crumbs a {
        color: var(--hornet-ink);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

@media (min-width: 769px) {

.detail__crumbs {
        margin-bottom: 40px;
}
    }

.detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

@media (min-width: 961px) {

.detail__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(48px, 6vw, 120px);
}
    }

.detail__media {
    min-width: 0;
    /* Room for the hard shadow */
    padding-right: 14px;
}

@media (min-width: 961px) {

.detail__media {
        position: sticky;
        /* Under the sticky header */
        top: 120px;
}
    }

/* Square canvas; --swatch is the chosen color. Stacked (below --large) it's capped to fit
   the screen under the header, so a color tap can bring the whole photo into view */
.detail__canvas {
    --swatch: var(--hornet-yellow);
    position: relative;
    aspect-ratio: 1;
    max-width: max(280px, calc(100vh - 140px));
    max-width: max(280px, calc(100svh - 140px));
    margin: 0 auto;
}
@media (min-width: 961px) {
.detail__canvas {
        max-width: none;
}
    }
.detail__canvas {

    /* The photos' own stage (ink with a dotted halftone), so the canvas never shows a white
       box while the first photo loads */
    background:
        radial-gradient(circle, rgb(255 255 0 / 0.14) 1.5px, transparent 2px) 0 0 / 22px 22px,
        var(--hornet-ink);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
}

/* A color switch: the current photo stays up, dimmed while the next one loads, and the next
   fades in over it once decoded (usePhotoSwap in ProductDetail.tsx) */
.detail__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transition: filter 0.2s ease;
}

.detail__photo--in {
    animation: detail-photo-in 0.22s ease-out;
}

@keyframes detail-photo-in {
    from {
        opacity: 0;
    }
}

.detail__canvas--waiting .detail__photo {
    filter: brightness(0.7) saturate(0.6);
}

/* Hazard-striped bar along the top edge, sliding while the next photo loads */
.detail__loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    border-bottom: var(--border);
    background: repeating-linear-gradient(-45deg, var(--hornet-yellow) 0 12px, var(--hornet-ink) 12px 24px) 0 0 / 34px 100%;
    opacity: 0;
    transform: translateY(-100%);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    animation: detail-loading 0.6s linear infinite;
}

.detail__canvas--waiting .detail__loading {
    opacity: 1;
    transform: none;
}

@keyframes detail-loading {
    to {
        background-position: 34px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Still runs (1ms) so animationend clears the photo beneath */
    .detail__photo--in {
        animation-duration: 1ms;
    }

    .detail__loading {
        animation: none;
    }
}

/* No photo yet: the chosen color fills the canvas under ink hatching, with the hornet
   mark die-cut on top (white outline + hard shadow), so a swatch click visibly changes it */
.detail__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(-45deg, transparent 0 18px, rgb(39 27 29 / 0.12) 18px 20px),
        var(--swatch);
    transition: background-color 0.2s ease;
}
.detail__placeholder img {
        width: 58%;
        height: auto;
        filter:
            drop-shadow(3px 0 0 var(--hornet-white))
            drop-shadow(-3px 0 0 var(--hornet-white))
            drop-shadow(0 3px 0 var(--hornet-white))
            drop-shadow(0 -3px 0 var(--hornet-white))
            drop-shadow(6px 6px 0 var(--hornet-ink));
    }

.detail__sticker {
    position: absolute;
    left: -10px;
    top: 24px;
    padding: 8px 16px;
    background: var(--hornet-yellow);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}

@media (min-width: 769px) {

.detail__sticker {
        left: -18px;
        font-size: 32px;
}
    }

/* Name of the chosen color, tagged on the photo */
.detail__color-chip {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--hornet-white);
    border: var(--border);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    text-transform: uppercase;
}
.detail__color-chip::before {
        content: "";
        width: 18px;
        height: 18px;
        background: var(--swatch);
        border: 2px solid var(--hornet-ink);
    }
@media (min-width: 769px) {
.detail__color-chip {
        font-size: var(--fs-md);
}
    }

.detail__info {
    min-width: 0;
    /* The product name is sized from this column (cqi) */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-lg);
    margin-right: 14px;
}

@media (min-width: 481px) {

.detail__info {
        padding: 36px 32px;
}
    }

.detail__tag {
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 4px 12px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.detail__name {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(40px, 5vw, 72px);
    /* Never wider than the column allows for two lines of a long name (its longer half is
       about 6.7em: "Hörnet Racing", "Thinner PU 900"), so it never runs to three */
    font-size: min(clamp(40px, 5vw, 72px), 14cqi);
    line-height: 0.95;
    text-transform: uppercase;
}

.detail__text {
    margin: 0 0 28px;
    font-size: var(--fs-md);
    line-height: 1.6;
}

/* Color picker: radio buttons drawn as skewed swatches */
.colors {
    margin: 0 0 28px;
    padding: 20px 0 0;
    border: 0;
    border-top: 2px solid var(--hornet-ink);
}

.colors__legend {
    float: left;
    width: 100%;
    margin-bottom: 16px;
    padding: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}

.colors__count {
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--hornet-yellow);
    border: 2px solid var(--hornet-ink);
    font-size: var(--fs-sm);
    vertical-align: middle;
}

.colors__list {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-left: 6px;
}

.swatch {
    position: relative;
    cursor: pointer;
}

/* Kept in the accessibility tree and focusable, just not visible */
.swatch__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.swatch__chip {
    display: block;
    width: 52px;
    height: 44px;
    background: var(--swatch);
    border: var(--border);
    box-shadow: 4px 4px 0 var(--hornet-ink);
    transform: skewX(var(--skew));
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.swatch:hover .swatch__chip {
        transform: skewX(var(--skew)) translate(-2px, -2px);
        box-shadow: 6px 6px 0 var(--hornet-ink);
    }

/* Chosen: pressed in, with an ink ring around it */

.swatch__input:checked + .swatch__chip {
        transform: skewX(var(--skew)) translate(4px, 4px);
        box-shadow: none;
        outline: 3px solid var(--hornet-ink);
        outline-offset: 4px;
    }

.swatch__input:focus-visible + .swatch__chip {
        outline: 3px solid var(--hornet-orange);
        outline-offset: 4px;
    }

.colors__selected {
    margin: 18px 0 0;
    font-size: var(--fs-md);
}

.colors__selected strong {
        font-weight: 700;
    }

.detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}

/* Other products, on the white grid paper like /produk */
.detail-others {
    padding: 56px 0 72px;
    background-color: var(--hornet-white);
    background-image:
        linear-gradient(var(--gray-100) 2px, transparent 2px),
        linear-gradient(90deg, var(--gray-100) 2px, transparent 2px);
    background-size: 40px 40px;
}
@media (min-width: 769px) {
.detail-others {
        padding: 80px 0 96px;
}
    }

.detail-others__title {
    margin: 0 0 40px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

.detail-others__more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

/* Spesifikasi: Keunggulan, Data teknis and Cara pemakaian cards on the ink band; one column
   on phones, two from --medium (the steps take the full row), three from --large */
.specs {
    padding: 56px 0 72px;
    background:
        radial-gradient(circle, rgb(255 255 0 / 0.1) 2px, transparent 2.6px) 0 0 / 22px 22px,
        var(--hornet-ink);
    color: var(--hornet-ink);
}
@media (min-width: 769px) {
.specs {
        padding: 80px 0 96px;
}
    }

.specs__title {
    margin: 0 0 40px;
    color: var(--hornet-yellow);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
}

.specs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    /* Room for the cards' hard shadow */
    padding-right: 10px;

    /* Cards in a row stretch to the tallest, so they line up as boxes of one size */
}

@media (min-width: 769px) {

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

/* One equal column per card, however many there are */

@media (min-width: 961px) {

.specs__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: clamp(32px, 3vw, 48px);
}
    }

/* A card stretched to the tallest in its row spreads its rows over the height (each list grows,
   its items share the room, divided by dashed rules), so a short one never ends in a blank
   bottom; a big outlined number in the corner and the label strip at the bottom fill it out */
.specs__grid {
    counter-reset: specs-card;
}

.specs__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 0;
    background: var(--hornet-white);
    border: var(--border-thick);
    box-shadow: 10px 10px 0 var(--hornet-yellow);
    counter-increment: specs-card;
}

.specs__card::before {
        content: "0" counter(specs-card);
        position: absolute;
        top: 12px;
        right: 16px;
        color: transparent;
        -webkit-text-stroke: 2px var(--hornet-ink);
        opacity: 0.25;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 900;
        font-size: 64px;
        line-height: 1;
        pointer-events: none;
    }

.specs__card  > ul,.specs__card  > ol,.specs__card  > dl {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }

@media (min-width: 481px) {

.specs__card {
        padding: 28px 28px 0;
}
    }

.specs__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px -20px 0;
    padding: 10px 20px;
    border-top: var(--border);
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 481px) {

.specs__foot {
        margin: 28px -28px 0;
        padding: 10px 28px;
}
    }

.specs__foot-stripes {
    flex: 1;
    min-width: 24px;
    height: 12px;
    background: repeating-linear-gradient(-45deg, var(--hornet-yellow) 0 6px, transparent 6px 14px);
}

.specs__card--yellow {
    background: var(--hornet-yellow);
    box-shadow: 10px 10px 0 var(--hornet-white);
}

@media (min-width: 769px) {

.specs__card--steps {
        grid-column: 1 / -1;
}
    }

@media (min-width: 961px) {

.specs__card--steps {
        grid-column: auto;
}
    }

.specs__heading {
    display: inline-block;
    margin: 0 0 20px;
    padding: 4px 14px;
    background: var(--hornet-ink);
    color: var(--hornet-yellow);
    transform: skewX(var(--skew));
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
}

/* Checklist: skewed ink boxes with a yellow check */
.specs__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
}
.specs__highlights li {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 2px dashed rgb(39 27 29 / 0.3);
    }
:is(.specs__highlights li):first-child {
            padding-top: 0;
        }
:is(.specs__highlights li):last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }
.specs__highlights li {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 800;
        font-size: var(--fs-lg);
        line-height: 1.2;
        text-transform: uppercase;
    }
:is(.specs__highlights li)::before {
            content: "✓";
            flex: none;
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            background: var(--hornet-ink);
            color: var(--hornet-yellow);
            font-style: normal;
            font-size: 18px;
            transform: skewX(var(--skew));
        }

.specs__table {
    margin: 0;
}

.specs__table dt {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 800;
        font-size: var(--fs-sm);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

.specs__table dd {
        margin: 0;
        font-size: var(--fs-md);
        font-weight: 700;
        text-align: right;
    }

.specs__row {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 2px dashed var(--gray-300);
}

.specs__row:first-child {
        padding-top: 0;
    }

.specs__row:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

/* Numbered steps: big outlined numbers like the stage numbers on the product photos */
.specs__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.specs__steps li {
        position: relative;
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 14px 0 14px 60px;
        border-bottom: 2px dashed var(--gray-300);
        font-size: var(--fs-md);
        line-height: 1.5;
        counter-increment: step;

        /* Padding kept on the first and last step, so the number centered on the row stays
           level with the text */
    }
:is(.specs__steps li):last-child {
            border-bottom: 0;
        }
:is(.specs__steps li)::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            width: 44px;
            color: var(--hornet-yellow);
            -webkit-text-stroke: 2px var(--hornet-ink);
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 900;
            font-size: 44px;
            line-height: 1;
            text-align: center;
        }

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::-moz-placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.z-\[999999\]{z-index:999999}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.h-32{height:calc(var(--spacing) * 32)}.h-full{height:100%}.w-32{width:calc(var(--spacing) * 32)}.w-full{width:100%}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.border-\[\#3a2a2d\]{border-color:#3a2a2d}.border-t-\[\#ffff00\]{border-top-color:#ff0}.border-r-\[\#ffff00\]{border-right-color:#ff0}.border-b-\[\#ffff00\]{border-bottom-color:#ff0}.bg-\[\#271b1d\]\/85{background-color:oklab(23.7793% .0191474 .00252695/.85)}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#ffff00\]\/20{--tw-gradient-from:oklab(96.7983% -.0713691 .19857/.2);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[\#ffff00\]\/10{--tw-gradient-to:oklab(96.7983% -.0713691 .19857/.1);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.text-wrap{text-wrap:wrap}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-sm{--tw-blur:blur(var(--blur-sm));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}:root{--hornet-yellow:#ff0;--hornet-ink:#271b1d;--hornet-white:#fff;--hornet-orange:#f9aa52;--hornet-on-dark:#e9e4e5;--border:3px solid var(--hornet-ink);--border-thick:4px solid var(--hornet-ink);--shadow-sm:5px 5px 0 var(--hornet-ink);--shadow-md:8px 8px 0 var(--hornet-ink);--shadow-lg:14px 14px 0 var(--hornet-ink);--skew:-12deg;--white:#fff;--black:#000;--gray-100:#f1f3f5;--gray-300:#dee2e6;--gray-500:#adb5bd;--gray-700:#495057;--font-display:"Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-body:"Helvetica Neue", Helvetica, Arial, sans-serif;--fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-md:18px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-4xl:48px;--fs-6xl:72px;--container:1280px;--gutter:16px}@media not all and (max-width:768px){:root{--gutter:32px}}@media not all and (max-width:1200px){:root{--gutter:48px}}@media not all and (max-width:1600px){:root{--container:min(86vw, 1800px);--gutter:64px}}html,body{background:var(--hornet-white);width:100%;min-height:100%;color:var(--hornet-ink);font-family:var(--font-body);margin:0;padding:0}html{overflow-x:hidden}body{overflow-x:clip}*,:before,:after{box-sizing:border-box}button,a,nav,div,*{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--hornet-orange);outline-offset:4px}html{scroll-behavior:smooth;scroll-padding-top:96px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}