/* Hallmark · shape: cinematic assurance story · genre: editorial · theme: brand · brand: Aunty Helen (local spec 2026-10-25) · hero: one full-bleed film at a time, centered handwritten brand title · nav: none · footer: return home · signature: three selected moments of companionship, in gentle succession · axes: light/grotesk-heavy/warm · posture: restrained · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, preserve faces in scene-specific crops and protect the centered lettering */
/* Hallmark · waive 1 · existing Inter and Noto Sans SC family · Aunty Helen's established Chinese typography is preserved across the new AQS route */
/* Hallmark · waive 22 · existing black neutral palette · black is the user's explicit main brand color for Aunty Helen */
@import url('./tokens.css');
@import url('./base.css');

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { text-rendering: optimizeLegibility; }
button, a { -webkit-tap-highlight-color: var(--color-clear); }
button { color: inherit; }
a { text-decoration: none; }
button, .button, .text-link { transition: background-color var(--dur-short), color var(--dur-short), transform var(--dur-short); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
a:active, button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 30; padding: var(--space-sm) var(--space-md); color: var(--color-light); background: var(--color-ink); transform: translateY(-150%); }
.skip-link:focus-visible { transform: none; }
.hero { position: relative; isolation: isolate; min-height: 480px; height: 100svh; color: var(--color-light); background: var(--color-dark); overflow: clip; }
.hero-scroll-stage { position: relative; z-index: 0; }
.aqs-story { position: relative; z-index: 1; background: var(--color-paper); }
@media (prefers-reduced-motion: no-preference) {
    /* Keep the film still as the following content rises over it, without adding scroll distance. */
    .hero-scroll-stage { --hero-height: max(480px, 100svh); height: calc(var(--hero-height) + var(--hero-height)); }
    .hero-scroll-stage .hero { position: sticky; top: 0; }
    .aqs-story { margin-top: calc(-1 * max(480px, 100svh)); }
}
.handwriting-playing, .handwriting-playing body { overflow: hidden; }
.hero-revealing { scroll-behavior: auto; }
.hero { --logo-title-gap: -8px; }
.handwriting-ready .hero-brand-mark { top: 50%; bottom: auto; transform: translate(-50%, -50%) translateY(var(--logo-shift, 0px)); }
.film-window, .hero-scrim { position: absolute; inset: 0; }
.film-window { z-index: -3; }
.film-track { position: relative; height: 100%; }
.film-panel { position: absolute; inset: 0; overflow: clip; opacity: 0; transition: opacity 850ms var(--ease-out); }
.film-panel video { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.film-panel[data-scene="1"] video { object-position: 50% 24%; }
.film-panel[data-scene="2"] video { object-position: 50% 37%; }
.hero-scrim { z-index: -1; background: var(--color-hero-overlay); }
.hero-content { position: absolute; top: 50%; left: 50%; width: min(496px, 60.8vw); transform: translate(-50%, -50%) translateY(var(--hero-copy-shift, 0px)); text-align: center; }
.hero-brand-mark { position: absolute; bottom: calc(100% - 8px); left: 50%; width: clamp(70.4px, 7.2vw, 102.4px); height: auto; transform: translateX(-50%); }
.hero h1 { margin: 0; width: 100%; line-height: 0; }
.hero-title-art { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.hero-title-write { display: none; width: 100%; height: auto; filter: brightness(0) invert(1); }
.handwriting-ready .hero-title-art { display: none; }
.handwriting-ready .hero-title-write { display: block; }
.handwriting-ready .hero-tagline { opacity: 0; }
.hero-tagline { position: absolute; top: calc(100% + 24px); left: 50%; width: max-content; max-width: 100vw; transform: translateX(-50%); margin: 0; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.5; letter-spacing: .14em; }
@media (max-width: 760px) {
    .hero { min-height: 480px; --logo-title-gap: 2px; }
    .hero-content { width: 67.2vw; max-width: 416px; }
    .hero-brand-mark { bottom: calc(100% + 2px); width: 73.6px; }
    .hero-tagline { top: calc(100% + 28px); font-size: 21px; letter-spacing: .1em; }
}
.film-panel:first-child { opacity: 1; }
.js .film-panel { opacity: 0; }
.js .film-panel.is-active { opacity: 1; }
.section-space { padding-block: var(--section-gap); }
.section-lead { font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.75; color: var(--color-muted); max-width: 50ch; }
.section-heading-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.section-heading-row h2, .trace-copy h2 { line-height: 1.23; }
.dark-section { background: var(--color-dark); color: var(--color-light); }
.dark-section .section-lead { color: var(--color-light-muted); }
.commitment { padding-block: 32px; background: #7e1d34; color: #fff; }
.commitment-content { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 14.12vw, 200px); align-items: center; gap: clamp(24px, 3vw, 48px); text-align: left; }
.commitment-copy { margin: 0; font-size: clamp(1rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.commitment-copy + .commitment-copy { margin-top: var(--space-2xs); }
/* Offset the artwork's transparent top padding to align its visible center with the text. */
.commitment-illustration { width: 100%; max-width: 200px; height: auto; justify-self: end; transform: scale(1.25) translateY(-5.18%); }
.principles { --principle-width: min(1120px, calc(100vw - 128px)); --principle-gap: 24px; padding-block: 88px 72px; background: #f5f5f7; }
.principles-heading { margin-bottom: 44px; }
.principles-heading h2, .trace-copy h2 { max-width: none; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
.principles-window { position: relative; overflow-x: auto; scrollbar-width: none; touch-action: pan-y pinch-zoom; }
.principles-window::-webkit-scrollbar { display: none; }
.principles-window:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.principles-window.is-ready { overflow: hidden; }
.principles-peek { position: absolute; z-index: 3; inset-block: 0; width: max(0px, calc((100% - var(--principle-width)) / 2 - var(--principle-gap))); border: 0; padding: 0; border-radius: 0; background: transparent; cursor: pointer; }
.principles-peek[hidden] { display: none; }
.principles-peek-prev { left: 0; }
.principles-peek-next { right: 0; }
.principles-peek:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; }
.principles-track { display: flex; gap: var(--principle-gap); width: max-content; padding-inline: calc((100vw - var(--principle-width)) / 2); }
.is-ready .principles-track { padding-inline: 0; }
.principles-track.is-moving { transition: transform 650ms var(--ease-in-out); }
.principle-card { position: relative; isolation: isolate; flex: 0 0 var(--principle-width); width: var(--principle-width); height: clamp(420px, 47vw, 630px); overflow: hidden; border-radius: 30px; color: #fff; background: #292c2c; }
.principle-card > img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.principle-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 20%) 58%, rgb(0 0 0 / 84%) 100%); }
.principle-caption { position: absolute; z-index: 2; bottom: 54px; left: 50%; width: min(78%, 820px); transform: translateX(-50%); text-align: center; font-size: clamp(1.25rem, 2.1vw, 1.875rem); font-weight: 650; line-height: 1.55; text-wrap: balance; }
.principle-caption h3, .principle-caption p { display: inline; margin: 0; font-size: inherit; line-height: inherit; letter-spacing: -.02em; }
.principle-caption h3 { font-weight: 750; color: #fff; }
.principle-caption p { color: #b8b8bd; }
.principles-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.principles-controls[hidden] { display: none; }
.principles-play, .principles-dots { border: 0; background: #e7e7eb; color: #222; border-radius: 999px; }
.principles-play { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer; }
.principles-play:hover { background: #dbdbe0; }
.principles-play svg { width: 23px; height: 23px; fill: currentColor; }
.principles-dots { display: flex; align-items: center; padding-inline: 8px; }
.principles-dots button { display: grid; place-items: center; border: 0; background: none; width: 32px; height: 48px; padding: 0; cursor: pointer; transition: width 250ms ease; }
.principles-dots button span { width: 7px; height: 7px; background: #77777b; border-radius: 99px; transition: width 250ms ease, background 250ms ease; }
.principles-dots button[aria-current="true"] { width: 56px; }
.principles-dots button[aria-current="true"] span { width: 36px; background: #333336; }
.principles-play .pause-symbol, .principles-play.is-playing .play-symbol { display: none; }
.principles-play.is-playing .pause-symbol { display: block; }
.traceability { padding-block: clamp(128px, 12vw, 176px); background-color: #fafaf5; background-image: linear-gradient(90deg, rgb(250 250 245 / 92%) 0%, rgb(250 250 245 / 86%) 40%, rgb(250 250 245 / 68%) 100%), url('../assets/aqs/traceability-treats-background.png'); background-size: cover; background-position: center; }
.trace-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(48px, 6vw, 88px); }
.trace-copy h2 { font-size: clamp(2.275rem, 3.64vw, 3.25rem); }
.trace-answer { display: inline-flex; white-space: nowrap; }
.trace-answer-char { position: relative; display: inline-block; width: 1em; }
.trace-answer-char > span { display: block; }
.trace-answer-char::before { content: attr(data-symbol); position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    /* Questions are present as soon as the heading enters, independently of the cards. */
    .js .trace-answer-char:not([data-state="letter"]) > span { opacity: 0; }
    .js .trace-answer-char:not([data-state="letter"])::before { opacity: 1; }
    .trace-answer-char[data-state="block"]::before { color: #111; font-size: .72em; animation: trace-block-in 180ms ease-out both; }
    .trace-answer-char[data-state="emoji"]::before { font-size: .72em; animation: trace-emoji-in 240ms cubic-bezier(.2,.8,.2,1.2) both; }
    .trace-answer-char[data-state="letter"] > span { animation: trace-letter-in 240ms ease-out both; }
}
@keyframes trace-block-in { from { opacity: .2; transform: scale(.55) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes trace-emoji-in { from { opacity: 0; transform: translateY(.15em) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes trace-letter-in { from { opacity: 0; transform: translateY(.16em); } to { opacity: 1; transform: translateY(0); } }
.trace-copy .section-lead { margin-top: 28px; font-size: clamp(1.0625rem, 1.45vw, 1.25rem); line-height: 1.85; }
.trace-copy .actions { margin-top: 32px; }
.trace-copy .button { min-height: 54px; padding-inline: 28px; font-weight: 700; background: #7e1d34; color: #fff; }
.trace-copy .button:hover { background: #64172a; }
.trace-copy .sample-open { gap: 12px; font-weight: 650; }
.trace-demo { width: 100%; max-width: 390px; justify-self: center; margin: 0; }
.trace-receipt { perspective: 1600px; padding-block: 12px; filter: drop-shadow(0 22px 30px rgb(52 30 26 / 12%)); }
.receipt-flip { position: relative; transform-style: preserve-3d; transition: transform 850ms cubic-bezier(.4, 0, .15, 1); }
.receipt-front, .receipt-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px 8px 0 0; }
.receipt-front::after, .receipt-back::after { content: ''; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 11px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 97.5% 0, 95% 100%, 92.5% 0, 90% 100%, 87.5% 0, 85% 100%, 82.5% 0, 80% 100%, 77.5% 0, 75% 100%, 72.5% 0, 70% 100%, 67.5% 0, 65% 100%, 62.5% 0, 60% 100%, 57.5% 0, 55% 100%, 52.5% 0, 50% 100%, 47.5% 0, 45% 100%, 42.5% 0, 40% 100%, 37.5% 0, 35% 100%, 32.5% 0, 30% 100%, 27.5% 0, 25% 100%, 22.5% 0, 20% 100%, 17.5% 0, 15% 100%, 12.5% 0, 10% 100%, 7.5% 0, 5% 100%, 2.5% 0, 0 100%); }
.receipt-front { position: relative; padding: 30px 32px 24px; color: #372820; background: #fffdf7; }
.receipt-header { text-align: center; padding-bottom: 23px; border-bottom: 1px dashed #cfc2b5; }
.receipt-header img { width: 46px; height: auto; margin: 0 auto 14px; }
.receipt-header h3 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.receipt-header p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #827467; }
.receipt-items { margin: 15px 0 0; padding: 0; list-style: none; }
.receipt-items li { display: flex; align-items: center; gap: 14px; min-height: 43px; font-size: 16px; font-weight: 500; }
.receipt-items svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: #61392f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.receipt-number { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 400; color: #a09487; }
.receipt-end { margin-top: 16px; padding-top: 21px; border-top: 1px dashed #cfc2b5; display: flex; justify-content: center; }
.receipt-barcode { width: 128px; height: 24px; opacity: .65; background: repeating-linear-gradient(90deg, #61392f 0 2px, transparent 2px 5px, #61392f 5px 6px, transparent 6px 10px, #61392f 10px 14px, transparent 14px 17px, #61392f 17px 18px, transparent 18px 22px); }
.receipt-back { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); background: #7e1d34; }
.receipt-back img { width: 132px; height: auto; }
.trace-demo.is-ready[data-phase="waiting"] .receipt-flip { transform: rotateY(180deg); transition: none; }
.trace-demo.is-ready[data-phase="opening"] .receipt-flip, .trace-demo.is-ready[data-phase="open"] .receipt-flip { transform: rotateY(0); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); background: var(--color-ink); color: var(--color-light); border: 0; border-radius: var(--radius-pill); font-size: var(--text-md); white-space: nowrap; cursor: pointer; }
.button:hover { background: var(--color-brand); }
.text-link { display: inline-flex; min-height: 48px; align-items: center; padding: 0; border: 0; background: var(--color-clear); color: var(--color-ink); font-size: var(--text-md); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; white-space: nowrap; }
.text-link:hover { color: var(--color-brand); }
.sample-open { display: none; }
.js .sample-open { display: inline-flex; }
figcaption { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.standards { padding-block: 120px; }
.standards .section-heading-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.standard-body { margin-top: var(--space-2xl); }
.standard-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: 18px; line-height: 1.6; }
.standard-item { width: 30%; }
.standard-aqs { width: 40%; }
.standard-baseline { width: 30%; }
.standard-table th, .standard-table td { padding: 16px 24px; border-bottom: 1px solid rgb(250 250 245 / 13%); vertical-align: middle; }
.standard-table tr > :first-child { padding-left: 0; }
.standard-table thead th { padding-block: 20px; color: var(--color-light-muted); font-size: 16px; font-weight: 500; border-bottom-color: rgb(250 250 245 / 30%); }
.standard-table tr > :nth-child(2) { background: rgb(250 250 245 / 4%); color: var(--color-light); font-weight: 650; }
.standard-table thead tr > :nth-child(2) { font-size: 20px; }
.standard-table tbody th { font-weight: 500; }
.standard-table tbody td:last-child { color: var(--color-light-muted); }
.standard-table sup { font-size: .7em; margin-left: 3px; }
.standard-note { margin-top: 20px; color: var(--color-light-muted); font-size: 13px; line-height: 1.7; }
.sample-list { margin: 0; }
.digital-lead { margin-top: var(--space-lg); }
.digital-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--gap-columns); margin-top: var(--space-2xl); }
.factory-photo { margin: 0; }
.factory-photo img { width: 100%; height: 390px; object-fit: cover; border-radius: var(--radius-card); }
.digital-details details { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.digital-details details:last-child { border-bottom: 1px solid var(--color-rule); }
.digital-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; font-size: clamp(1.125rem, 1.65vw, 1.5rem); font-weight: 700; cursor: pointer; list-style: none; }
.digital-details summary::-webkit-details-marker { display: none; }
.digital-details summary span { font-size: 28px; font-weight: 400; }
.digital-details details[open] summary span { transform: rotate(45deg); }
.digital-details summary:hover { color: var(--color-brand); }
.digital-details p { margin-top: var(--space-sm); color: var(--color-muted); line-height: 1.8; }
.ingredients { background-color: var(--color-paper-2); background-image: linear-gradient(rgb(250 250 245 / 87%), rgb(250 250 245 / 87%)), url('../assets/aqs/ingredients-background.png'); background-size: cover; background-position: center; }
.ingredients h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); }
.ingredients .section-lead { text-align: right; justify-self: end; }
.ingredients-explanation { margin-top: 32px; font-size: 16px; line-height: 1.9; color: var(--color-muted); }
.ingredient-proof { margin-top: var(--space-2xl); }
.requirements { --requirement-size: clamp(3rem, 7.2vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(16px, 2vw, 32px); font-size: var(--requirement-size); font-weight: 700; line-height: 1.3; letter-spacing: -.045em; padding-block: var(--space-xl); }
.requirement-item { display: grid; gap: 12px; min-width: 0; text-align: center; }
.requirement-title { white-space: nowrap; }
.requirement-caption { font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--color-muted); white-space: nowrap; }
.requirement-join { display: grid; place-items: center; height: calc(var(--requirement-size) * 1.3); font-size: .45em; font-weight: 400; line-height: 1; color: var(--color-brand); }
.review-statement { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.8; }
.sourcing-heading { display: flex; justify-content: space-between; gap: var(--gap-columns); align-items: end; }
.sourcing-heading h2 { flex-shrink: 0; }
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.place { min-width: 0; padding: 32px 16px 32px 0; border-top: 1px solid var(--color-rule); }
.place-name { display: grid; align-items: center; min-height: 1.3em; font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.25; font-weight: 700; }
.place-name > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; opacity: 0; transform: translateY(30%); transition: opacity 360ms ease, transform 460ms var(--ease-out); }
.place-name .place-flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }
.place-name .place-local { font-size: clamp(1.25rem, 2.45vw, 2rem); line-height: 1.3; letter-spacing: -.025em; white-space: normal; text-wrap: balance; }
.place-name .place-zh { display: flex; align-items: flex-end; gap: .14em; line-height: 1; opacity: 1; transform: translateY(0); }
.place-emoji { flex-shrink: 0; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: clamp(14px, 1.9vw, 28px); font-weight: 400; line-height: 1; letter-spacing: .04em; }
.places.is-ready .place:not([data-state="zh"]) .place-zh { opacity: 0; transform: translateY(30%); }
.places.is-ready .place[data-state="flag"] .place-flag,
.places.is-ready .place[data-state="local"] .place-local { opacity: 1; transform: translateY(0); }
.places.is-ready .place:not([data-state="flag"]) .place-flag,
.places.is-ready .place[data-state="zh"] .place-local { transform: translateY(-30%); }
.sourcing-note { margin-top: var(--space-xl); font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); }
.future { --future-screen-height: max(740px, 100svh); --future-intro-opacity: 1; --future-intro-y: 0px; --future-vision-opacity: 0; --future-vision-y: 48px; position: relative; z-index: 2; }
.future-screen { position: relative; isolation: isolate; }
.future-colors { display: none; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: var(--future-color-field, #191817); }
.future-intro { padding-block: 96px; }
.future-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; margin-top: var(--space-2xl); }
.ocean-name { font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; line-height: .98; letter-spacing: -.055em; }
.future-copy .section-lead { margin-top: var(--space-xl); font-size: var(--text-lg); }
.future-figure { padding-left: var(--space-xl); border-left: 1px solid var(--color-faint-light); }
.future-metric { font-size: clamp(3rem, 6.8vw, 6.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; }
.future-figure > p:last-child { margin-top: var(--space-lg); color: var(--color-light-muted); font-size: var(--text-lg); line-height: 1.7; }
.future-vision { padding-block: 64px; background: #dcefff; color: #12324b; }
.future-vision-content { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.future-2028 { width: min(620px, 70vw); max-height: 43svh; object-fit: contain; }
.future-vision-copy, .future-sunlight { max-width: 810px; font-size: clamp(18px, 1.65vw, 24px); font-weight: 500; line-height: 1.85; letter-spacing: 0; text-wrap: balance; }
.future.is-scroll-ready { height: calc(var(--future-screen-height) * 3.4); }
.future.is-scroll-ready .future-screen { position: sticky; top: 0; display: grid; align-items: center; height: var(--future-screen-height); overflow: clip; }
.future.is-scroll-ready .future-colors { display: block; }
.future.is-scroll-ready .future-intro, .future.is-scroll-ready .future-vision { grid-area: 1 / 1; min-width: 0; }
.future.is-scroll-ready .future-intro { opacity: var(--future-intro-opacity); transform: translateY(var(--future-intro-y)); }
.future.is-scroll-ready .future-vision { background: transparent; opacity: var(--future-vision-opacity); transform: translateY(var(--future-vision-y)); }
.page-footer { position: relative; overflow: clip; isolation: isolate; z-index: 2; background: #000; color: #ababab; padding: 64px 0 32px; }
.home-return { position: relative; overflow: clip; isolation: isolate; z-index: 1; background: #fafaf5; padding-block: 64px; }
/* The bloom stays within the return strip, below its text and adjacent sections. */
.home-return::before { content: ''; position: absolute; z-index: -1; left: var(--bloom-x, 80%); top: var(--bloom-y, 88px); width: 48px; height: 48px; border-radius: 50%; background: #7e1d34; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: transform 950ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease; }
.home-return.is-blooming::before { opacity: 1; transform: translate(-50%, -50%) scale(var(--bloom-scale, 60)); }
.footer-content { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.footer-content p { color: #61392f; transition: color 300ms ease; font-size: clamp(20px, 2.4vw, 32px); font-weight: 600; }
.home-return.is-blooming .footer-content p { color: #fff; }
.home-button { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 52px; padding: 14px 32px; border-radius: 999px; background: #7e1d34; color: #fff; font-size: 16px; font-weight: 600; }
.home-button:hover, .home-button:focus-visible, .home-button:active { background: #7e1d34; transform: none; }
.page-footer .footer-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; padding-bottom: 64px; border-bottom: 1px solid rgb(255 255 255 / 8%); margin-bottom: 32px; }
.page-footer .footer-col h4 { margin: 0 0 16px; font-size: .8rem; letter-spacing: .1em; color: #f5f5f7; font-weight: 600; }
.page-footer .footer-col p, .page-footer .footer-col a { font-size: .9rem; line-height: 2; color: #ababab; display: block; transition: color .4s ease; }
.page-footer .footer-col a:hover { color: #f5f5f7; }
.page-footer .footer-social { display: flex; gap: 16px; margin-top: 8px; }
.page-footer .footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 6%); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.page-footer .footer-social a:hover { background: rgb(255 255 255 / 15%); transform: translateY(-2px); }
.page-footer .footer-bottom { text-align: center; font-size: .8rem; color: rgb(255 255 255 / 30%); padding-top: 16px; }
.page-footer .footer-bottom p { max-width: none; }
@media (max-width: 1024px) { .page-footer .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 734px) {
    .home-return { padding-block: 48px; }
    .footer-content { flex-direction: column; align-items: flex-start; gap: 24px; }
    .home-button { min-height: 48px; padding: 12px 28px; }
    .page-footer .footer-top { grid-template-columns: 1fr; gap: 32px; }
}
.report-dialog { width: 432px; max-width: calc(100vw - 32px); max-height: calc(100svh - 32px); padding: 32px; border: 1px solid rgb(126 29 52 / 8%); border-radius: 28px; background: #fffaf5; color: var(--color-ink); text-align: center; box-shadow: 0 28px 90px rgb(25 24 23 / 20%); overflow-y: auto; overscroll-behavior: contain; }
.report-dialog::backdrop { background: rgb(25 24 23 / 48%); backdrop-filter: blur(4px); }
.report-close-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: #f0ece7; color: #69615d; border-radius: 50%; cursor: pointer; }
.dialog-close:hover { background: #e7e1da; color: var(--color-ink); }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.report-brand { width: 52px; height: auto; margin: 0 auto 12px; }
.report-dialog h2 { max-width: none; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
.sample-qr-frame { width: min(264px, 100%); margin: 24px auto 0; padding: 8px; border: 1px solid #eee5dc; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgb(97 57 47 / 5%); }
.sample-qr-large { width: 100%; height: auto; }
.report-guide { margin-top: 24px; }
.sample-notice { display: flex; justify-content: center; align-items: center; gap: 7px; color: #7e1d34; font-size: 18px; font-weight: 700; line-height: 1.5; }
.sample-notice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sample-qr-caption { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--color-muted); }

@media (max-width: 760px) {
    .film-panel video { object-position: 50% 40%; }
    .film-panel[data-scene="1"] video { object-position: 55% 40%; }
    .film-panel[data-scene="2"] video { object-position: 48% 40%; }
    .commitment { padding-block: 20px; }
    .commitment-content { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .commitment-copy { font-size: 16px; white-space: normal; }
    .commitment-illustration { width: 120px; justify-self: center; }
    .principles { --principle-width: calc(100vw - 48px); --principle-gap: 12px; padding-block: 56px 48px; }
    .principles-heading { margin-bottom: 28px; }
    .principles-heading h2, .trace-copy h2 { font-size: clamp(1.5rem, 5.6vw, 1.875rem); line-height: 1.4; }
    .trace-copy h2 { font-size: clamp(1.95rem, 7.28vw, 2.4375rem); }
    .principle-card { height: 460px; border-radius: 24px; }
    .principle-card[data-principle="transparency"] { background: #eee0d3; }
    .principle-card[data-principle="transparency"] > img { height: 64%; object-fit: contain; }
    .principle-card[data-principle="global"] > img { object-position: 32% center; }
    .principle-card[data-principle="aqs"] > img { object-position: 40% center; }
    .principle-card[data-principle="future"] > img { object-position: 70% center; }
    .principle-caption { width: calc(100% - 40px); bottom: 32px; font-size: 20px; line-height: 1.6; }
    .principles-controls { gap: 8px; margin-top: 20px; }
    .principles-play { width: 44px; height: 44px; }
    .principles-dots button { height: 44px; }
    .desktop-break { display: none; }
    .trace-layout, .section-heading-row, .digital-layout, .future-layout { grid-template-columns: minmax(0, 1fr); }
    .section-heading-row { gap: var(--space-lg); }
    .traceability { padding-block: 96px; background-image: linear-gradient(180deg, rgb(250 250 245 / 92%) 0%, rgb(250 250 245 / 84%) 40%, rgb(250 250 245 / 70%) 100%), url('../assets/aqs/traceability-treats-background.png'); background-position: center; }
    .trace-layout { gap: 56px; }
    .trace-copy .section-lead { margin-top: 24px; }
    .trace-demo { max-width: 360px; }
    .receipt-front { padding: 26px 26px 22px; }
    .receipt-header h3 { font-size: 25px; }
    .receipt-header p { font-size: 13px; }
    .standards { padding-block: var(--space-3xl); }
    .standard-body { margin-top: var(--space-xl); }
    .standard-table { font-size: 14px; }
    .standard-item { width: 27%; }
    .standard-aqs { width: 45%; }
    .standard-baseline { width: 28%; }
    .standard-table th, .standard-table td { padding: 16px 10px; }
    .standard-table thead th { font-size: 13px; }
    .standard-table thead tr > :nth-child(2) { font-size: 16px; }
    .standard-note { font-size: 12px; }
    .digital-layout { margin-top: var(--space-xl); gap: var(--space-xl); }
    .factory-photo img { height: 300px; }
    .digital-details summary { font-size: var(--text-lg); }
    .requirements { --requirement-size: clamp(1.75rem, 8vw, 2.75rem); gap: 8px; padding-block: var(--space-lg); }
    .requirement-item { gap: 8px; }
    .requirement-caption { font-size: 12px; }
    .ingredients-explanation { margin-top: var(--space-lg); font-size: 14px; }
    .review-statement { font-size: var(--text-md); }
    .sourcing-heading { align-items: start; flex-direction: column; gap: var(--space-lg); }
    .places { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-xl); }
    .place { padding-block: var(--space-lg); }
    .place-name { font-size: clamp(2rem, 8vw, 3rem); min-height: 1.5em; }
    .place-name .place-local { font-size: clamp(1rem, 4.4vw, 1.25rem); }
    .future-intro { padding-block: 56px; }
    .future-layout { gap: 32px; margin-top: 40px; }
    .future-copy .section-lead { margin-top: 24px; font-size: 18px; }
    .future-figure { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--color-faint-light); }
    .future-metric { font-size: clamp(48px, 14vw, 72px); }
    .future-figure > p:last-child { margin-top: 16px; font-size: 16px; }
    .future-vision { padding-block: 40px; }
    .future-vision-content { gap: 24px; }
    .future-2028 { width: min(460px, 92vw); max-height: 36svh; }
    .future-vision-copy, .future-sunlight { max-width: 34em; font-size: 16px; line-height: 1.9; }
    .report-dialog { padding: 28px 24px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

.hero-video-retry {position:absolute;z-index:8;bottom:24px;left:50%;transform:translateX(-50%);min-height:44px;padding:10px 18px;border:1px solid #fff8;border-radius:24px;background:#0006;color:white;cursor:pointer;}
.hero-video-retry[hidden],.hero-brand-sequence[hidden]{display:none!important;}