/* Company page. Anthropic layout mapping and tokens are documented in DESIGN.md. */
@font-face { font-family: "Yanhuo Song"; src: url("yanhuo-assets/yanhuo-song-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Yanhuo Song"; src: url("yanhuo-assets/yanhuo-song-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
 --an-bg: #faf9f5;
 --an-surface: #f5f4ed;
 --an-secondary: #e8e6dc;
 --an-ink: #141413;
 --an-text: #30302e;
 --an-muted: #5e5d59;
 --an-border: #dedcd1;
 --an-border-strong: #c2c0b6;
 --an-focus: #154c92;
 --an-white: #fff;
 --an-overlay: rgba(20, 20, 19, .58);
 --an-modal-overlay: rgba(20, 20, 19, .45);
 --an-footer-text: #e8e6dc;
 --an-footer-muted: #b7b5ab;
 --an-footer-border: #44443f;
 --an-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
 --an-serif: "Yanhuo Song", "Songti SC", "STSong", Georgia, serif;
 --an-latin: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
 --an-regular: 400;
 --an-medium: 500;
 --an-bold: 700;
 --an-s1: 4px;
 --an-s2: 8px;
 --an-s3: 12px;
 --an-s4: 16px;
 --an-s5: 24px;
 --an-s6: 32px;
 --an-s7: 48px;
 --an-s8: 64px;
 --an-s9: 80px;
 --an-s10: 96px;
 --an-gutter: clamp(32px, 5.56vw, 80px);
 --an-max-width: 110rem;
 --an-header-height: 88px;
 --an-target: 44px;
 --an-pill-height: 44px;
 --an-icon: 20px;
 --an-logo: 32px;
 --an-brand-size: 22px;
 --an-nav-size: 14px;
 --an-nav-gap: 8px;
 --an-header-columns: auto 1fr auto;
 --an-header-order-brand: 1;
 --an-header-order-nav: 2;
 --an-header-order-tools: 3;
 --an-accent: #8b4b38;
 --an-accent-soft: #eee4dc;
 --an-stamp-size: 36px;
 --an-role-size: 72px;
 --an-role-icon: 32px;
 --an-connection: 64px;
 --an-mission-columns: minmax(0, 1fr) auto;
 --an-border-width: 1px;
 --an-radius-xs: 4px;
 --an-radius: 16px;
 --an-radius-button: 12px;
 --an-pill: 1000px;
 --an-label: 13px;
 --an-small: 15px;
 --an-body: 17px;
 --an-lead: 20px;
 --an-mission-size: clamp(48px, 6.2vw, 88px);
 --an-mission-en-size: clamp(40px, 4.5vw, 68px);
 --an-stat-size: 40px;
 --an-feature-size: clamp(42px, 4.86vw, 80px);
 --an-card-title: 22px;
 --an-feature-height: 40rem;
 --an-feature-mobile-height: 44rem;
 --an-feature-measure: 42rem;
 --an-description-measure: 30rem;
 --an-line-height: 1.5;
 --an-mission-leading: 1.25;
 --an-title-leading: 1.05;
 --an-tight: -.025em;
 --an-tracking: .04em;
 --an-cards: repeat(3, minmax(0, 1fr));
 --an-products: repeat(4, minmax(0, 1fr));
 --an-card-height: 29rem;
 --an-portrait: 4 / 5;
 --an-product-mobile-width: 32rem;
 --an-mist-color: #e9e3d3;
 --an-water-color: #becfc1;
 --an-petal-color: #bc694f;
 --an-petal-size: 5px;
 --an-pointer-x: 8px;
 --an-pointer-y: 5px;
 --an-motion-bleed: 16px;
 --an-motion-cycle: 18s;
 --an-motion-scale-start: 1.04;
 --an-motion-scale-end: 1.08;
 --an-motion-pan: .6%;
 --an-footer-columns: 1fr 2fr;
 --an-qr: 9rem;
 --an-dialog: 26rem;
 --an-search: 40rem;
 --an-dropdown: 21rem;
 --an-ease: cubic-bezier(.22, .61, .36, 1);
 --an-time: 220ms;
 --an-reveal-time: 600ms;
 --an-reveal-distance: 16px;
 --an-hover-scale: 1.025;
 --an-header-z: 100;
 --an-shadow: 0 24px 80px rgba(20, 20, 19, .18);
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--an-header-height) + var(--an-s5)); }
body { margin: 0; background: var(--an-bg); color: var(--an-ink); font: var(--an-regular) var(--an-body) / var(--an-line-height) var(--an-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--an-regular); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; width: var(--an-icon); height: var(--an-icon); }
summary { list-style: none; }
details:not([open]) > :not(summary) { display: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: calc(var(--an-border-width) * 2) solid var(--an-focus); outline-offset: var(--an-s1); }
[hidden] { display: none !important; }
::selection { color: var(--an-bg); background: var(--an-ink); }
.container { width: min(var(--an-max-width), calc(100% - var(--an-gutter) * 2)); margin-inline: auto; }
.skip { position: fixed; top: var(--an-s4); left: var(--an-gutter); z-index: calc(var(--an-header-z) + 1); background: var(--an-ink); color: var(--an-bg); padding: var(--an-s3) var(--an-s4); border-radius: var(--an-radius-xs); transform: translateY(-200%); }
.skip:focus { transform: none; }
.site-head { position: sticky; top: 0; background: var(--an-bg); z-index: var(--an-header-z); border-bottom: var(--an-border-width) solid var(--an-border); }
.header-inner { min-height: var(--an-header-height); display: grid; grid-template-columns: var(--an-header-columns); align-items: center; gap: var(--an-s6); position: relative; }
.nav-left, .header-tools { display: flex; align-items: center; gap: var(--an-nav-gap); }
.nav-left { order: var(--an-header-order-nav); justify-content: center; }
.brand { order: var(--an-header-order-brand); }
.header-tools { order: var(--an-header-order-tools); }
.header-tools { justify-content: end; }
.brand { min-width: var(--an-target); display: inline-flex; align-items: center; justify-content: center; gap: var(--an-s2); min-height: var(--an-target); }
.brand img { width: var(--an-logo); height: auto; }
.brand-word { font-size: var(--an-brand-size); font-weight: var(--an-bold); letter-spacing: var(--an-tracking); white-space: nowrap; }
.nav-pill, .icon-button { border: var(--an-border-width) solid var(--an-border); color: var(--an-text); background: var(--an-surface); display: inline-flex; align-items: center; justify-content: center; gap: var(--an-s2); min-height: var(--an-pill-height); padding: var(--an-s1) var(--an-s4); border-radius: var(--an-pill); font-size: var(--an-label); line-height: 1; white-space: nowrap; transition: background var(--an-time), border-color var(--an-time); }
.nav-pill:hover, .icon-button:hover { background: var(--an-secondary); border-color: var(--an-border-strong); }
.icon-button { width: var(--an-pill-height); padding: 0; border-radius: var(--an-radius-xs); }
.language-toggle { min-width: var(--an-pill-height); padding-inline: var(--an-s2); }
.nav-left > .nav-pill, .company-dropdown > .nav-pill { border-color: transparent; background: transparent; border-radius: var(--an-radius-xs); font-size: var(--an-nav-size); padding-inline: var(--an-s3); }
.nav-left > .nav-pill:hover, .company-dropdown > .nav-pill:hover { color: var(--an-accent); background: var(--an-surface); }
.header-tools > .icon-button, .header-tools > .language-toggle { background: transparent; border-color: transparent; border-radius: var(--an-pill); }
.header-tools > .icon-button:hover, .header-tools > .language-toggle:hover { background: var(--an-secondary); }
.header-tools > .language-toggle { margin-left: var(--an-s2); border-left-color: var(--an-border); border-radius: var(--an-radius-xs); }
.products-dropdown > .nav-pill { background: var(--an-ink); color: var(--an-bg); border-color: var(--an-ink); border-radius: var(--an-radius-button); padding-inline: var(--an-s5); font-size: var(--an-nav-size); }
.products-dropdown > .nav-pill:hover, .products-dropdown[open] > .nav-pill { background: var(--an-text); border-color: var(--an-text); }
.entry-label-short { display: none; }
.nav-dropdown { position: relative; }
.nav-dropdown summary svg { width: var(--an-s3); height: var(--an-s3); }
.nav-dropdown[open] > summary { background: var(--an-secondary); }
.nav-dropdown[open] > summary svg, .footer-disclosure[open] > summary svg, .lesson[open] > summary svg { transform: rotate(180deg); }
.dropdown-panel { position: absolute; top: calc(100% + var(--an-s3)); right: 0; width: var(--an-dropdown); border: var(--an-border-width) solid var(--an-border); border-radius: var(--an-radius-button); padding: var(--an-s3); background: var(--an-bg); box-shadow: var(--an-shadow); }
.menu-link { display: flex; align-items: center; justify-content: space-between; gap: var(--an-s4); min-height: var(--an-target); padding: var(--an-s3); font-size: var(--an-small); border-radius: var(--an-radius-xs); }
.menu-link:hover { background: var(--an-secondary); }
.site-nav { position: absolute; top: 100%; right: 0; width: min(var(--an-max-width), calc(100vw - var(--an-gutter) * 2)); max-height: calc(100dvh - var(--an-header-height) - var(--an-s5)); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--an-s6); padding: var(--an-s6); background: var(--an-bg); border: var(--an-border-width) solid var(--an-border); border-radius: var(--an-radius); box-shadow: var(--an-shadow); }
.site-nav .nav-pill { display: flex; min-height: var(--an-target); justify-content: start; margin-bottom: var(--an-s2); }
.menu-label { font-size: var(--an-label); color: var(--an-muted); margin-bottom: var(--an-s4); }
.mission { display: grid; grid-template-columns: var(--an-mission-columns); align-items: center; gap: var(--an-s7); padding-block: var(--an-s8); }
.mission-kicker { display: flex; align-items: center; gap: var(--an-s3); margin-bottom: var(--an-s5); font-size: var(--an-label); letter-spacing: var(--an-tracking); color: var(--an-muted); }
.mission-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--an-stamp-size); height: var(--an-stamp-size); border: var(--an-border-width) solid var(--an-accent); border-radius: var(--an-radius-xs); font-family: var(--an-serif); color: var(--an-accent); letter-spacing: 0; }
.mission h1 { display: flex; align-items: baseline; justify-content: start; gap: var(--an-s5); font-size: var(--an-mission-size); line-height: var(--an-mission-leading); letter-spacing: var(--an-tight); white-space: nowrap; }
.mission-lead { font-family: var(--an-font); font-weight: var(--an-bold); }
.mission-statement { font-family: var(--an-serif); }
html:lang(en) .mission h1 { font-size: var(--an-mission-en-size); }
html:lang(en) .mission-statement { font-family: var(--an-latin); }
.hero-feature { position: relative; height: var(--an-feature-height); overflow: hidden; background: var(--an-secondary); isolation: isolate; border-radius: var(--an-radius-xs); display: grid; place-items: center; }
.hero-art, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { object-fit: cover; }
.hero-shade { background: var(--an-overlay); }
.hero-copy { position: relative; color: var(--an-bg); text-align: center; width: min(var(--an-feature-measure), calc(100% - var(--an-gutter) * 2)); padding-block: var(--an-s7); }
.hero-copy h2 { font: var(--an-medium) var(--an-feature-size) / var(--an-title-leading) var(--an-serif); letter-spacing: var(--an-tight); margin-bottom: var(--an-s8); }
html:lang(en) .hero-copy h2 { font-family: var(--an-latin); }
.hero-description { max-width: var(--an-description-measure); margin-inline: auto; font-size: var(--an-lead); }
.hero-actions { display: flex; justify-content: center; gap: var(--an-s3); margin-top: var(--an-s5); flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--an-target); padding: var(--an-s2) var(--an-s5); border-radius: var(--an-radius-button); font-size: var(--an-body); transition: background var(--an-time); }
.button-light { color: var(--an-ink); background: var(--an-bg); }
.button-light:hover { background: var(--an-secondary); }
.button-dark { color: var(--an-bg); background: var(--an-ink); }
.button-dark:hover { background: var(--an-text); }
.highlights { display: grid; grid-template-columns: var(--an-cards); gap: var(--an-s4); padding-block: var(--an-s10) var(--an-s9); }
.highlight { display: flex; flex-direction: column; align-items: stretch; min-height: var(--an-card-height); padding: var(--an-s6); background: var(--an-surface); border-radius: var(--an-radius); }
.card-meta, .product-meta { display: flex; align-items: center; gap: var(--an-s4); color: var(--an-muted); font-size: var(--an-label); margin-bottom: var(--an-s4); }
.small-pill { display: inline-flex; align-items: center; justify-content: center; border: var(--an-border-width) solid var(--an-border); background: var(--an-secondary); min-width: var(--an-s6); padding: 0 var(--an-s2); border-radius: var(--an-pill); font-size: var(--an-label); line-height: var(--an-line-height); }
.highlight > h2 { font-size: var(--an-card-title); font-weight: var(--an-bold); line-height: var(--an-mission-leading); margin-bottom: var(--an-s3); }
.highlight > p { font-size: var(--an-small); margin-bottom: var(--an-s6); }
.card-facts { margin-top: auto; }
.card-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--an-s4); padding-block: var(--an-s4); border-top: var(--an-border-width) solid var(--an-border); font-size: var(--an-small); }
.card-facts dd { color: var(--an-muted); text-align: end; }
.card-action, .lesson > summary { display: flex; align-items: center; justify-content: center; gap: var(--an-s2); min-height: var(--an-target); padding: var(--an-s2) var(--an-s3); margin-top: var(--an-s2); background: var(--an-secondary); border-radius: var(--an-radius-button); font-size: var(--an-small); }
.card-action:hover, .lesson > summary:hover { background: var(--an-border); }
.lesson > summary svg { width: var(--an-s4); height: var(--an-s4); }
.lesson-dialogue { padding-top: var(--an-s5); font-size: var(--an-small); }
.lesson-dialogue > div { border-top: var(--an-border-width) solid var(--an-border); padding-block: var(--an-s4); }
.lesson-dialogue b { display: block; color: var(--an-muted); font-weight: var(--an-regular); margin-bottom: var(--an-s2); }
.lesson-note { color: var(--an-muted); font-size: var(--an-label); }
.products { padding-bottom: var(--an-s10); }
.section-rule { display: flex; justify-content: space-between; align-items: center; gap: var(--an-s5); padding-block: var(--an-s4); margin-bottom: var(--an-s7); border-block: var(--an-border-width) solid var(--an-border); font-size: var(--an-label); }
.section-label { font-size: inherit; font-weight: var(--an-bold); }
.section-rule > span { color: var(--an-muted); }
.product-grid { display: grid; grid-template-columns: var(--an-products); gap: var(--an-s4); }
.product { min-width: 0; }
.product-image { display: block; aspect-ratio: var(--an-portrait); overflow: hidden; border-radius: var(--an-radius-xs); background: var(--an-secondary); margin-bottom: var(--an-s5); }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--an-reveal-time) var(--an-ease); }
.product-image:hover img { transform: scale(var(--an-hover-scale)); }

