:root {
    --qy-ink: #151817;
    --qy-muted: #656b68;
    --qy-line: #dfe4e1;
    --qy-paper: #f7f9f7;
    --qy-white: #fff;
    --qy-green: #0b4a36;
    --qy-gold: #c7a56a;
    --qy-nav-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--qy-white); color: var(--qy-ink); scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--qy-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--qy-green); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--qy-nav-height) + 16px); }
.product-picture { display: block; width: 100%; height: 100%; }
.product-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.standard-picture { display: block; width: 100%; }
.standard-picture img { display: block; width: 100%; margin: 0 auto; }
.mobile-home-v2 { display: none; }

.site-header-brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}
.site-header-lockup {
    display: block;
    width: 168px;
    height: auto;
    max-width: none;
    object-fit: contain;
}

#mobile-menu-btn {
    border: 0;
    background: transparent;
    color: var(--qy-ink);
    cursor: pointer;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
    display: block;
    width: 21px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { position: absolute; left: 0; content: ""; }
.menu-icon::before { transform: translateY(-6px); }
.menu-icon::after { transform: translateY(6px); }
#mobile-menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
#mobile-menu-btn[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
#mobile-menu-btn[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

@media (min-width: 768px) {
    #mobile-menu-btn, #mobile-menu { display: none !important; }
}

@media (max-width: 767px) {
    html { font-size: 16px; }
    body {
        background: var(--qy-white);
        color: var(--qy-ink);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
        font-size: 15px;
        line-height: 1.65;
    }
    body > nav {
        position: fixed !important;
        inset: 0 0 auto !important;
        z-index: 50;
        height: var(--qy-nav-height);
        border: 0 !important;
        border-bottom: 1px solid rgba(21, 24, 23, .08) !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: none !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    body > nav > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: var(--qy-nav-height) !important;
        padding: 0 18px !important;
    }
    body > nav > div:first-child > a.site-header-brand {
        display: flex;
        align-items: center;
        width: 152px;
        height: 48px;
        overflow: visible;
    }
    body > nav > div:first-child > a.site-header-brand img.site-header-lockup {
        display: block;
        width: 152px !important;
        height: auto !important;
        max-width: none;
        object-fit: contain;
        transform: none;
    }
    body > nav > div:first-child > div { display: none !important; }
    #mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: 50%;
    }
    #mobile-menu-btn:active { background: var(--qy-paper); }
    #mobile-menu {
        position: fixed !important;
        inset: var(--qy-nav-height) 0 auto !important;
        display: none !important;
        flex-direction: column;
        gap: 0 !important;
        width: 100% !important;
        padding: 10px 18px 20px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--qy-line) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 16px 32px rgba(15, 28, 22, .08) !important;
    }
    #mobile-menu:not(.hidden) { display: flex !important; }
    #mobile-menu a {
        display: flex !important;
        align-items: center;
        min-height: 48px;
        padding: 0 2px !important;
        border-bottom: 1px solid rgba(21, 24, 23, .08);
        color: var(--qy-ink) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: .04em !important;
        text-decoration: none;
    }
    #mobile-menu a:last-child {
        justify-content: center;
        min-height: 46px;
        margin-top: 12px;
        padding: 0 18px !important;
        border: 0;
        border-radius: 2px !important;
        background: var(--qy-green) !important;
        color: var(--qy-white) !important;
    }
    .fade-in {
        transform: translateY(8px) !important;
        transition: opacity 240ms ease-out, transform 240ms ease-out !important;
        transition-delay: 0ms !important;
    }
    .fade-in.visible { transform: translateY(0) !important; }
    body > section, body > header, body > main { width: 100%; }
    body > section > div, body > header > div, body > main { max-width: none !important; }
    body > section > div, body > header > div, body > main, footer > div {
        padding-right: 22px !important;
        padding-left: 22px !important;
    }
    h1, h2, h3, p { overflow-wrap: anywhere; }
    footer {
        padding: 30px 0 calc(26px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--qy-line) !important;
        background: var(--qy-white) !important;
        color: var(--qy-muted) !important;
    }
    footer > div, footer > div > div { display: flex !important; align-items: flex-start !important; }
    footer > div { flex-direction: column !important; gap: 20px !important; }
    footer > div > div:first-child { flex-direction: column !important; gap: 5px !important; text-align: left !important; }
    footer > div > div:last-child { flex-wrap: wrap; gap: 8px 22px !important; }
    footer a { display: inline-flex; align-items: center; min-height: 34px; color: inherit; text-decoration: none; }
}

@media (max-width: 767px) {
    /* Mobile homepage V2 follows the shared r15 roles: cool white canvas, black hierarchy, green actions. */
    body[data-page="home"] > section,
    body[data-page="home"] > section#overview { display: none !important; }
    body[data-page="home"] .mobile-home-v2 {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: var(--qy-nav-height) 0 0 !important;
        overflow: clip;
        background: #fafaf9;
        color: #12150e;
    }
    .mobile-home-v2 section { position: relative; width: 100%; }
    .mobile-home-v2 h1,
    .mobile-home-v2 h2,
    .mobile-home-v2 p { margin-top: 0; }
    .mobile-v2-index,
    .mobile-v2-kicker {
        margin-bottom: 21px;
        color: #2c5a45;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .mobile-v2-hero {
        display: flex;
        height: calc(100svh - var(--qy-nav-height));
        min-height: 680px;
        max-height: 820px;
        align-items: flex-start;
        overflow: hidden;
        background: #fafaf9;
        color: #12150e;
    }
    .mobile-v2-hero > img,
    .mobile-v2-hero-shade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .mobile-v2-hero > img {
        object-fit: cover;
        object-position: 55% 50%;
    }
    .mobile-v2-hero-shade { display: none; }
    .mobile-v2-hero-copy {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 40px 40px 176px;
    }
    .mobile-v2-kicker { color: #2c5a45; }
    .mobile-v2-hero h1 {
        max-width: 310px;
        margin-bottom: 21px;
        color: #12150e;
        font-size: clamp(40px, 11.3vw, 46px);
        font-weight: 560;
        letter-spacing: -.045em;
        line-height: 1.06;
    }
    .mobile-v2-lead {
        max-width: 306px;
        margin-bottom: 26px;
        color: #3a3f38;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.72;
    }
    .mobile-v2-actions {
        display: flex;
        align-items: center;
        gap: 21px;
    }
    .mobile-v2-primary,
    .mobile-v2-secondary {
        display: inline-flex;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }
    .mobile-v2-primary {
        padding: 0 21px;
        background: #12150e;
        color: #fff;
    }
    .mobile-v2-secondary {
        gap: 5px;
        color: #214535;
        border-bottom: 1px solid rgba(33, 69, 53, .38);
    }
    .mobile-v2-primary:active { background: #214535; }
    .mobile-v2-scroll {
        position: absolute;
        z-index: 2;
        right: 18px;
        bottom: 25px;
        margin: 0;
        color: #626860;
        font-size: 10px;
        letter-spacing: .1em;
        writing-mode: vertical-rl;
    }

    .mobile-v2-manifesto {
        min-height: 520px;
        padding: 89px 40px;
        overflow: hidden;
        background: #fafaf9;
        color: #12150e;
        border-top: 1px solid rgba(18, 21, 14, .055);
    }
    .mobile-v2-manifesto h2 {
        max-width: 330px;
        margin-bottom: 34px;
        font-size: clamp(36px, 10vw, 41px);
        font-weight: 540;
        letter-spacing: -.04em;
        line-height: 1.14;
    }
    .mobile-v2-manifesto > p:not(.mobile-v2-index) {
        position: relative;
        z-index: 2;
        max-width: 315px;
        color: #3a3f38;
        font-size: 15px;
        line-height: 1.82;
    }
    .mobile-v2-wordmark { display: none; }

    .mobile-v2-formula {
        padding: 89px 0;
        background: #fffefe;
        color: #12150e;
        border-top: 1px solid rgba(18, 21, 14, .1);
    }
    .mobile-v2-formula-intro { padding: 0 40px 42px; }
    .mobile-v2-formula h2 {
        margin-bottom: 0;
        font-size: clamp(36px, 10vw, 41px);
        font-weight: 540;
        letter-spacing: -.04em;
        line-height: 1.13;
    }
    .mobile-v2-formula-visual { position: relative; margin: 0; }
    .mobile-v2-formula-visual img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-top: 1px solid rgba(18, 21, 14, .055);
        border-bottom: 1px solid rgba(18, 21, 14, .055);
    }
    .mobile-v2-formula-visual figcaption {
        padding: 13px 40px 0;
        color: #626860;
        font-size: 12px;
        line-height: 1.7;
    }
    .mobile-v2-ingredients { margin: 34px 40px 0; }
    .mobile-v2-ingredients > div {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 0;
        border-top: 1px solid rgba(18, 21, 14, .1);
    }
    .mobile-v2-ingredients dt { font-size: 16px; font-weight: 500; }
    .mobile-v2-ingredients dd {
        margin: 0;
        color: #626860;
        font-size: 13px;
        line-height: 1.7;
    }

    .mobile-v2-standard {
        padding: 89px 40px;
        background: #fafaf9;
        color: #12150e;
        border-top: 1px solid rgba(18, 21, 14, .1);
    }
    .mobile-v2-standard h2 {
        margin-bottom: 42px;
        font-size: clamp(36px, 10vw, 41px);
        font-weight: 540;
        letter-spacing: -.04em;
        line-height: 1.13;
    }
    .mobile-v2-standard ol { margin: 0 0 34px; padding: 0; list-style: none; }
    .mobile-v2-standard li {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding: 24px 0;
        border-top: 1px solid rgba(18, 21, 14, .16);
    }
    .mobile-v2-standard li > span {
        color: #2c5a45;
        font-size: 41px;
        font-weight: 500;
        line-height: .9;
    }
    .mobile-v2-standard li p {
        margin: 0;
        color: #3a3f38;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.62;
    }
    .mobile-v2-text-link,
    .mobile-v2-journey a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        gap: 8px;
        color: #214535;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(33, 69, 53, .38);
    }

    .mobile-v2-journey {
        min-height: 560px;
        padding: 89px 40px 144px;
        overflow: hidden;
        background: #fffefe;
        color: #12150e;
        border-top: 1px solid rgba(18, 21, 14, .1);
    }
    .mobile-v2-journey::after {
        position: absolute;
        right: -24px;
        bottom: -42px;
        content: "2026";
        color: rgba(18, 21, 14, .045);
        font-size: 104px;
        font-weight: 600;
        letter-spacing: -.08em;
        line-height: 1;
    }
    .mobile-v2-journey h2 {
        max-width: 330px;
        margin-bottom: 34px;
        font-size: clamp(39px, 10.8vw, 45px);
        font-weight: 540;
        letter-spacing: -.045em;
        line-height: 1.08;
    }
    .mobile-v2-journey > p:not(.mobile-v2-index) {
        position: relative;
        z-index: 1;
        max-width: 304px;
        margin-bottom: 28px;
        color: #3a3f38;
        font-size: 15px;
        line-height: 1.82;
    }
    .mobile-v2-journey a {
        position: relative;
        z-index: 1;
        color: #214535;
        border-color: rgba(33, 69, 53, .38);
    }

    .mobile-v2-ritual {
        background: #fafaf9;
        color: #12150e;
        border-top: 1px solid rgba(18, 21, 14, .1);
    }
    .mobile-v2-ritual figure { margin: 0; }
    .mobile-v2-ritual figure img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 50% 50%;
    }
    .mobile-v2-ritual > div { padding: 55px 40px 89px; }
    .mobile-v2-ritual h2 {
        margin-bottom: 34px;
        font-size: clamp(36px, 10vw, 41px);
        font-weight: 540;
        letter-spacing: -.04em;
        line-height: 1.14;
    }
    .mobile-v2-ritual .mobile-v2-primary {
        min-width: 124px;
        background: #12150e;
        color: #fff;
    }
}