.product h3 { font-size: var(--an-card-title); line-height: var(--an-mission-leading); font-weight: var(--an-bold); margin-bottom: var(--an-s3); }
.product-title-link { min-width: var(--an-target); display: inline-flex; align-items: center; min-height: var(--an-target); }
.product-description { color: var(--an-muted); font-size: var(--an-small); }
.text-link { display: inline-flex; align-items: center; gap: var(--an-s2); min-height: var(--an-target); font-size: var(--an-small); margin-top: var(--an-s3); text-decoration: underline; text-underline-offset: var(--an-s1); }
.text-link:hover { color: var(--an-ink); }
.site-foot { background: var(--an-ink); color: var(--an-footer-text); padding-block: var(--an-s9) var(--an-s6); border-radius: var(--an-radius-xs); }
.footer-grid { display: grid; grid-template-columns: var(--an-footer-columns); gap: var(--an-s7); }
.footer-brand { display: flex; align-items: center; gap: var(--an-s3); min-height: var(--an-target); align-self: start; font-weight: var(--an-bold); font-size: var(--an-brand-size); }
.footer-brand img { width: var(--an-logo); height: auto; }
.footer-disclosure { border-top: var(--an-border-width) solid var(--an-footer-border); }
.footer-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--an-s5); padding-block: var(--an-s5); min-height: var(--an-target); font-size: var(--an-small); color: var(--an-footer-muted); }
.footer-disclosure > summary:hover { color: var(--an-bg); }
.footer-disclosure summary svg { width: var(--an-s4); height: var(--an-s4); }
.disclosure-body { padding-bottom: var(--an-s6); font-size: var(--an-small); max-width: var(--an-search); }
.disclosure-body > p + p { margin-top: var(--an-s4); }
.disclosure-kicker { color: var(--an-footer-muted); }
.footer-link { display: inline-flex; align-items: center; gap: var(--an-s2); min-height: var(--an-target); margin-top: var(--an-s3); text-decoration: underline; text-underline-offset: var(--an-s1); }
.honors { padding: 0; list-style: none; }
.honors li { display: grid; grid-template-columns: auto 1fr; gap: var(--an-s5); padding-block: var(--an-s4); }
.honors li > span { color: var(--an-footer-muted); }
.footer-products .menu-link:hover { background: var(--an-text); }
.footer-contact { display: grid; grid-template-columns: 1fr auto; gap: var(--an-s7); padding-top: var(--an-s7); border-top: var(--an-border-width) solid var(--an-footer-border); }
.contact-title { font-family: var(--an-serif); font-size: var(--an-card-title); margin-bottom: var(--an-s4); }
.footer-contact p { font-size: var(--an-small); color: var(--an-footer-muted); }
.contact-email { display: inline-flex; align-items: center; min-height: var(--an-target); margin-top: var(--an-s4); font-size: var(--an-body); text-decoration: underline; text-underline-offset: var(--an-s1); overflow-wrap: anywhere; }
.contact-location { margin-top: var(--an-s3); }
.qr-trigger { display: block; width: fit-content; padding: var(--an-s2); background: var(--an-white); border-radius: var(--an-radius-xs); }
.qr-trigger img { width: var(--an-qr); height: auto; }
.contact-qr figcaption { margin-top: var(--an-s3); font-size: var(--an-label); color: var(--an-footer-muted); }
.contact-qr figcaption > * { display: block; }
.contact-qr small { font-size: inherit; margin-top: var(--an-s1); }
.footer-mission { grid-column: 2; color: var(--an-footer-muted); font-size: var(--an-label); max-width: var(--an-description-measure); padding-top: var(--an-s8); }
.footer-mission h2 { font-size: inherit; font-weight: var(--an-bold); margin-bottom: var(--an-s2); }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: var(--an-s5); padding-top: var(--an-s7); color: var(--an-footer-muted); font-size: var(--an-label); }
.back-top { display: inline-flex; align-items: center; min-height: var(--an-target); flex-shrink: 0; }
dialog { border: var(--an-border-width) solid var(--an-border); border-radius: var(--an-radius); padding: var(--an-s5); padding-bottom: calc(var(--an-s5) + env(safe-area-inset-bottom)); color: var(--an-ink); background: var(--an-bg); box-shadow: var(--an-shadow); max-height: calc(100dvh - var(--an-s7)); }
dialog::backdrop { background: var(--an-modal-overlay); }
#wechat-dialog { width: min(var(--an-dialog), calc(100% - var(--an-gutter))); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--an-s5); margin-bottom: var(--an-s5); }
.dialog-title { font-size: var(--an-lead); font-weight: var(--an-bold); }
dialog .icon-button { min-width: var(--an-target); min-height: var(--an-target); }
#wechat-dialog > img { width: 100%; height: auto; image-rendering: pixelated; }
#wechat-dialog > p { text-align: center; font-size: var(--an-small); margin-top: var(--an-s5); }
#search-dialog { width: min(var(--an-search), calc(100% - var(--an-gutter))); }
.search-label { display: block; color: var(--an-muted); font-size: var(--an-small); margin-bottom: var(--an-s2); }
#company-search { width: 100%; min-height: var(--an-target); padding: var(--an-s3) var(--an-s4); border: var(--an-border-width) solid var(--an-border-strong); border-radius: var(--an-radius-button); background: var(--an-white); font-size: var(--an-body); }
.search-results { padding: 0; margin-top: var(--an-s4); list-style: none; }
.search-result { display: flex; align-items: center; justify-content: space-between; min-height: var(--an-target); padding: var(--an-s3); border-radius: var(--an-radius-xs); font-size: var(--an-small); }
.search-result:hover { background: var(--an-secondary); }
.search-empty { margin-top: var(--an-s5); color: var(--an-muted); font-size: var(--an-small); }
.js [data-reveal] { opacity: 0; transform: translateY(var(--an-reveal-distance)); transition: opacity var(--an-reveal-time) var(--an-ease), transform var(--an-reveal-time) var(--an-ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
 html { scroll-behavior: smooth; }
 .js .hero-feature { animation: feature-open var(--an-reveal-time) var(--an-ease) both; }
 @keyframes feature-open { from { clip-path: inset(0 var(--an-gutter)); } to { clip-path: inset(0); } }
}
@media (max-width: 1280px) {
 .header-inner { grid-template-columns: auto 1fr; gap: var(--an-s4); }
 .nav-left { display: none; }
 .company-dropdown { display: none; }
}
@media (max-width: 1024px) {
 :root { --an-gutter: 32px; --an-header-height: 80px; --an-cards: minmax(0, 1fr); --an-products: minmax(0, 1fr); --an-feature-size: 48px; --an-mission-size: 64px; --an-mission-en-size: 56px; --an-stat-size: 32px; --an-mission-columns: minmax(0, 1fr); }
 .header-tools { gap: var(--an-s2); }
 .nav-pill, .icon-button { min-height: var(--an-target); }
 .icon-button, .language-toggle { min-width: var(--an-target); }
 .brand-word { font-size: var(--an-lead); }
 .site-nav { grid-template-columns: minmax(0, 1fr); padding: var(--an-s5); }
 .dropdown-panel { position: fixed; top: var(--an-header-height); right: var(--an-gutter); left: var(--an-gutter); width: auto; }
 .mission { padding-block: var(--an-s7); gap: var(--an-s6); }
 .mission h1 { gap: var(--an-s4); }
 html:lang(en) .mission h1 { flex-wrap: wrap; gap: 0 var(--an-s4); white-space: normal; }
 .hero-feature { height: var(--an-feature-mobile-height); }
 .hero-copy h2 { margin-bottom: var(--an-s7); }
 .highlights { padding-block: var(--an-s8); }
 .highlight { min-height: var(--an-card-height); }
 .products { padding-bottom: var(--an-s8); }
 .product-grid { gap: var(--an-s7); max-width: var(--an-product-mobile-width); margin-inline: auto; }
 .product-image { aspect-ratio: var(--an-portrait); }
 .footer-grid, .footer-contact { grid-template-columns: minmax(0, 1fr); }
 .contact-qr { justify-self: start; }
 .footer-mission { grid-column: auto; padding-top: var(--an-s5); }
 .footer-bottom { flex-direction: column; align-items: start; padding-top: var(--an-s5); }
 .site-foot { padding-top: var(--an-s8); }
 .nav-ready .site-nav:not([hidden]) { display: grid; }
}
@media (max-width: 480px) {
 :root { --an-feature-size: 40px; --an-brand-size: 22px; --an-mission-size: 48px; --an-mission-en-size: 44px; --an-role-size: 56px; --an-role-icon: 24px; --an-connection: 48px; --an-nav-size: 13px; }
 .brand-word { display: none; }
 .products-dropdown summary { padding-inline: var(--an-s3); }
 .products-dropdown summary svg { display: none; }
 .products-dropdown .entry-label-full { display: none; }
 .products-dropdown .entry-label-short { display: inline; }
 .language-toggle { padding-inline: var(--an-s2); }
 .hero-copy { width: calc(100% - var(--an-gutter) * 2); }
 .hero-art { object-position: 65% center; }
 .hero-description { font-size: var(--an-lead); }
 .highlight { padding: var(--an-s5); }
 .section-rule { align-items: start; flex-direction: column; gap: var(--an-s2); }
 .footer-contact { grid-template-columns: minmax(0, 1fr); gap: var(--an-s6); }
 .contact-qr { justify-self: start; }
 .header-tools { gap: var(--an-s1); }
 .header-tools > .language-toggle { margin-left: 0; }
 .mission { padding-block: var(--an-s6); }
 .mission-kicker { margin-bottom: var(--an-s4); }
 .mission h1 { gap: var(--an-s3); }
 html:lang(en) .mission h1 { min-height: calc(var(--an-mission-en-size) * var(--an-mission-leading) * 2); align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
 .js [data-reveal] { opacity: 1; transform: none; }
 .product-image:hover img { transform: none; }
}

.fallback-nav { display: flex; flex-wrap: wrap; gap: var(--an-s4); padding-block: var(--an-s4); }
.fallback-nav a { display: inline-flex; align-items: center; min-height: var(--an-target); min-width: var(--an-target); }

.role-exchange { display: flex; align-items: start; justify-content: center; gap: var(--an-s4); color: var(--an-muted); }
.role-person { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--an-s3); font-size: var(--an-small); }
.role-person svg { box-sizing: content-box; width: var(--an-role-icon); height: var(--an-role-icon); padding: calc((var(--an-role-size) - var(--an-role-icon)) / 2); background: var(--an-surface); border-radius: var(--an-pill); color: var(--an-ink); }
.role-person:last-child svg { color: var(--an-accent); background: var(--an-accent-soft); }
.role-connection { display: inline-flex; align-items: center; justify-content: center; width: var(--an-connection); height: var(--an-role-size); }
.impact-metrics { display: flex; flex-wrap: wrap; gap: var(--an-s5); margin-block: auto var(--an-s5); padding-top: var(--an-s6); }
.impact-metrics > div { flex: 1; display: flex; flex-direction: column; gap: var(--an-s2); }
.impact-metrics b { font: var(--an-regular) var(--an-stat-size) / var(--an-title-leading) var(--an-latin); letter-spacing: var(--an-tight); white-space: nowrap; }
.impact-metrics b span { font-size: var(--an-lead); vertical-align: top; }
.impact-metrics > div > span { color: var(--an-muted); font-size: var(--an-label); }
@media (max-width: 480px) {
 .role-exchange { justify-content: start; gap: var(--an-s3); }
 .role-person { font-size: var(--an-label); }
}

.hero-art-layer { position: absolute; inset: calc(var(--an-motion-bleed) * -1); transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0); transition: transform var(--an-reveal-time) var(--an-ease); pointer-events: none; }
.hero-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-motion-toggle { position: absolute; right: var(--an-s5); bottom: var(--an-s5); min-width: var(--an-target); min-height: var(--an-target); background: var(--an-ink); color: var(--an-bg); border-color: var(--an-muted); z-index: 1; }
.hero-motion-toggle:hover { background: var(--an-text); border-color: var(--an-bg); }
.hero-motion-toggle:disabled { cursor: default; }
.js .hero-art { animation: ink-scene-drift var(--an-motion-cycle) ease-in-out infinite alternate; }
.hero-motion-off .hero-art { animation-play-state: paused; }
@keyframes ink-scene-drift {
 from { transform: scale(var(--an-motion-scale-start)) translateX(calc(var(--an-motion-pan) * -1)); }
 to { transform: scale(var(--an-motion-scale-end)) translateX(var(--an-motion-pan)); }
}
@media (prefers-reduced-motion: reduce) {
 .hero-art-layer, .js .hero-art { transform: none; animation: none; }
 .hero-atmosphere { display: none; }
}