@media (max-width: 359px) {
    .mobile-v2-hero-copy { padding-right: 21px; padding-left: 21px; }
    .mobile-v2-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
    .mobile-v2-manifesto,
    .mobile-v2-standard,
    .mobile-v2-journey,
    .mobile-v2-formula-intro,
    .mobile-v2-ritual > div { padding-right: 21px; padding-left: 21px; }
    .mobile-v2-formula-visual figcaption { padding-right: 21px; padding-left: 21px; }
    .mobile-v2-ingredients { margin-right: 21px; margin-left: 21px; }
}

@media (max-width: 767px) {
    /* Qiaoyue mobile campaign: native portrait imagery, editorial rhythm, verified brand facts. */
    body[data-page="home"] .mobile-campaign-home {
        padding: var(--qy-nav-height) 0 0 !important;
        overflow: hidden;
        background: #fafaf9;
        color: #12150e;
    }
    .mobile-campaign-home section { position: relative; width: 100%; }
    .mobile-campaign-home h1,
    .mobile-campaign-home h2,
    .mobile-campaign-home h3,
    .mobile-campaign-home p,
    .mobile-campaign-home figure,
    .mobile-campaign-home dl,
    .mobile-campaign-home dd { margin: 0; }
    .mobile-canon-eyebrow {
        margin-bottom: 22px !important;
        color: #2c5a45;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .17em;
        text-transform: uppercase;
    }
    .mobile-canon-intro {
        max-width: 31rem;
        color: #3a3f38;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.82;
    }
    .mobile-canon-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .mobile-canon-primary,
    .mobile-canon-secondary,
    .mobile-canon-text-link {
        display: inline-flex;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 550;
        line-height: 1;
        text-decoration: none;
    }
    .mobile-canon-primary {
        padding: 0 20px;
        background: #214535;
        color: #fff;
    }
    .mobile-canon-secondary,
    .mobile-canon-text-link {
        gap: 7px;
        color: #214535;
        border-bottom: 1px solid rgba(33, 69, 53, .38);
    }
    .mobile-canon-primary:active { background: #214535; }

    .mobile-canon-hero {
        height: clamp(650px, calc(100svh - var(--qy-nav-height)), 820px);
        min-height: 0;
        overflow: hidden;
        isolation: isolate;
        background: #e8edef;
    }
    .mobile-canon-hero-visual,
    .mobile-canon-hero-visual::after,
    .mobile-canon-hero-visual > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .mobile-canon-hero-visual { z-index: -1; }
    .mobile-canon-hero-visual::after {
        content: "";
        background: linear-gradient(180deg, rgba(246, 249, 250, .76) 0%, rgba(246, 249, 250, .34) 34%, rgba(246, 249, 250, 0) 56%, rgba(9, 18, 14, .28) 100%);
    }
    .mobile-canon-hero-visual > img {
        display: block;
        object-fit: cover;
        object-position: 50% 56%;
    }
    .mobile-canon-hero-copy {
        position: relative;
        z-index: 2;
        padding: 39px 40px 0;
    }
    .mobile-canon-hero h1 {
        max-width: 320px;
        margin-bottom: 20px;
        color: #12150e;
        font-size: clamp(45px, 12.4vw, 52px);
        font-weight: 570;
        letter-spacing: -.055em;
        line-height: 1.01;
    }
    .mobile-canon-hero-lead {
        max-width: 310px;
        margin-bottom: 27px !important;
        color: #2f3834;
        font-size: 14px;
        line-height: 1.72;
    }
    .mobile-canon-material-line {
        position: absolute;
        right: 24px;
        bottom: 22px;
        left: 40px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, .96);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .08em;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
    }
    .mobile-canon-material-line span {
        padding-right: 10px;
        border-right: 1px solid rgba(255, 255, 255, .58);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .02em;
    }

    .mobile-canon-category {
        padding: 92px 40px 88px;
        border-top: 1px solid rgba(18, 21, 14, .08);
        background: #fffefe;
    }
    .mobile-canon-category h2,
    .mobile-canon-flavor h2,
    .mobile-canon-standard h2,
    .mobile-canon-closing h2 {
        max-width: 345px;
        margin-bottom: 29px;
        font-size: clamp(36px, 10vw, 42px);
        font-weight: 550;
        letter-spacing: -.045em;
        line-height: 1.12;
    }
    .mobile-canon-timeline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 45px 0 29px;
        padding: 0;
        border-top: 1px solid rgba(18, 21, 14, .14);
        list-style: none;
    }
    .mobile-canon-timeline li {
        min-height: 128px;
        padding: 19px 15px 19px 0;
        border-bottom: 1px solid rgba(18, 21, 14, .14);
    }
    .mobile-canon-timeline li:nth-child(odd) { border-right: 1px solid rgba(18, 21, 14, .14); }
    .mobile-canon-timeline li:nth-child(even) { padding-right: 0; padding-left: 17px; }
    .mobile-canon-timeline time {
        display: block;
        margin-bottom: 11px;
        color: #2c5a45;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .12em;
    }
    .mobile-canon-timeline strong {
        display: block;
        margin-bottom: 7px;
        font-size: 17px;
        font-weight: 560;
        line-height: 1.3;
    }
    .mobile-canon-timeline p {
        color: #626860;
        font-size: 11px;
        line-height: 1.55;
    }

    .mobile-canon-flavor {
        border-top: 1px solid rgba(18, 21, 14, .08);
        background: #fafaf9;
    }
    .mobile-canon-flavor-visual {
        aspect-ratio: 4 / 5;
        background: #f2f3f1;
    }
    .mobile-canon-flavor-visual > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 50% 50%;
    }
    .mobile-canon-flavor-visual figcaption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 55px;
        padding: 0 40px;
        border-bottom: 1px solid rgba(18, 21, 14, .1);
        background: #fffefe;
        color: #626860;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.4;
    }
    .mobile-canon-flavor-visual figcaption span:first-child {
        color: #214535;
        font-size: 9px;
        font-weight: 650;
        letter-spacing: .15em;
    }
    .mobile-canon-flavor-visual figcaption span:last-child { text-align: right; }
    .mobile-canon-flavor-copy { padding: 72px 40px 91px; }
    .mobile-canon-flavor-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 38px 0 37px;
        border-top: 1px solid rgba(18, 21, 14, .14);
        border-bottom: 1px solid rgba(18, 21, 14, .14);
    }
    .mobile-canon-flavor-facts p {
        min-width: 0;
        padding: 17px 9px 17px 0;
    }
    .mobile-canon-flavor-facts p + p {
        padding-left: 10px;
        border-left: 1px solid rgba(18, 21, 14, .14);
    }
    .mobile-canon-flavor-facts strong,
    .mobile-canon-flavor-facts span { display: block; }
    .mobile-canon-flavor-facts strong {
        margin-bottom: 4px;
        color: #12150e;
        font-size: 17px;
        font-weight: 590;
        line-height: 1.1;
        letter-spacing: -.02em;
    }
    .mobile-canon-flavor-facts span {
        color: #626860;
        font-size: 10px;
        line-height: 1.4;
    }
    .mobile-canon-flavor-notes {
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(18, 21, 14, .11);
        list-style: none;
    }
    .mobile-canon-flavor-notes li {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
        padding: 20px 0;
        border-bottom: 1px solid rgba(18, 21, 14, .11);
    }
    .mobile-canon-flavor-notes li > span {
        padding-top: 3px;
        color: #2c5a45;
        font-size: 9px;
        font-weight: 650;
        line-height: 1.4;
        letter-spacing: .14em;
    }
    .mobile-canon-flavor-notes h3 {
        margin: 0 0 5px;
        color: #12150e;
        font-size: 15px;
        font-weight: 570;
        line-height: 1.4;
    }
    .mobile-canon-flavor-notes p {
        color: #626860;
        font-size: 12px;
        line-height: 1.6;
    }

    .mobile-canon-standard {
        border-top: 1px solid rgba(18, 21, 14, .1);
        background: #fffefe;
    }
    .mobile-canon-standard-copy { padding: 86px 40px 43px; }
    .mobile-canon-standard-system {
        margin: 0 24px;
        border: 1px solid rgba(18, 21, 14, .16);
        background: #fff;
    }
    .mobile-canon-standard-head {
        display: grid;
        min-height: 92px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        padding: 18px 19px;
        background: #214535;
        color: #fff;
    }
    .mobile-canon-standard-mark {
        display: flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .42);
        border-radius: 50%;
    }
    .mobile-canon-standard-mark img {
        width: 22px;
        height: auto;
        filter: brightness(0) invert(1);
    }
    .mobile-canon-standard-head p span,
    .mobile-canon-standard-head p strong { display: block; }
    .mobile-canon-standard-head p span {
        margin-bottom: 5px;
        font-size: 9px;
        font-weight: 650;
        line-height: 1;
        letter-spacing: .2em;
    }
    .mobile-canon-standard-head p strong {
        font-size: 13px;
        font-weight: 520;
        line-height: 1.25;
        letter-spacing: .08em;
    }
    .mobile-canon-standard-code {
        color: rgba(255, 255, 255, .64);
        font-size: 8px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .13em;
    }
    .mobile-canon-standard-steps {
        margin: 0;
        padding: 0 19px;
        list-style: none;
    }
    .mobile-canon-standard-steps li {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding: 24px 0 25px;
        border-top: 1px solid rgba(18, 21, 14, .16);
    }
    .mobile-canon-standard-steps li:first-child { border-top: 0; }
    .mobile-canon-standard-steps li > span {
        color: #2c5a45;
        font-size: 26px;
        font-weight: 520;
        line-height: 1;
        letter-spacing: -.04em;
    }
    .mobile-canon-standard-steps small {
        display: block;
        margin-top: 9px;
        color: #81867f;
        font-size: 7px;
        font-weight: 650;
        letter-spacing: .13em;
    }
    .mobile-canon-standard-steps h3 {
        margin: 0 0 7px;
        font-size: 17px;
        font-weight: 570;
        line-height: 1.3;
    }
    .mobile-canon-standard-steps p {
        color: #626860;
        font-size: 13px;
        line-height: 1.68;
    }
    .mobile-canon-standard-values {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 !important;
        padding: 15px 18px;
        border-top: 1px solid rgba(18, 21, 14, .14);
        background: #edf1ed;
        color: #2c5a45;
        font-size: 7px;
        font-weight: 650;
        text-align: center;
        letter-spacing: .11em;
    }
    .mobile-canon-standard-values span + span { border-left: 1px solid rgba(33, 69, 53, .2); }
    .mobile-canon-standard-link { padding: 29px 40px 88px; }

    .mobile-canon-closing {
        padding: 72px 40px 78px;
        border-top: 1px solid rgba(18, 21, 14, .1);
        background: #fffefe;
        color: #12150e;
    }
    .mobile-canon-closing-brand {
        position: relative;
        display: block;
        width: 206px;
        height: 36px;
        margin-bottom: 45px;
        overflow: hidden;
    }
    .mobile-canon-closing-brand img {
        position: absolute;
        top: -36px;
        left: -3px;
        width: 214px;
        height: 107px;
        max-width: none;
        object-fit: contain;
    }
    .mobile-canon-closing .mobile-canon-eyebrow { color: #2c5a45; }
    .mobile-canon-closing h2 {
        max-width: 325px;
        color: #12150e;
        font-size: clamp(34px, 9.2vw, 39px);
        line-height: 1.12;
    }
    .mobile-canon-closing .mobile-canon-intro {
        max-width: 320px;
        color: #3a3f38;
    }
    .mobile-canon-signoff {
        display: flex;
        justify-content: space-between;
        margin: 37px 0 32px !important;
        padding: 17px 0;
        border-top: 1px solid rgba(18, 21, 14, .15);
        border-bottom: 1px solid rgba(18, 21, 14, .15);
        color: #12150e;
        font-family: "Songti SC", "STSong", serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: .08em;
    }
    .mobile-canon-signoff span:last-child { color: #2c5a45; }
    .mobile-canon-closing .mobile-canon-primary {
        background: #12150e;
        color: #fff;
    }
    .mobile-canon-closing .mobile-canon-secondary {
        color: #214535;
        border-color: rgba(33, 69, 53, .38);
    }
}

@media (max-width: 359px) {
    .mobile-canon-hero-copy,
    .mobile-canon-category,
    .mobile-canon-flavor-copy,
    .mobile-canon-standard-copy,
    .mobile-canon-standard-link,
    .mobile-canon-closing { padding-right: 24px; padding-left: 24px; }
    .mobile-canon-material-line { left: 24px; }
    .mobile-canon-hero h1 { font-size: 43px; }
    .mobile-canon-actions { gap: 16px; }
    .mobile-canon-primary { padding-right: 17px; padding-left: 17px; }
    .mobile-canon-flavor-visual figcaption { padding-right: 24px; padding-left: 24px; }
    .mobile-canon-standard-system { margin-right: 16px; margin-left: 16px; }
    .mobile-canon-flavor-facts strong { font-size: 16px; }
    .mobile-canon-flavor-facts span { font-size: 9px; }
}

@media (max-width: 767px) {
    /* Text-first mobile opening; the image becomes a compact supporting panel. */
    body[data-page="home"] #overview {
        position: relative !important;
        display: grid !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: var(--qy-nav-height);
        overflow: visible !important;
        background: var(--qy-paper) !important;
    }
    body[data-page="home"] #overview > div:first-child {
        position: relative !important;
        inset: auto !important;
        z-index: 0 !important;
        grid-row: 2;
        width: 100%;
        height: clamp(220px, 62vw, 265px);
        overflow: hidden;
    }
    body[data-page="home"] #overview > div:first-child img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }
    body[data-page="home"] #overview > div:first-child > div { display: none; }
    body[data-page="home"] #overview > div:nth-child(2) {
        position: relative !important;
        z-index: 1 !important;
        grid-row: 1;
        display: block !important;
        height: auto !important;
        padding: 42px 22px 38px !important;
    }
    body[data-page="home"] #overview > div:nth-child(2) > div {
        max-width: 520px !important;
        margin: 0 !important;
        color: var(--qy-ink) !important;
        text-align: left !important;
    }
    body[data-page="home"] #overview .inline-flex {
        display: inline-flex !important;
        align-items: center;
        margin: 0 0 20px !important;
        padding: 5px 9px !important;
        border: 1px solid rgba(11, 74, 54, .28) !important;
        border-radius: 999px;
        background: transparent !important;
        color: var(--qy-green) !important;
        font-size: 10px !important;
        letter-spacing: .15em !important;
    }
    body[data-page="home"] #overview h1 {
        margin: 0 0 20px !important;
        color: var(--qy-ink) !important;
        font-size: clamp(40px, 12vw, 52px) !important;
        font-weight: 650 !important;
        letter-spacing: -.055em !important;
        line-height: 1.04 !important;
        text-shadow: none !important;
    }
    body[data-page="home"] #overview h1 + div {
        width: 42px !important;
        height: 2px !important;
        margin: 0 0 20px !important;
        background: var(--qy-green) !important;
    }
    body[data-page="home"] #overview p {
        max-width: 26rem !important;
        margin: 0 0 28px !important;
        color: var(--qy-muted) !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
        text-shadow: none !important;
    }
    body[data-page="home"] #overview p + div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important;
    }
    body[data-page="home"] #overview p + div a:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 46px;
        padding: 0 20px !important;
        border-radius: 2px !important;
        background: var(--qy-green) !important;
        color: var(--qy-white) !important;
        font-size: 14px;
        text-decoration: none;
        box-shadow: none !important;
    }
    body[data-page="home"] #overview p + div a:last-child {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        border-color: rgba(21, 24, 23, .35) !important;
        color: var(--qy-ink) !important;
        font-size: 13px !important;
        text-decoration: none;
    }
    body[data-page="home"] #overview > div:last-child { display: none !important; }

    body[data-page="home"] #philosophy,
    body[data-page="home"] #standard,
    body[data-page="home"] #ingredients { padding: 54px 0 !important; }
    body[data-page="home"] #philosophy > div > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    body[data-page="home"] #philosophy > div > div > div:first-child {
        order: 1 !important;
        text-align: left !important;
    }
    body[data-page="home"] #philosophy > div > div > div:last-child {
        order: 2 !important;
        height: 280px !important;
    }
    body[data-page="home"] #philosophy picture {
        display: block;
        width: 100%;
        height: 100%;
    }
    body[data-page="home"] #philosophy picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    body[data-page="home"] #philosophy span,
    body[data-page="home"] #standard span,
    body[data-page="home"] #ingredients span { margin-bottom: 14px !important; }
    body[data-page="home"] #philosophy h3 {
        margin: 0 0 22px !important;
        font-size: 32px !important;
        line-height: 1.18 !important;
    }
    body[data-page="home"] #philosophy .space-y-6,
    body[data-page="home"] #philosophy .space-y-8 { font-size: 15px !important; line-height: 1.8 !important; }
    body[data-page="home"] #philosophy .space-y-6 > * + *,
    body[data-page="home"] #philosophy .space-y-8 > * + * { margin-top: 16px !important; }
    body[data-page="home"] #philosophy a,
    body[data-page="home"] #standard a,
    body[data-page="home"] #ingredients + section a {
        color: var(--qy-green) !important;
        text-decoration: none;
    }

    body[data-page="home"] #standard > div > div:first-child {
        display: block !important;
        margin: 0 0 24px !important;
        padding: 0 0 22px !important;
        text-align: left !important;
    }
    body[data-page="home"] #standard h2,
    body[data-page="home"] #ingredients h2 {
        margin: 0 0 12px !important;
        font-size: 29px !important;
        line-height: 1.22 !important;
    }
    body[data-page="home"] #standard > div > div:first-child a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-top: 14px;
    }
    body[data-page="home"] #standard .grid { display: block !important; }
    body[data-page="home"] #standard .grid > div {
        padding: 22px 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--qy-line) !important;
        background: transparent !important;
        text-align: left !important;
    }
    body[data-page="home"] #standard .grid > div h3 {
        margin: 8px 0 9px !important;
        font-size: 19px !important;
    }
    body[data-page="home"] #standard .grid > div p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    body[data-page="home"] #ingredients > div > div:first-child {
        margin: 0 0 26px !important;
        text-align: left !important;
    }
    body[data-page="home"] #ingredients .grid { display: block !important; }
    body[data-page="home"] #ingredients .grid > .group {
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: 3px 20px !important;
        align-items: start !important;
        padding: 22px 0 !important;
        border-top: 1px solid var(--qy-line);
        text-align: left !important;
    }
    body[data-page="home"] #ingredients .grid > .group > div:first-child {
        grid-column: 1;
        grid-row: 1 / 5;
        width: 104px !important;
        height: 104px !important;
        margin: 0 !important;
    }
    body[data-page="home"] #ingredients .grid > .group > h3,
    body[data-page="home"] #ingredients .grid > .group > p,
    body[data-page="home"] #ingredients .grid > .group > span {
        grid-column: 2;
        margin: 0 !important;
    }
    body[data-page="home"] #ingredients .grid > .group > h3 { font-size: 18px !important; line-height: 1.35 !important; }
    body[data-page="home"] #ingredients .grid > .group > p { font-size: 13px !important; line-height: 1.55 !important; }
    body[data-page="home"] #ingredients .grid > .group > span { color: var(--qy-green) !important; font-size: 10px !important; }
    body[data-page="home"] #ingredients img { filter: none !important; transition-duration: 200ms !important; }

    body[data-page="home"] #ingredients + section { padding: 56px 0 !important; }
    body[data-page="home"] #ingredients + section > div { display: block !important; }
    body[data-page="home"] #ingredients + section h2 {
        margin: 0 0 24px !important;
        font-size: 31px !important;
        line-height: 1.2 !important;
    }
    body[data-page="home"] #ingredients + section p {
        margin-bottom: 22px !important;
        font-size: 15px !important;
        line-height: 1.8 !important;
    }
    body[data-page="home"] #ingredients + section + section {
        padding: 58px 0 !important;
        text-align: left !important;
    }
    body[data-page="home"] #ingredients + section + section h2 {
        margin: 0 0 18px !important;
        font-size: 29px !important;
        line-height: 1.25 !important;
    }
    body[data-page="home"] #ingredients + section + section p {
        margin: 0 0 28px !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
    }
    body[data-page="home"] #ingredients + section + section a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 20px !important;
        border-radius: 2px !important;
        background: var(--qy-green) !important;
        color: var(--qy-white) !important;
        text-decoration: none;
    }
}

@media (max-width: 359px) {
    body[data-page="home"] #overview p + div {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    body[data-page="home"] #ingredients .grid > .group {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 2px 16px !important;
    }
    body[data-page="home"] #ingredients .grid > .group > div:first-child {
        width: 88px !important;
        height: 88px !important;
    }
}

@media (max-width: 767px) {
    /* Brand story */
    body[data-page="brand"] > section:first-of-type {
        padding: 110px 0 48px !important;
        text-align: left !important;
    }
    body[data-page="brand"] > section:first-of-type > div { text-align: left !important; }
    body[data-page="brand"] > section:first-of-type h1 {
        margin: 0 0 20px !important;
        font-size: 37px !important;
        line-height: 1.16 !important;
        letter-spacing: -.035em;
    }
    body[data-page="brand"] > section:first-of-type h1 + div {
        width: 44px !important;
        height: 2px !important;
        margin: 0 0 22px !important;
    }
    body[data-page="brand"] > section:first-of-type p { font-size: 17px !important; line-height: 1.75 !important; }
    body[data-page="brand"] > section:not(:first-of-type) { padding: 52px 0 !important; }
    body[data-page="brand"] > section:nth-of-type(3) .flex {
        display: block !important;
        margin-bottom: 52px !important;
    }
    body[data-page="brand"] > section:nth-of-type(3) .flex:last-child { margin-bottom: 0 !important; }
    body[data-page="brand"] > section:nth-of-type(3) .text-6xl {
        margin-bottom: 3px;
        font-size: 42px !important;
        line-height: 1 !important;
    }
    body[data-page="brand"] h2 {
        margin: 0 0 20px !important;
        font-size: 27px !important;
        line-height: 1.28 !important;
    }
    body[data-page="brand"] h3 { margin: 8px 0 16px !important; font-size: 21px !important; }
    body[data-page="brand"] p { font-size: 15px !important; line-height: 1.82 !important; }
    body[data-page="brand"] .rounded-xl {
        margin-top: 20px;
        padding: 20px !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }
    body[data-page="brand"] > section:nth-last-of-type(1) {
        padding: 56px 0 !important;
        text-align: left !important;
    }
    body[data-page="brand"] > section:nth-last-of-type(1) h2 { font-size: 29px !important; }
    body[data-page="brand"] > section:nth-last-of-type(1) p {
        margin-bottom: 28px !important;
        font-size: 16px !important;
    }
    body[data-page="brand"] > section:nth-last-of-type(1) a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 20px !important;
        border-radius: 2px !important;
        background: var(--qy-white) !important;
        color: var(--qy-green) !important;
        text-decoration: none;
        box-shadow: none !important;
    }

    /* Standard page */
    body[data-page="standard"] > section:first-of-type { padding: 108px 0 42px !important; }
    body[data-page="standard"] > section:first-of-type > div { text-align: left !important; }
    body[data-page="standard"] > section:first-of-type h1 {
        margin: 0 0 7px !important;
        font-size: 38px !important;
        line-height: 1.15 !important;
    }
    body[data-page="standard"] > section:first-of-type h1 ~ div {
        width: 42px !important;
        height: 2px !important;
        margin: 20px 0 0 !important;
    }
    body[data-page="standard"] > section:not(:first-of-type) { padding: 52px 0 !important; }
    body[data-page="standard"] > section:nth-of-type(2) > div,
    body[data-page="standard"] > section:nth-of-type(3) > div > div:first-child,
    body[data-page="standard"] > section:nth-of-type(5) > div,
    body[data-page="standard"] > section:nth-of-type(6) > div { text-align: left !important; }
    body[data-page="standard"] h2 {
        margin: 0 0 22px !important;
        font-size: 28px !important;
        line-height: 1.28 !important;
    }
    body[data-page="standard"] p,
    body[data-page="standard"] li { font-size: 15px !important; line-height: 1.78 !important; }
    body[data-page="standard"] .space-y-8 > * + * { margin-top: 18px !important; }
    body[data-page="standard"] > section:nth-of-type(3) > div > div:first-child { margin-bottom: 28px !important; }
    body[data-page="standard"] > section:nth-of-type(3) .grid { display: block !important; }
    body[data-page="standard"] > section:nth-of-type(3) .grid > div {
        margin: 0;
        padding: 24px 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--qy-line) !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body[data-page="standard"] > section:nth-of-type(3) .grid h3 {
        margin: 0 0 13px !important;
        font-size: 19px !important;
        line-height: 1.45 !important;
    }
    body[data-page="standard"] > section:nth-of-type(4) .flex { display: block !important; }
    body[data-page="standard"] > section:nth-of-type(4) .flex > div:first-child { margin-bottom: 30px; }
    body[data-page="standard"] > section:nth-of-type(4) img {
        display: block;
        width: min(100%, 330px) !important;
        margin: 0 auto;
    }
    body[data-page="standard"] > section:nth-of-type(6) h2 { font-size: 27px !important; }
    body[data-page="standard"] > section:nth-of-type(6) .text-2xl {
        margin-top: 22px !important;
        color: var(--qy-gold) !important;
        font-size: 21px !important;
        line-height: 1.55 !important;
    }

    /* Contact page */
    body[data-page="contact"] > header {
        padding: 108px 0 44px !important;
        background: var(--qy-paper) !important;
    }
    body[data-page="contact"] > header > div { text-align: left !important; }
    body[data-page="contact"] > header h1 {
        margin: 0 0 14px !important;
        font-size: 38px !important;
        line-height: 1.15 !important;
    }
    body[data-page="contact"] > header p { font-size: 16px !important; line-height: 1.75 !important; }
    body[data-page="contact"] > section { padding: 48px 0 54px !important; }
    body[data-page="contact"] > section .grid {
        display: flex !important;
        flex-direction: column;
        gap: 32px !important;
    }
    body[data-page="contact"] > section .space-y-12 > * + * { margin-top: 27px !important; }
    body[data-page="contact"] > section h3 { margin-bottom: 6px !important; font-size: 16px !important; }
    body[data-page="contact"] > section p { font-size: 15px !important; line-height: 1.75 !important; }
    body[data-page="contact"] > section span { display: block; }
    body[data-page="contact"] > section span + span { margin-top: 4px; }
    body[data-page="contact"] > section .min-h-\[300px\] {
        order: -1;
        min-height: 208px !important;
        border-radius: 2px !important;
    }

    /* Legal pages */
    body[data-page="privacy"] > main,
    body[data-page="statement"] > main {
        padding-top: 108px !important;
        padding-bottom: 54px !important;
    }
    body[data-page="privacy"] > main > h1,
    body[data-page="statement"] > main header h1 {
        margin: 0 0 28px !important;
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    body[data-page="statement"] > main header { margin-bottom: 38px !important; text-align: left !important; }
    body[data-page="statement"] > main header p { font-size: 14px !important; }
    body[data-page="privacy"] > main p,
    body[data-page="privacy"] > main li,
    body[data-page="statement"] > main p { font-size: 14px !important; line-height: 1.85 !important; }
    body[data-page="privacy"] > main h2,
    body[data-page="statement"] > main h2 {
        margin: 30px 0 10px !important;
        font-size: 19px !important;
        line-height: 1.45 !important;
    }
    body[data-page="statement"] > main .space-y-12 > * + * { margin-top: 34px !important; }
}

@media (max-width: 767px) {
    /* Keep the mobile editorial homepage authoritative over legacy homepage rules above. */
    body[data-page="home"] > section,
    body[data-page="home"] > section#overview { display: none !important; }
    body[data-page="home"] > main.mobile-home-v2 { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
}