/* Generated by scripts/build_yooan_home_css.py; edit source files. */

/* Source: cta-system.css */
/*
 * YOOAN CTA System — 全站按钮唯一样式来源
 * ------------------------------------------------------------------
 * 一套系统，三个层级，共用同一个「左 → 右推移」动效语言：
 *   Primary   实心块  · 推移 = 橙色满块填充      → 留资/询价/提交
 *   Secondary 描边块  · 推移 = 实心填充（升级感）→ 浏览/查看/探索
 *   Text      文字链  · 推移 = 下划线重画        → 卡片内小入口
 *
 * 色值全部来自 theme.json，未新增任何颜色。
 * 圆角统一 2px。箭头统一为 SVG（不再使用 ↗\FE0E 文字字符）。
 * ------------------------------------------------------------------
 */

:root {
  --yooan-cta-radius: 2px;
  --yooan-cta-ease: cubic-bezier(.16, 1, .3, 1);
  --yooan-cta-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E");
  --yooan-cta-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E");
}

/* ==================================================================
   1. 共用基座
   ================================================================== */

.yooan-cta,
.ya-button,
.yh-hero__action,
.yh-cinema__media-link,
.yooan-origin-cta,
.yooan-footer__cta .wp-block-button__link,
.has-ink-background-color .yooan-footer__cta .wp-block-button__link {
  --cta-ink: #0E1733;
  --cta-paper: #FBF7E9;
  --cta-accent: #F5A20E;

  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  box-sizing: border-box;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1.35em;
  overflow: hidden;
  padding: .95rem 1.4rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--yooan-cta-radius) !important;
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .035em;
  text-decoration: none !important;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 220ms var(--yooan-cta-ease),
    box-shadow 220ms ease,
    color 200ms ease,
    border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* 推移色块：所有层级共用的同一个动作 */
.yooan-cta::before,
.ya-button::before,
.yh-hero__action::before,
.yh-cinema__media-link::before,
.yooan-footer__cta .wp-block-button__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--cta-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--yooan-cta-ease);
}

.yooan-cta:hover::before,
.yooan-cta:focus-visible::before,
.ya-button:hover::before,
.ya-button:focus-visible::before,
.yh-hero__action:hover::before,
.yh-hero__action:focus-visible::before,
.yh-cinema__media-link:hover::before,
.yh-cinema__media-link:focus-visible::before,
.yooan-footer__cta .wp-block-button__link:hover::before,
.yooan-footer__cta .wp-block-button__link:focus-visible::before {
  transform: scaleX(1);
}

/* 上浮 + 投影：给「可点」一个物理反馈 */
.yooan-cta:hover,
.yooan-cta:focus-visible,
.ya-button:hover,
.ya-button:focus-visible,
.yh-hero__action:hover,
.yh-hero__action:focus-visible,
.yh-cinema__media-link:hover,
.yh-cinema__media-link:focus-visible,
.yooan-origin-cta:hover,
.yooan-origin-cta:focus-visible,
.yooan-footer__cta .wp-block-button__link:hover,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -14px rgba(14, 23, 51, .55) !important;
}

.yooan-cta:active,
.ya-button:active,
.yh-hero__action:active,
.yh-cinema__media-link:active,
.yooan-origin-cta:active,
.yooan-footer__cta .wp-block-button__link:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* 键盘可见焦点：无障碍底线，不能省 */
.yooan-cta:focus-visible,
.ya-button:focus-visible,
.yh-hero__action:focus-visible,
.yh-cinema__media-link:focus-visible,
.yooan-origin-cta:focus-visible,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  outline: 2px solid var(--cta-accent);
  outline-offset: 3px;
}

/* ==================================================================
   2. 箭头 —— 统一为 SVG，替换掉原来的 ↗\FE0E / → 文字字符
   ================================================================== */

.yooan-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition:
    transform 320ms var(--yooan-cta-ease),
    background-color 200ms ease;
}

/* 页内滚动锚点用向下箭头（语义：往下看，不是跳走） */
.yooan-cta.is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button.is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  -webkit-mask-image: var(--yooan-cta-arrow-down);
  mask-image: var(--yooan-cta-arrow-down);
}

/* 箭头随推移一起「出发」 */
.yooan-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action:hover::after {
  transform: translate(3px, -3px);
}

.yooan-cta.is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button.is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translate(0, 3px);
}

/* ==================================================================
   3. Primary —— 实心块，橙色满块填充
   用于：询价 / 留资 / 提交表单 / 首页 Hero 主行动
   ================================================================== */

.yooan-cta--primary,
.ya-button:not(.ya-button--cream),
.yh-hero__action,
.yooan-origin-cta,
.yooan-footer__cta .wp-block-button__link,
.has-ink-background-color .yooan-footer__cta .wp-block-button__link {
  color: var(--cta-paper) !important;
  background: var(--cta-ink) !important;
}

/* 悬浮：橙块铺满后，文字与箭头必须转深色才够对比度 */
.yooan-cta--primary:hover,
.yooan-cta--primary:focus-visible,
.ya-button:not(.ya-button--cream):hover,
.ya-button:not(.ya-button--cream):focus-visible,
.yh-hero__action:hover,
.yh-hero__action:focus-visible,
.yooan-footer__cta .wp-block-button__link:hover,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  color: #0E1733 !important;
}

.yooan-cta--primary:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button:not(.ya-button--cream):hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action:hover::after {
  background-color: #0E1733;
}

/* ==================================================================
   4. Secondary —— 描边块，悬浮时填实（视觉上「升级」为主按钮）
   用于：查看案例 / 浏览产品 / 看资质
   ================================================================== */

.yooan-cta--secondary,
.ya-button--cream,
.yh-cinema__media-link {
  color: var(--cta-ink) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--cta-ink) 42%, transparent) !important;
}

.yooan-cta--secondary::before,
.ya-button--cream::before,
.yh-cinema__media-link::before {
  background: var(--cta-ink);
}

.yooan-cta--secondary:hover,
.yooan-cta--secondary:focus-visible,
.ya-button--cream:hover,
.ya-button--cream:focus-visible,
.yh-cinema__media-link:hover,
.yh-cinema__media-link:focus-visible {
  color: var(--cta-paper) !important;
  border-color: var(--cta-ink) !important;
}

.yooan-cta--secondary:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button--cream:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background-color: var(--cta-paper);
}

/* ==================================================================
   5. 深色区块上下文 —— 墨蓝底上把明暗对调
   ================================================================== */

/* 深色由「所在区块」决定，不由按钮变体名决定。
   实测深底区块：.ya-cta / .ya-footer / .ya-manufacturing / .ya-process / .ya-projects
   （.ypr-installation、.ypr-evidence 是浅底，不能算进来） */
.has-ink-background-color .yooan-cta,
.has-ink-background-color .ya-button,
.has-ink-background-color .ya-text-link,
.is-style-yooan-dark-section .yooan-cta,
.is-style-yooan-dark-section .ya-button,
.ya-manufacturing .ya-button,
.ya-manufacturing .ya-text-link,
.ya-process .ya-button,
.ya-process .ya-text-link,
.ya-projects .ya-button,
.ya-projects .ya-text-link,
.ya-cta .ya-button,
.ya-cta .ya-text-link,
.ya-footer .ya-button,
.ya-footer .ya-text-link,
.yh-cinema__media-link {
  --cta-ink: #FBF7E9;
  --cta-paper: #0E1733;
}

/* ==================================================================
   6. Text —— 文字 + 下划线重画（推移动作的最轻量版本）
   用于：卡片内小入口、并列的次要链接
   ================================================================== */

.yooan-cta--text,
.ya-text-link,
.yh-cinema__intro-side a,
.yooan-projects-hero__cta,
.yooan-origin-cta.yooan-projects-hero__cta {
  --cta-ink: #0E1733;
  --cta-accent: #F5A20E;

  position: relative;
  display: inline-flex !important;
  min-height: 0 !important;
  align-items: center;
  justify-content: flex-start;
  gap: .6em;
  overflow: visible !important;
  padding: 6px 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cta-ink) 28%, transparent) !important;
  border-radius: 0 !important;
  color: var(--cta-ink) !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-decoration: none !important;
  transform: none !important;
}

.ya-text-link--light,
.yooan-projects-hero__cta {
  --cta-ink: #FBF7E9;
}

/* 橙色线从左到右重画一遍 */
.yooan-cta--text::before,
.ya-text-link::before,
.yh-cinema__intro-side a::before,
.yooan-projects-hero__cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--cta-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--yooan-cta-ease);
}

.yooan-cta--text:hover::before,
.yooan-cta--text:focus-visible::before,
.yh-cinema__intro-side a:hover::before,
.yh-cinema__intro-side a:focus-visible::before,
.ya-text-link:hover::before,
.ya-text-link:focus-visible::before,
.yooan-projects-hero__cta:hover::before,
.yooan-projects-hero__cta:focus-visible::before {
  transform: scaleX(1);
}

.yooan-cta--text:hover,
.ya-text-link:hover,
.yooan-projects-hero__cta:hover {
  color: var(--cta-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

.yooan-cta--text span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-text-link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-projects-hero__cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition: transform 320ms var(--yooan-cta-ease), background-color 200ms ease;
}

.yooan-cta--text:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-text-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-projects-hero__cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translate(3px, -3px);
}

/* 文字层级不需要 JS 注入的圆形涟漪 */
.yooan-projects-hero__cta .yooan-origin-cta__fill {
  display: none !important;
}

/* ==================================================================
   7. 接管 cta-buttons.js 注入的涟漪：改成同一套左 → 右推移
   （不改 JS，只改它生成的那个 span 的表现）
   ================================================================== */

.yooan-origin-cta__fill {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--cta-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 460ms var(--yooan-cta-ease) !important;
}

.yooan-origin-cta.is-hovered .yooan-origin-cta__fill,
.yooan-origin-cta:hover .yooan-origin-cta__fill,
.yooan-origin-cta:focus-visible .yooan-origin-cta__fill {
  transform: scaleX(1) !important;
}

.yooan-origin-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 1.35em;
}

.yooan-origin-cta.is-hovered,
.yooan-origin-cta:hover,
.yooan-origin-cta:focus-visible {
  color: #0E1733 !important;
  background: var(--cta-ink) !important;
}

.yooan-origin-cta.is-hovered span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background-color: #0E1733;
}

/* ==================================================================
   8. 尺寸变体与窄屏
   ================================================================== */

.ya-button--small,
.yooan-cta--small {
  min-height: 42px;
  padding: .7rem 1.05rem !important;
  font-size: .75rem;
}

@media (max-width: 700px) {
  .yooan-cta,
  .ya-button,
  .yh-hero__action,
  .yooan-footer__cta .wp-block-button__link {
    gap: 1em;
    padding: .85rem 1.15rem !important;
    font-size: .75rem;
  }
}

/* ==================================================================
   9. 降低动效偏好 —— 系统设置里关了动画的用户，只保留状态变化
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .yooan-cta,
  .ya-button,
  .yh-hero__action,
  .yh-cinema__media-link,
  .yooan-origin-cta,
  .ya-text-link,
  .yooan-projects-hero__cta,
  .yooan-cta::before,
  .ya-button::before,
  .yh-hero__action::before,
  .yh-cinema__media-link::before,
  .ya-text-link::before,
  .yooan-projects-hero__cta::before,
  .yooan-origin-cta__fill,
  .yooan-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
  .ya-button span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
    transition-duration: 1ms !important;
  }

  .yooan-cta:hover,
  .ya-button:hover,
  .yh-hero__action:hover,
  .yooan-origin-cta:hover {
    transform: none !important;
  }
}


/* ==================================================================
   10. 特指度补丁
   components.css 用 `header .wp-block-navigation-item__content[href*="page_id=1052"]`
   （特指度 0,2,1 且带 !important）锁住了导航里的询价按钮，
   这里用同等特指度把它拉回 Primary，而不是靠堆 !important。
   ================================================================== */

header .wp-block-navigation-item__content[href*="page_id=1052"] {
  --cta-ink: #0E1733;
  --cta-paper: #FBF7E9;
  --cta-accent: #F5A20E;

  min-height: 42px !important;
  padding: .7rem 1.05rem !important;
  border-radius: var(--yooan-cta-radius) !important;
  color: var(--cta-paper) !important;
  background: var(--cta-ink) !important;
  font-size: .75rem;
}

header .wp-block-navigation-item__content[href*="page_id=1052"]:hover,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible {
  color: #0E1733 !important;
  background: var(--cta-ink) !important;
}

/* ==================================================================
   11. 没有箭头 span 的按钮（区块编辑器生成的 / 导航里的）自动补一个
   用 :has() 判断「内部没有箭头 span」，避免已有箭头的按钮出现两个。
   老浏览器不支持 :has() 时只是没有箭头，不会错版。
   ================================================================== */

.yooan-origin-cta:not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after,
header .wp-block-navigation-item__content[href*="page_id=1052"]:not(:has(span[aria-hidden="true"]))::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition:
    transform 320ms var(--yooan-cta-ease),
    background-color 200ms ease;
}

.yooan-origin-cta:not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):hover::after,
header .wp-block-navigation-item__content[href*="page_id=1052"]:not(:has(span[aria-hidden="true"])):hover::after {
  background-color: #0E1733;
  transform: translate(3px, -3px);
}

/* Final layer-integrity pass: fills touch the button edge and labels stay above. */
.yooan-origin-cta {
  overflow: hidden !important;
  border: 0 !important;
  isolation: isolate !important;
}

.yooan-origin-cta > .yooan-origin-cta__fill {
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.yooan-origin-cta > .yooan-origin-cta__label {
  position: relative !important;
  z-index: 2 !important;
  color: var(--cta-paper) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.yooan-origin-cta:hover > .yooan-origin-cta__label,
.yooan-origin-cta:focus-visible > .yooan-origin-cta__label,
.yooan-origin-cta.is-hovered > .yooan-origin-cta__label {
  color: #0E1733 !important;
}

.wp-block-button.is-style-outline .yooan-origin-cta > .yooan-origin-cta__label {
  color: var(--cta-ink) !important;
}

header .wp-block-navigation-item__content[href*="page_id=1052"] > .yooan-origin-cta__label {
  color: #FBF7E9 !important;
}
header .wp-block-navigation-item__content[href*="page_id=1052"] > .yooan-origin-cta__label .wp-block-navigation-item__label {
  color: #FBF7E9 !important;
}

header .wp-block-navigation-item__content[href*="page_id=1052"]:hover > .yooan-origin-cta__label,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible > .yooan-origin-cta__label,
header .wp-block-navigation-item__content[href*="page_id=1052"].is-hovered > .yooan-origin-cta__label {
  color: #0E1733 !important;
}
header .wp-block-navigation-item__content[href*="page_id=1052"]:hover > .yooan-origin-cta__label .wp-block-navigation-item__label,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible > .yooan-origin-cta__label .wp-block-navigation-item__label,
header .wp-block-navigation-item__content[href*="page_id=1052"].is-hovered > .yooan-origin-cta__label .wp-block-navigation-item__label {
  color: #0E1733 !important;
}


/* ==================================================================
   12. 胶囊滑动按钮（2026-09-18 起全站生效，覆盖上方 1–8 节的形状与动效）
   来源：21st.dev「Button with Icon」，纯 CSS 移植
   - 形状：999px 胶囊；箭头变成右侧 40px 圆形图标
   - 悬浮：圆形从右滑到左，↗\FE0E 旋转 45° 成 →（↓ 只滑不转），文字反向让位
   - 旧的「左→右推移」色块全部关闭；Text 文字链层级不受影响
   箭头颜色写死在 SVG 里，所以按明暗上下文各准备一套：
     --pill-a-*  = 实心按钮圆形里的箭头（浅区块深色 / 深区块浅色）
     --pill-b-*  = 描边按钮圆形里的箭头（与 a 相反）
   ================================================================== */

:root { --yooan-cta-radius: 999px; }

:where(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link) {
  --pill-a-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-a-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-b-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-b-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-ease: cubic-bezier(.4, 0, .2, 1);
  --pill-size: 40px;
  --pill-pad: 1.5rem;
  --pill-room: 56px;
}
:where(.has-ink-background-color .yooan-cta, .has-ink-background-color .ya-button, .is-style-yooan-dark-section .yooan-cta, .is-style-yooan-dark-section .ya-button, .ya-manufacturing .ya-button, .ya-process .ya-button, .ya-projects .ya-button, .ya-cta .ya-button, .ya-footer .ya-button, .yh-cinema__media-link) {
  --pill-a-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-a-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-b-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-b-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}

html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) {
  justify-content: flex-start !important;
  min-height: 48px;
  padding: .7rem var(--pill-room) .7rem var(--pill-pad) !important;
  border-radius: 999px !important;
  text-align: left;
  transition:
    padding 500ms var(--pill-ease),
    background-color 300ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 220ms var(--yooan-cta-ease),
    box-shadow 220ms ease !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible {
  padding: .7rem var(--pill-pad) .7rem var(--pill-room) !important;
}

/* 关掉旧的推移色块 / JS 涟漪 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link)::before,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) > .yooan-origin-cta__fill { display: none !important; }
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) > .yooan-origin-cta__label { position: static !important; }

/* 圆形图标（实心按钮：圆 = 反色，箭头 = 按钮底色） */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after {
  position: absolute !important;
  z-index: 1;
  top: 50%;
  right: 4px;
  left: auto;
  display: block !important;
  width: var(--pill-size) !important;
  height: var(--pill-size) !important;
  flex: none !important;
  border-radius: 50%;
  background: var(--pill-a-ne) center / 16px no-repeat, var(--cta-paper) !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: translateY(-50%) !important;
  transition: right 500ms var(--pill-ease), transform 500ms var(--pill-ease) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-a-dn) center / 16px no-repeat, var(--cta-paper) !important;
}
/* 描边按钮：圆 = 实色，箭头 = 反色 */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-b-ne) center / 16px no-repeat, var(--cta-ink) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-b-dn) center / 16px no-repeat, var(--cta-ink) !important;
}

/* 悬浮：圆形滑到左侧 + 旋转 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action:hover::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):hover::after,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action:focus-visible::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):focus-visible::after {
  right: calc(100% - var(--pill-size) - 4px);
  transform: translateY(-50%) rotate(45deg) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down:focus-visible span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translateY(-50%) !important;
}

/* 悬浮颜色：不再铺橙色块，改为底色轻微变化 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-hovered {
  color: var(--cta-paper) !important;
  background: color-mix(in srgb, var(--cta-ink) 86%, var(--cta-paper)) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover > .yooan-origin-cta__label,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible > .yooan-origin-cta__label,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-hovered > .yooan-origin-cta__label { color: var(--cta-paper) !important; }

html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):hover,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):focus-visible,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-hovered {
  color: var(--cta-ink) !important;
  background: color-mix(in srgb, var(--cta-ink) 8%, transparent) !important;
  border-color: var(--cta-ink) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):hover > .yooan-origin-cta__label,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-hovered > .yooan-origin-cta__label { color: var(--cta-ink) !important; }

/* 描边按钮静态态（顺带修复：区块编辑器 outline 按钮原先是深底深字，看不见） */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) {
  color: var(--cta-ink) !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--cta-ink) 42%, transparent) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) > .yooan-origin-cta__label { color: var(--cta-ink) !important; }

/* 首页影院区的链接在窄屏靠右绝对定位，胶囊变宽后会被挤出左边 */
@media (max-width: 600px) {
  html .yh-cinema__media-link { --pill-pad: 1rem; max-width: calc(100% - 44px); letter-spacing: .04em; }
}

/* 区块编辑器 outline 按钮没有箭头 span，圆形在 ::after 上 */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after {
  background: var(--pill-b-ne) center / 16px no-repeat, var(--cta-ink) !important;
}

/* 询价变体（橙色胶囊）：页脚 Request a Quote、内页顶栏 Get a Quote，以及以后任何加了 .yooan-cta--quote 的按钮
   规则：橙色只给「询价/报价」动作，全站一眼可找 */
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) {
  color: #0E1733 !important;
  background: #F5A20E !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) > .yooan-origin-cta__label { color: #0E1733 !important; }
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A20E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 16px no-repeat, #0E1733 !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):hover,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):focus-visible,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote).is-hovered {
  color: #0E1733 !important;
  background: #FFB52E !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):hover > .yooan-origin-cta__label,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote).is-hovered > .yooan-origin-cta__label { color: #0E1733 !important; }

/* 内页顶栏的 Get a Quote：about.css 给了固定宽度（126–176px），胶囊需要随文字撑开 */
html body .yooan-interior-reference-nav > .ya-button--quote { width: fit-content !important; border: 0 !important; font-size: 12px !important; font-weight: 600; }
@media (max-width: 782px) {
  html body .yooan-interior-reference-nav > .ya-button--quote { font-size: 11px !important; }
}

/* 小尺寸 */
html :is(.ya-button--small, .yooan-cta--small) {
  --pill-size: 34px;
  --pill-pad: 1.1rem;
  --pill-room: 46px;
  min-height: 42px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) { --pill-pad: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link),
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after { transition-duration: 1ms !important; }
}

/* 2026-10-02 · Projects hero text link: the generic .yooan-origin-cta hover rule (navy fill + navy label)
   was painting a blank navy block over it. Keep it a text link on hover/tap/focus. */
html .yooan-projects-hero__cta.yooan-origin-cta:hover,
html .yooan-projects-hero__cta.yooan-origin-cta:focus-visible,
html .yooan-projects-hero__cta.yooan-origin-cta.is-hovered {
  background: none !important;
  color: #FBF7E9 !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}
html .yooan-projects-hero__cta.yooan-origin-cta > .yooan-origin-cta__label,
html .yooan-projects-hero__cta.yooan-origin-cta:hover > .yooan-origin-cta__label,
html .yooan-projects-hero__cta.yooan-origin-cta:focus-visible > .yooan-origin-cta__label {
  color: #FBF7E9 !important;
}


/* Source: site-nav.css */
/* =========================================================================
   YOOAN 全站导航（2026-09-18）— OH Architecture 模式
   顶部：毛玻璃顶栏 Logo + 横排链接 + MENU + Get a Quote   →   滚动后：只剩 MENU + Get a Quote 胶囊
   点击 MENU：顶栏变实色奶油色，浮在深蓝全屏菜单之上（2026-09-23）
   MENU：深蓝全屏大字菜单      Get a Quote：右侧 3 步询价抽屉
   文字特效：CascadeText（逐字母向上翻滚）
   ========================================================================= */

:root{
  --ysn-ink:#0E1733;
  --ysn-paper:#FBF7E9;
  --ysn-accent:#F5A20E;
  --ysn-pill:#EFE8D2;
  --ysn-display:YASchibsted,"Schibsted Grotesk Variable","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ysn-body:YAFustat,"Fustat Variable","Helvetica Neue",Arial,sans-serif;
  --ysn-gutter:clamp(16px,2.4vw,32px);
  --ysn-ease:cubic-bezier(.16,1,.3,1);
}
html.ysn-lock{overflow:hidden}
/* 区块主题会给 .wp-site-blocks 的子元素加 margin-block-start，这里清零 */
.wp-site-blocks > :is(.ysn,.ysn-crumb,.ysn-menu,.ysn-drawer,.ysn-skip){margin-block:0 !important}
.ysn *,.ysn-menu *,.ysn-drawer *,.ysn-crumb *{box-sizing:border-box}

.ysn-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ysn-skip{position:fixed;top:-80px;left:16px;z-index:1100;background:#fff;color:var(--ysn-ink);padding:12px 16px;border-radius:999px}
.ysn-skip:focus{top:16px}

/* ---------- CascadeText：逐字母向上翻滚 ---------- */
[data-ysn-cascade].is-split{display:inline-flex;overflow:hidden;height:1.12em;line-height:1.12em;vertical-align:bottom}
[data-ysn-cascade] .ysn-ch{display:inline-block;white-space:pre;text-shadow:0 1.12em currentColor;transition:transform .25s ease-in-out;transition-delay:calc(var(--ysn-c,0) * 25ms);will-change:transform}
:is(a,button):hover > [data-ysn-cascade] .ysn-ch,
:is(a,button):focus-visible > [data-ysn-cascade] .ysn-ch,
a[data-ysn-cascade]:hover .ysn-ch,
a[data-ysn-cascade]:focus-visible .ysn-ch,
.ysn-menu__big:hover .ysn-ch,
.ysn-menu__big:focus-visible .ysn-ch,
.ysn-menu__sub a:hover .ysn-ch,
.ysn-menu__sub a:focus-visible .ysn-ch{transform:translateY(-1.12em)}
@media (hover:none){[data-ysn-cascade] .ysn-ch{transition:none}}

/* ---------- 顶栏（2026-09-23 改版：毛玻璃 → 点击 MENU 变实色） ----------
   默认：半透明毛玻璃，会根据下方背景自动切换深/浅两种色调（JS 采样，写到 html[data-ysn-tone]）
   点击 MENU：顶栏变成实色奶油色（#EFE8D2）并浮在全屏菜单之上，MENU 变 CLOSE
   ------------------------------------------------------------------------- */
:root{
  /* 顶栏玻璃：无 JS 时的兜底色调（深蓝半透明，深浅背景上都能看清） */
  --ysn-g-bg:rgba(14,23,51,.62);--ysn-g-fg:var(--ysn-paper);--ysn-g-mute:rgba(251,247,233,.5);--ysn-g-bd:rgba(255,255,255,.14);--ysn-g-hl:rgba(255,255,255,.14);
  /* MENU 胶囊玻璃 */
  --ysn-p-bg:rgba(14,23,51,.62);--ysn-p-fg:var(--ysn-paper);--ysn-p-bd:rgba(255,255,255,.14);--ysn-p-hl:rgba(255,255,255,.14);
  --ysn-solid:#EFE8D2;
  --ysn-blur:blur(18px) saturate(1.6);
}
/* 深色背景上（图片、视频、深色区块）：透明度更高的烟灰玻璃 + 奶油色文字 */
html[data-ysn-tone=dark]{--ysn-g-bg:rgba(18,22,36,.4);--ysn-g-fg:var(--ysn-paper);--ysn-g-mute:rgba(251,247,233,.55);--ysn-g-bd:rgba(255,255,255,.2);--ysn-g-hl:rgba(255,255,255,.22)}
html[data-ysn-ptone=dark]{--ysn-p-bg:rgba(18,22,36,.4);--ysn-p-fg:var(--ysn-paper);--ysn-p-bd:rgba(255,255,255,.2);--ysn-p-hl:rgba(255,255,255,.22)}
/* 浅色背景上（奶油色/白色区块）：乳白玻璃 + 深蓝文字 */
html[data-ysn-tone=light]{--ysn-g-bg:rgba(255,253,246,.46);--ysn-g-fg:var(--ysn-ink);--ysn-g-mute:rgba(14,23,51,.4);--ysn-g-bd:rgba(14,23,51,.08);--ysn-g-hl:rgba(255,255,255,.7)}
html[data-ysn-ptone=light]{--ysn-p-bg:rgba(255,253,246,.46);--ysn-p-fg:var(--ysn-ink);--ysn-p-bd:rgba(14,23,51,.08);--ysn-p-hl:rgba(255,255,255,.7)}

.ysn{position:fixed;inset:0 0 auto 0;z-index:1000;pointer-events:none;font-family:var(--ysn-body)}
html.ysn-menu-open .ysn{z-index:1055}

.ysn-bar{position:relative;pointer-events:auto;display:flex;align-items:center;gap:40px;margin:14px var(--ysn-gutter) 0;padding:0 clamp(18px,2vw,28px);height:64px;
  background-color:var(--ysn-g-bg);color:var(--ysn-g-fg);
  -webkit-backdrop-filter:var(--ysn-blur);backdrop-filter:var(--ysn-blur);
  border:1px solid var(--ysn-g-bd);border-radius:18px;
  box-shadow:inset 0 1px 0 var(--ysn-g-hl),0 10px 30px rgba(14,23,51,.08);
  transition:opacity .45s var(--ysn-ease),transform .55s var(--ysn-ease),background-color .45s ease,color .35s ease,border-color .45s ease,box-shadow .45s ease}
/* 玻璃高光：上亮下透，模拟视频里的玻璃反光 */
.ysn-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,0) 100%);transition:opacity .45s ease}
.ysn-logo{display:inline-flex;align-items:center;flex:none;width:118px;color:var(--ysn-accent)}
.ysn-logo svg,.ysn-logo img{display:block;width:100%;height:auto}
.ysn-inline{display:flex;align-items:center;margin-left:auto;margin-right:clamp(300px,23vw,340px);font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:opacity .3s ease,visibility 0s}
.ysn-inline a{color:var(--ysn-g-fg);opacity:.9;text-decoration:none;transition:color .3s,opacity .3s}
.ysn-inline a:hover,.ysn-inline a:focus-visible{opacity:1;color:var(--ysn-accent)}
.ysn-inline a.is-current{opacity:1;color:var(--ysn-accent)}
html[data-ysn-tone=light] .ysn-inline a.is-current{color:#C77E00}
.ysn-comma{margin-right:.55em;color:var(--ysn-g-mute)}

/* 右上角胶囊：MENU（玻璃） + Get a Quote（橙色实心，保持不变） */
.ysn-pills{pointer-events:auto;position:fixed;top:26px;right:calc(var(--ysn-gutter) + clamp(12px,1.2vw,16px));display:flex;align-items:center;gap:8px;z-index:1001}
.ysn .ysn-quote{box-shadow:0 8px 24px rgba(14,23,51,.18)}
html body .ysn-menu-btn{all:unset;box-sizing:border-box;order:-1;position:relative;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 15px;border-radius:999px;
  background-color:var(--ysn-p-bg);color:var(--ysn-p-fg);border:1px solid var(--ysn-p-bd);
  -webkit-backdrop-filter:var(--ysn-blur);backdrop-filter:var(--ysn-blur);
  box-shadow:inset 0 1px 0 var(--ysn-p-hl),0 8px 24px rgba(14,23,51,.12);
  font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:background-color .45s ease,color .35s ease,border-color .45s ease,box-shadow .45s ease,transform .2s ease}
.ysn-menu-btn:hover{border-color:var(--ysn-accent)}
.ysn-menu-btn:active{transform:scale(.97)}
.ysn-menu-btn:focus-visible{outline:2px solid var(--ysn-accent);outline-offset:3px}
/* 汉堡图标：两条线，打开时转成 × */
.ysn-burger{position:relative;display:block;width:16px;height:10px;flex:none}
.ysn-burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s var(--ysn-ease),top .45s var(--ysn-ease)}
.ysn-burger i:first-child{top:1px}
.ysn-burger i:last-child{top:7.5px}
.ysn-mb-t--close{display:none}

/* 滚动后：顶栏收起，只留两个胶囊 */
.ysn.is-scrolled .ysn-bar{opacity:0;transform:translateY(-120%);pointer-events:none}

/* ===== 点击 MENU 后：顶栏变实色（与视频一致），并浮在全屏菜单之上 ===== */
html.ysn-menu-open .ysn .ysn-bar{opacity:1;transform:none;pointer-events:auto;background-color:var(--ysn-solid);color:var(--ysn-ink);border-color:var(--ysn-solid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px rgba(0,0,0,.28)}
html.ysn-menu-open .ysn-bar::before{opacity:0}
html.ysn-menu-open .ysn-inline{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
html.ysn-menu-open body .ysn-menu-btn{background-color:rgba(14,23,51,.07);color:var(--ysn-ink);border-color:rgba(14,23,51,.12);box-shadow:none}
html.ysn-menu-open body .ysn-menu-btn:hover{border-color:var(--ysn-ink)}
html.ysn-menu-open .ysn-burger i:first-child{top:4.25px;transform:rotate(45deg)}
html.ysn-menu-open .ysn-burger i:last-child{top:4.25px;transform:rotate(-45deg)}
html.ysn-menu-open .ysn-mb-t--menu{display:none}
html.ysn-menu-open .ysn-mb-t--close{display:inline}
/* 全屏菜单自带的 Logo / Close 行由上面的实色顶栏代替，这里只保留占位高度 */
html.ysn-menu-open .ysn-menu__top{visibility:hidden}

/* ---------- 面包屑：只在页面顶部，随页面滚走（同样用玻璃，跟随顶栏色调） ---------- */
.ysn-crumb{position:absolute;top:92px;left:calc(var(--ysn-gutter) + 4px);z-index:990;font-family:var(--ysn-body);font-size:12px;transition:opacity .35s}
.ysn-crumb ol{display:flex;align-items:center;gap:8px;margin:0;padding:7px 14px;list-style:none;border-radius:999px;
  background-color:var(--ysn-g-bg);border:1px solid var(--ysn-g-bd);-webkit-backdrop-filter:var(--ysn-blur);backdrop-filter:var(--ysn-blur);color:var(--ysn-g-fg);opacity:.92;transition:background-color .45s,color .35s,border-color .45s}
.ysn-crumb a{color:inherit;text-decoration:none;opacity:.75}
.ysn-crumb a:hover{color:var(--ysn-accent);opacity:1}
.ysn-crumb svg{display:block;width:14px;height:14px;fill:currentColor}
.ysn-crumb [aria-current]{color:inherit}
html.ysn-scrolled .ysn-crumb{opacity:0;pointer-events:none}
.admin-bar .ysn-bar{margin-top:46px}.admin-bar .ysn-pills{top:58px}.admin-bar .ysn-crumb{top:124px}

/* ---------- 全屏菜单 ---------- */
.ysn-menu{position:fixed;inset:0;z-index:1050;display:flex;flex-direction:column;background:var(--ysn-ink);color:var(--ysn-paper);font-family:var(--ysn-body);overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ysn-ease)}
.ysn-menu[hidden]{display:none}
.ysn-menu.is-open{clip-path:inset(0 0 0 0)}
.ysn-menu__top{display:flex;align-items:center;justify-content:space-between;padding:26px calc(var(--ysn-gutter) + 16px) 0}
html body .ysn-close{all:unset;box-sizing:border-box;cursor:pointer;height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(251,247,233,.28);color:var(--ysn-paper);display:inline-flex;align-items:center;
  font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:border-color .3s,color .3s}
.ysn-close:hover{border-color:var(--ysn-accent);color:var(--ysn-accent)}
.ysn-close:focus-visible{outline:2px solid var(--ysn-accent);outline-offset:3px}
.ysn-menu__body{flex:1;padding:clamp(40px,8vh,96px) calc(var(--ysn-gutter) + 16px) 40px}
.ysn-menu__list{position:relative;list-style:none;margin:0;padding:0;width:52%}
.ysn-menu__row{display:flex;align-items:center;gap:16px;padding:6px 0}
.ysn-menu__big{display:inline-block;color:rgba(251,247,233,.9);text-decoration:none;font-family:var(--ysn-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(36px,4.2vw,64px);letter-spacing:-.03em;line-height:1.08;transition:color .3s}
.ysn-menu__mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.04em}
.ysn-menu__mask > span{display:inline-flex;transform:translateY(105%);transition:transform .8s var(--ysn-ease);transition-delay:calc(.18s + var(--ysn-i,0) * .07s)}
.ysn-menu.is-open .ysn-menu__mask > span{transform:none}
.ysn-menu__item.is-active .ysn-menu__big,.ysn-menu__big:hover,.ysn-menu__big:focus-visible{color:var(--ysn-accent)}
.ysn-menu__big:focus-visible{outline:none}
.ysn-menu__toggle{display:none}

/* 右侧：当前分类的二级页面 */
.ysn-menu__sub{position:absolute;top:0;left:calc(100% + 6vw);width:min(38vw,520px);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .45s var(--ysn-ease),visibility 0s .35s}
.ysn-menu__item.is-active .ysn-menu__sub{opacity:1;visibility:visible;transform:none;transition:opacity .35s .05s,transform .45s var(--ysn-ease) .05s}
.ysn-menu__subhead{margin:0 0 18px;font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:rgba(251,247,233,.5)}
.ysn-menu__sub ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(251,247,233,.14)}
.ysn-menu__sub li{padding:18px 0;border-bottom:1px solid rgba(251,247,233,.14)}
.ysn-menu__sub a{color:var(--ysn-paper);text-decoration:none}
.ysn-menu__sub li > a{display:block}
.ysn-menu__sublabel{font-family:var(--ysn-display);font-weight:500;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em}
.ysn-menu__sub li > a:hover .ysn-menu__sublabel{color:var(--ysn-accent)}
.ysn-menu__desc{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:rgba(251,247,233,.58)}
.ysn-menu__third{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;font-size:13px;color:rgba(251,247,233,.5)}
.ysn-menu__third a{color:rgba(251,247,233,.8);padding-bottom:2px;border-bottom:1px solid rgba(251,247,233,.25);transition:color .25s,border-color .25s}
.ysn-menu__third a:hover{color:var(--ysn-accent);border-color:var(--ysn-accent)}
.ysn-menu__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 calc(var(--ysn-gutter) + 16px) 28px;font-family:var(--ysn-display);font-weight:600;font-size:12px;letter-spacing:.06em;color:rgba(251,247,233,.5)}

/* ---------- 询价抽屉 ---------- */
.ysn-drawer{position:fixed;inset:0;z-index:1060}
.ysn-drawer[hidden]{display:none}
.ysn-drawer__backdrop{position:absolute;inset:0;background:rgba(14,23,51,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
.ysn-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(600px,100%);display:flex;flex-direction:column;overflow-y:auto;padding:28px clamp(20px,3vw,40px) 32px;
  background:var(--ysn-ink);color:var(--ysn-paper);font-family:var(--ysn-body);transform:translateX(100%);transition:transform .6s var(--ysn-ease)}
.ysn-drawer.is-open .ysn-drawer__backdrop{opacity:1}
.ysn-drawer.is-open .ysn-drawer__panel{transform:none}
.ysn-drawer__progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(251,247,233,.1)}
.ysn-drawer__progress span{display:block;height:100%;width:33.34%;background:var(--ysn-accent);transition:width .5s var(--ysn-ease)}
.ysn-drawer__top{display:flex;align-items:center;justify-content:space-between}
.ysn-drawer__tag{margin:0;font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ysn-drawer__intro{margin:22px 0 40px;max-width:44ch;font-size:15px;line-height:1.5;color:rgba(251,247,233,.72)}

.ysn-form{display:flex;flex-direction:column;flex:1}
.ysn-step{display:none;margin:0;padding:0;border:0;min-width:0}
.ysn-step.is-active{display:block;animation:ysnStep .5s var(--ysn-ease) both}
@keyframes ysnStep{from{opacity:0;transform:translateX(24px)}}
.ysn-step legend{display:flex;justify-content:space-between;width:100%;padding:0 0 14px;margin-bottom:22px;border-bottom:1px solid rgba(251,247,233,.16);
  font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ysn-step__count{color:rgba(251,247,233,.5)}
.ysn-step label:not(.ysn-chips label),.ysn-field{display:block;margin-bottom:22px;font-size:14px;color:rgba(251,247,233,.86)}
.ysn-field > p{margin:0 0 10px}
.ysn-step b,.ysn-field b{color:var(--ysn-accent);font-weight:600}
.ysn-step input:not([type=radio]):not([type=checkbox]),.ysn-step textarea{display:block;width:100%;margin-top:8px;padding:14px 16px;border:1px solid transparent;border-radius:10px;
  background:rgba(251,247,233,.07);color:var(--ysn-paper);font:inherit;font-size:16px;outline:none;box-shadow:none;transition:border-color .3s,background .3s}
.ysn-step input::placeholder,.ysn-step textarea::placeholder{color:rgba(251,247,233,.36)}
.ysn-step input:focus,.ysn-step textarea:focus{border-color:var(--ysn-accent);background:rgba(251,247,233,.1)}
.ysn-step [aria-invalid=true]{border-color:#FF8A6B !important}
.ysn-chips{display:flex;flex-wrap:wrap;gap:8px}
.ysn-chips label{position:relative;margin:0;cursor:pointer}
.ysn-chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ysn-chips span{display:inline-block;padding:9px 16px;border:1px solid rgba(251,247,233,.3);border-radius:999px;font-size:14px;color:var(--ysn-paper);transition:all .25s}
.ysn-chips input:checked + span{background:var(--ysn-paper);border-color:var(--ysn-paper);color:var(--ysn-ink)}
.ysn-chips input:focus-visible + span{outline:2px solid var(--ysn-accent);outline-offset:3px}
.ysn-chips.is-invalid span{border-color:#FF8A6B}
.ysn-step--done p{font-size:15px;line-height:1.55;color:rgba(251,247,233,.8)}
.ysn-step--done a{color:var(--ysn-accent)}
.ysn-done__title{font-family:var(--ysn-display);font-size:30px !important;letter-spacing:-.02em;color:var(--ysn-paper) !important;margin:0 0 12px}
.ysn-form__nav{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:24px}
.ysn-form__nav [data-ysn-next],.ysn-form__nav [data-ysn-submit]{margin-left:auto}
html body .ysn-back{all:unset;cursor:pointer;font-family:var(--ysn-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:rgba(251,247,233,.7)}
.ysn-back:hover{color:var(--ysn-accent)}
.ysn-back[hidden],.ysn-form__nav [hidden]{display:none !important}
.ysn-form__note{margin:16px 0 0;font-size:12px;line-height:1.5;color:rgba(251,247,233,.45)}

/* ---------- 响应式 ---------- */
@media (max-width:1199px){
  .ysn-inline{display:none}
}
@media (max-width:900px){
  .ysn-bar{height:56px;margin-top:10px}
  .ysn-pills{top:18px}
  .ysn-logo{width:96px}
  .ysn-crumb{top:78px}
  .ysn-menu__list{width:100%}
  .ysn-menu__big{font-size:clamp(32px,9vw,48px)}
  .ysn-menu__row{justify-content:space-between}
  html body .ysn-menu__toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(251,247,233,.3);font-size:22px;cursor:pointer;transition:transform .4s var(--ysn-ease)}
  .ysn-menu__toggle[aria-expanded=true]{transform:rotate(45deg);border-color:var(--ysn-accent);color:var(--ysn-accent)}
  .ysn-menu__sub{position:static;width:auto;display:none;opacity:1;visibility:visible;transform:none;padding:8px 0 18px}
  .ysn-menu__item.is-open .ysn-menu__sub{display:block}
  .ysn-menu__item.is-active:not(.is-open) .ysn-menu__sub{display:none}
  .ysn-menu__subhead{display:none}
  .ysn-menu__desc{display:none}
  .ysn-menu__foot span{display:none}
}
@media (max-width:600px){
  .ysn-bar{padding:0 14px}
  .ysn-logo{width:78px}
  .ysn-pills{right:calc(var(--ysn-gutter) + 8px);gap:6px;top:19px}
  .ysn .ysn-quote{--pill-pad:.8rem;--pill-room:38px;--pill-size:28px;min-height:38px !important;font-size:.72rem}
  html body .ysn-menu-btn{height:38px;padding:0 13px 0 12px;gap:8px;font-size:12px}
  .ysn-menu__top{padding:18px calc(var(--ysn-gutter) + 8px) 0}
}
@media (prefers-reduced-motion:reduce){
  .ysn-bar,.ysn-menu-btn,.ysn-burger i,.ysn-menu,.ysn-drawer__panel,.ysn-drawer__backdrop,.ysn-menu__mask > span,[data-ysn-cascade] .ysn-ch{transition:none !important;animation:none !important}
  .ysn-menu__mask > span{transform:none}
}

.ysn-form__note a{color:var(--ya-orange,#F5A20E);text-underline-offset:2px}
/* 2026-10-15 焦点环:鼠标点击不出现浏览器默认黑框;键盘 Tab 时显示品牌色细环(保留可访问性) */
.ysn-inline a:focus:not(:focus-visible){outline:none}
.ysn-inline a:focus-visible{outline:2px solid var(--ysn-accent);outline-offset:6px;border-radius:4px}

/* 2026-10-16：MENU 固定在导航栏最右端；下滑隐藏、上滑出现（所有屏宽，原来只在手机上） */
html body .ysn-menu-btn{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease,background-color .3s,color .3s,border-color .3s,box-shadow .3s}
html.ysn-pill-away body .ysn-menu-btn{transform:translateY(-160%);opacity:0;pointer-events:none}
/* 2026-10-19：语言切换（EN|中文）只在页面顶部随导航栏显示；滚动后收起，悬浮右上角的只有 MENU/目录 胶囊。
   打开全屏菜单时顶栏变实色，语言切换一并回来，方便在菜单里换语言。 */
.ysn-pills .ysn-language{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
html.ysn-scrolled:not(.ysn-menu-open) .ysn-pills .ysn-language{position:absolute;right:0;visibility:hidden;transform:translateY(-160%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease,visibility 0s .35s}
/* ↑ 2026-10-19 午后：收起时让语言切换脱离排版，目录胶囊顺势靠到最右端（原来它停在中间、右边空出一块） */

/* 2026-10-19 下午：MENU/目录 按钮永远在屏幕最右上角——语言切换排在它左边（原来 order:-1 让 MENU 排第一，被语言胶囊挤到中间） */
html body .ysn-pills .ysn-menu-btn{order:9}
.ysn-pills .ysn-language{order:1}
.ysn-pills .ysn-cta-slot{order:2}


/* Source: leads.css */
/* =========================================================================
   YOOAN 留资：右下角咨询卡（Anya）+ 三处表单共用的 WhatsApp 区号输入（2026-09-28）
   配色沿用全站：深蓝 #0E1733 / 奶油 #FBF7E9 / 橙色行动色 #F5A20E
   ========================================================================= */

:root{
  --ycc-ink:#0E1733;
  --ycc-paper:#FBF7E9;
  --ycc-accent:#F5A20E;
  --ycc-line:rgba(14,23,51,.14);
  --ycc-display:YASchibsted,"Schibsted Grotesk Variable","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ycc-body:YAFustat,"Fustat Variable","Helvetica Neue",Arial,sans-serif;
  --ycc-ease:cubic-bezier(.16,1,.3,1);
  --ycc-shadow:0 22px 50px -18px rgba(14,23,51,.42),0 2px 8px rgba(14,23,51,.08);
}

/* ---------- 共用：区号 + 号码 ---------- */
.yl-phone__row{display:grid;grid-template-columns:minmax(96px,112px) 1fr;gap:8px}
.yl-phone__row select,.yl-phone__row input{min-width:0}
.yl-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.yl-status{margin:0;font-size:12px;line-height:1.45;min-height:0}
.yl-status.is-error{color:#B42318}
[type=submit].is-sending{opacity:.6;pointer-events:none}

/* 询价抽屉（深色）里的区号下拉 */
.ysn-step .yl-phone{margin-bottom:22px}
.ysn-step .yl-phone__label{margin:0 !important;display:block}
.ysn-step .yl-phone__row{margin-top:8px}
.ysn-step .yl-phone__row input{margin-top:0 !important}
.ysn-step select{display:block;width:100%;padding:14px 10px;border:1px solid transparent;border-radius:10px;background:rgba(251,247,233,.07);
  color:var(--ysn-paper,#FBF7E9);font:inherit;font-size:15px;outline:none;color-scheme:dark;cursor:pointer}
.ysn-step select:focus{border-color:var(--ycc-accent)}
.ysn-step em,.ypr-form em{font-style:normal;opacity:.55;font-weight:400}
.ysn-form .yl-status{margin-top:12px;color:rgba(251,247,233,.8)}
.ysn-form .yl-status.is-error{color:#FF8A6B}

/* /quote/ 页（深色）表单 */
.ypr-form .yl-phone{display:grid;gap:8px}
.ypr-form [aria-invalid=true]{border-color:#FF8A6B !important}
.ypr-form .yl-status{color:var(--ya-orange,#F5A20E)}
.ypr-form .yl-status.is-error{color:#FF8A6B}
.yq-done{padding:30px 28px;border-radius:8px;background:var(--ya-ink,#0E1733);color:var(--ya-cream,#FBF7E9);outline:none}
.yq-done__title{margin:0 0 10px;font-family:var(--ycc-display);font-size:24px;font-weight:600}
.yq-done p{line-height:1.55}
.yq-done strong{color:var(--ya-orange,#F5A20E)}

/* ---------- 咨询卡 ---------- */
.ycc{position:fixed;right:24px;bottom:24px;z-index:1040;font-family:var(--ycc-body);color:var(--ycc-ink);
  opacity:0;transform:translateY(18px);pointer-events:none;visibility:hidden;
  transition:opacity .5s var(--ycc-ease),transform .6s var(--ycc-ease),visibility 0s linear .6s}
.ycc.is-in{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .5s var(--ycc-ease),transform .6s var(--ycc-ease),visibility 0s}
.ycc.is-in.is-away{opacity:0;transform:translateY(18px);pointer-events:none;visibility:hidden;transition:opacity .3s,transform .4s var(--ycc-ease),visibility 0s linear .4s}
.ycc *{box-sizing:border-box}
.ycc button{font:inherit;cursor:pointer}

/* 名片卡（电脑端） */
.ycc-card{position:relative;width:228px;border-radius:18px;background:var(--ycc-paper);border:1px solid rgba(14,23,51,.06);box-shadow:var(--ycc-shadow);
  transition:transform .45s var(--ycc-ease),box-shadow .45s var(--ycc-ease),opacity .25s}
.ycc-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -20px rgba(14,23,51,.5),0 2px 8px rgba(14,23,51,.08)}
.ycc-card__main{display:block;width:100%;padding:18px 18px 16px;border:0;background:none;text-align:left;color:inherit;border-radius:18px}
.ycc-card__main:focus-visible{outline:2px solid var(--ycc-accent);outline-offset:3px}
.ycc-card__role{display:block;padding-right:26px;font-size:12px;line-height:1.35;color:rgba(14,23,51,.68)}
.ycc-card__name{display:block;margin:8px 0 16px;font-family:var(--ycc-display);font-size:28px;font-weight:600;line-height:1;letter-spacing:-.01em}
.ycc-talk{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px 0 16px;border-radius:999px;background:var(--ycc-ink);color:var(--ycc-paper);font-size:13px;font-weight:600}
.ycc-talk i{width:8px;height:8px;border-radius:50%;background:var(--ycc-accent);box-shadow:0 0 0 0 rgba(245,162,14,.6);animation:yccPulse 2.4s ease-out infinite}
.ycc-card__main:hover .ycc-talk i{transform:scale(1.35)}
@keyframes yccPulse{0%{box-shadow:0 0 0 0 rgba(245,162,14,.55)}70%{box-shadow:0 0 0 9px rgba(245,162,14,0)}100%{box-shadow:0 0 0 0 rgba(245,162,14,0)}}
.ycc-card__min{position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(14,23,51,.45);transition:background .2s,color .2s}
.ycc-card__min:hover,.ycc-card__min:focus-visible{background:rgba(14,23,51,.08);color:var(--ycc-ink);outline:none}
.ycc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* 胶囊（收起态 / 手机端） */
.ycc-pill{display:none;align-items:center;gap:10px;height:52px;padding:0 20px 0 6px;border:0;border-radius:999px;background:var(--ycc-ink);color:var(--ycc-paper);
  font-size:14px;font-weight:600;box-shadow:var(--ycc-shadow);transition:transform .35s var(--ycc-ease)}
.ycc-pill:hover{transform:translateY(-2px)}
.ycc-pill:focus-visible{outline:2px solid var(--ycc-accent);outline-offset:3px}
.ycc-mono{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ycc-accent);color:var(--ycc-ink);font-family:var(--ycc-display);font-size:17px;font-weight:700}
.ycc.is-min .ycc-card{display:none}
.ycc.is-min .ycc-pill{display:inline-flex}

/* 面板打开时，卡片 / 胶囊让位 */
.ycc.is-open .ycc-card,.ycc.is-open .ycc-pill{opacity:0;pointer-events:none}

/* 留言面板 */
.ycc-panel{position:absolute;right:0;bottom:0;width:360px;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;
  padding:18px 20px 20px;border-radius:20px;background:var(--ycc-paper);box-shadow:0 30px 70px -20px rgba(14,23,51,.55),0 2px 8px rgba(14,23,51,.1);
  opacity:0;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .3s var(--ycc-ease),transform .45s var(--ycc-ease)}
.ycc-panel[hidden]{display:none}
.ycc-panel.is-visible{opacity:1;transform:none}
.ycc-panel__head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ycc-line)}
.ycc-panel__head > div{flex:1;min-width:0}
.ycc-panel__name{margin:0;font-family:var(--ycc-display);font-size:20px;font-weight:600;line-height:1.1}
.ycc-panel__role{margin:3px 0 0;font-size:12px;color:rgba(14,23,51,.62)}
.ycc-panel__close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(14,23,51,.06);color:var(--ycc-ink)}
.ycc-panel__close:hover,.ycc-panel__close:focus-visible{background:rgba(14,23,51,.12);outline:none}
.ycc-panel__intro{margin:0 0 14px;font-size:13px;line-height:1.5;color:rgba(14,23,51,.72)}

.ycc-form{display:grid;gap:12px}
.ycc-form[hidden]{display:none}
.ycc-field,.ycc .yl-phone__label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ycc-ink)}
.ycc-identity{min-width:0;margin:0;padding:0;border:0}
.ycc-identity legend{margin:0 0 7px;padding:0;font-size:12px;font-weight:600;letter-spacing:.02em}
.ycc-identity b,.ycc-field b{color:var(--ycc-accent)}
.ycc-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ycc-choice{position:relative;display:block;cursor:pointer}
.ycc-choice input{position:absolute;opacity:0;pointer-events:none}
.ycc-choice span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 10px;border:1px solid var(--ycc-line);border-radius:10px;background:#fff;text-align:center;font-size:12px;font-weight:600;line-height:1.25;transition:border-color .2s,background .2s,box-shadow .2s}
.ycc-choice input:checked + span{border-color:var(--ycc-accent);background:rgba(245,162,14,.09);box-shadow:0 0 0 1px var(--ycc-accent)}
.ycc-choice input:focus-visible + span{outline:2px solid var(--ycc-ink);outline-offset:2px}
.ycc-choice input[aria-invalid=true] + span{border-color:#B42318}
.ycc-business-fields{display:grid;grid-template-columns:1fr;gap:8px}
.ycc-business-fields[hidden]{display:none}
.ycc-business-fields select{width:100%}
.ycc-phone__hint{display:block;margin-top:5px;color:rgba(14,23,51,.55);font-size:11px;line-height:1.35}
.ycc b{color:#C97F00;font-weight:700}
.ycc em{font-style:normal;font-weight:400;color:rgba(14,23,51,.5)}
.ycc .yl-phone__row{margin-top:6px}
.ycc input:not([type=hidden]),.ycc select,.ycc textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--ycc-line);border-radius:10px;background:#fff;
  color:var(--ycc-ink);font:inherit;font-size:15px;line-height:1.35;outline:none;transition:border-color .2s,box-shadow .2s}
.ycc .ycc-choice input[type=radio]{position:absolute;display:block;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.ycc .yl-phone__row input,.ycc .yl-phone__row select{margin-top:0}
.ycc select{padding-right:6px;cursor:pointer}
.ycc textarea{resize:vertical;min-height:62px}
.ycc input::placeholder,.ycc textarea::placeholder{color:rgba(14,23,51,.38)}
.ycc input:focus,.ycc select:focus,.ycc textarea:focus{border-color:var(--ycc-accent);box-shadow:0 0 0 3px rgba(245,162,14,.2)}
.ycc [aria-invalid=true]{border-color:#D92D20 !important}
.ycc-submit{width:100%;margin-top:4px;justify-content:space-between}
.ycc .yl-status:empty{display:none}

.ycc-done{padding:6px 0 2px;outline:none}
.ycc-done[hidden]{display:none}
.ycc-done__title{margin:0 0 8px;font-family:var(--ycc-display);font-size:20px;font-weight:600}
.ycc-done p{font-size:14px;line-height:1.55;color:rgba(14,23,51,.78)}
.ycc-done strong{color:var(--ycc-ink)}
.ycc-done__again{margin-top:6px;padding:0;border:0;background:none;color:var(--ycc-ink);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- 手机端：只显示胶囊，面板从底部升起 ---------- */
@media (max-width:600px){
  .ycc{right:16px;bottom:16px}
  .ycc-card{display:none}
  .ycc-pill{display:inline-flex;height:48px;padding-right:16px;font-size:13px}
  .ycc-mono{width:36px;height:36px;font-size:15px}
  .ycc-panel{position:fixed;left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 90px);transform-origin:bottom center}
  .ycc input:not([type=hidden]),.ycc select,.ycc textarea{font-size:16px} /* 16px 以下 iOS 会自动放大页面 */
  .ycc-business-fields{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ycc,.ycc-card,.ycc-panel,.ycc-pill{transition:none !important}
  .ycc-talk i{animation:none}
}

@media print{.ycc{display:none !important}}
.ypr-form b{color:var(--ya-orange,#F5A20E)}
form[data-yooan-lead][hidden],.yq-done[hidden]{display:none !important}
/* /quote/ 页 label 是 grid：让 * 和 (optional) 跟在字段名后面同一行 */
.ypr-form label:has(> b),.ypr-form label:has(> em){grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline}
.ypr-form label:has(> b) > :is(input,textarea,select),.ypr-form label:has(> em) > :is(input,textarea,select){grid-column:1 / -1}
.ypr-form label > em{text-transform:none;letter-spacing:0}

/* ---------- 2026-09-29：全站唯一「Talk to us」胶囊 · 顶部停靠导航栏 / 下滑移到右下角 ---------- */
.ysn-cta-slot{display:block;flex:none;pointer-events:none}
.ycc-card{display:none !important}
.ycc .ycc-pill{display:inline-flex}
.ycc-mono--icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ycc-pill__label{white-space:nowrap}
.ycc.is-in{transform-origin:100% 50%}
.ycc.is-in.is-top{transform:translate(var(--ycc-dx,0),var(--ycc-dy,0)) scale(var(--ycc-s,1))}
.ycc.is-top .ycc-pill{box-shadow:0 8px 24px rgba(14,23,51,.18)}
.ycc.no-anim,.ycc.no-anim .ycc-pill{transition:none !important}
html.ysn-menu-open .ycc{z-index:1060}
html.ysn-menu-open .ycc .ycc-pill{box-shadow:none}
@media (prefers-reduced-motion:reduce){.ycc.is-in.is-top{transition:none}}

/* 2026-09-29 · 「Talk to us」胶囊找回全站按钮的鼠标交互（同 cta-system.css 第 12 节的语言，左右镜像）：
   悬停时橙色圆从左滑到右、文字反向让位，图标轻微摆动；总宽度不变，所以顶栏占位不跳。 */
.ycc .ycc-pill{position:relative;--ycc-dot:40px;padding:0 20px 0 calc(var(--ycc-dot) + 16px);
  transition:padding .5s cubic-bezier(.4,0,.2,1),transform .35s var(--ycc-ease),background-color .3s ease,box-shadow .3s ease}
.ycc .ycc-pill .ycc-mono{position:absolute;top:50%;left:6px;width:var(--ycc-dot);height:var(--ycc-dot);transform:translateY(-50%);
  transition:left .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.ycc .ycc-pill:hover,.ycc .ycc-pill:focus-visible{padding:0 calc(var(--ycc-dot) + 16px) 0 20px;background:color-mix(in srgb,var(--ycc-ink) 86%,var(--ycc-paper))}
.ycc .ycc-pill:hover .ycc-mono,.ycc .ycc-pill:focus-visible .ycc-mono{left:calc(100% - var(--ycc-dot) - 6px);transform:translateY(-50%) rotate(-12deg)}
@media (max-width:600px){.ycc .ycc-pill{--ycc-dot:36px;padding:0 16px 0 calc(var(--ycc-dot) + 16px)}}
@media (hover:none){.ycc .ycc-pill:hover{padding:0 20px 0 calc(var(--ycc-dot) + 16px);background:var(--ycc-ink)}.ycc .ycc-pill:hover .ycc-mono{left:6px;transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.ycc .ycc-pill,.ycc .ycc-pill .ycc-mono{transition-duration:1ms !important}}

/* 2026-10-02 表单统一：隐私说明 + 站内提交完成面板（Resources 等页面共用） */
.yl-privacy{margin:10px 0 0;font-size:12px;line-height:1.5;opacity:.7}
.yl-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.yl-done-panel{padding:28px 0}
.yl-done-panel[hidden]{display:none}
.yl-done-panel__title{margin:0 0 10px;font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.25}
.yl-done-panel p{margin:0 0 8px;line-height:1.6}
.ypr-form-wrap .yl-done-panel{color:var(--ya-cream,#FBF7E9)}
.ypr-form-wrap .yl-done-panel a,.ypr-form__note a{color:var(--ya-orange,#F5A20E);text-underline-offset:2px}

/* 2026-10-16：「Talk to us」胶囊固定在右下角，不再停靠导航栏；导航栏里的预留位隐藏，MENU 按钮回到最右 */
.ysn-cta-slot{display:none !important}

/* 2026-10-16：Talk to us 面板——先「直接跳 WhatsApp」，再邮箱留言 */
.ycc-wa{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#0E1733;color:#FBF7E9 !important;text-decoration:none !important;transition:transform .25s var(--ycc-ease),background .25s}
.ycc-wa:hover,.ycc-wa:focus-visible{transform:translateY(-2px);background:#17224A;outline:none}
.ycc-wa__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#25D366;color:#fff}
.ycc-wa__icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.ycc-wa__text{display:grid;gap:2px;flex:1;min-width:0}
.ycc-wa__text strong{font-size:15px;font-weight:650}
.ycc-wa__text small{font-size:12px;opacity:.7;letter-spacing:.02em}
.ycc-wa__arrow{font-size:18px;color:var(--ycc-accent,#F5A20E)}
.ycc-or{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(14,23,51,.5)}
.ycc-or::before,.ycc-or::after{content:"";flex:1;height:1px;background:var(--ycc-line,rgba(14,23,51,.12))}


/* Source: yooan-mobile.css */
/* YOOAN · Mobile slimming layer (2026-10-02)
   Phone only (<=767px). Desktop is untouched. Loaded last, so same-specificity rules here win.
   Principle: same HTML, different reading mode — compress, don't delete.
   Sections: 0 global · 1 home · 2 about · 3 partnership · 4 where-to-buy · 5 projects · 6 resources
   Knobs are marked  « KNOB » . */
@media (max-width: 767px) {

  /* ========== 0 · global ========== */
  /* WCAG-sized controls without inflating ordinary inline text links. */
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  .wp-element-button,
  .wp-block-button__link {
    min-height: 44px;
  }
  button,
  [role="button"],
  .wp-element-button,
  .wp-block-button__link {
    min-width: 44px;
  }

  /* horizontal swipe row: many stacked cards → one row you swipe (pure CSS, native scroll-snap) */
  .yo-swipe,
  .yh-dd-steps,
  .yhs__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .yo-swipe::-webkit-scrollbar,
  .yh-dd-steps::-webkit-scrollbar,
  .yhs__grid::-webkit-scrollbar { display: none; }
  .yo-swipe > *,
  .yh-dd-steps > *,
  .yhs__grid > * {
    flex: 0 0 80% !important;      /* « KNOB » card width; the next card peeks out = "swipe me" */
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: start;
  }

  /* ========== 1 · home ========== */
  /* gradient spacers between sections were 260px tall */
  .yh-fade { height: 90px !important; min-height: 0 !important; }

  /* hero: scroll-driven video scene 230svh → shorter */
  .yh-cinema { height: 150svh !important; }          /* « KNOB » */

  /* factory film: 3 pinned chapters (count × 100svh) → ~2.1 screens */

  /* manufacturing: keep first photo + copy, hide 2nd photo / hand-drawn note, steps become a swipe row */
  .yh-dd-mfg__b,
  .yh-dd-mfg__note,
  .dd-signature { display: none !important; }
  .yh-dd-mfg__a { margin-bottom: 28px; }
  .yh-dd-mfg__a .dd-media { aspect-ratio: 16 / 10 !important; }
  #manufacturing.yh-dd { padding-top: 56px !important; padding-bottom: 44px !important; }
  .yh-dd__title { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.02 !important; }
  .yh-dd-steps { margin-top: 36px !important; }
  .yh-dd-step { padding-top: 16px; }

  /* technical resources: four stacked cards → 2×2 compact grid, description text hidden */
  .yh-dd-docs__pin { padding-block: 56px !important; }
  .yh-dd-docs__track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px !important;
  }
  .yh-dd-docs__intro { grid-column: 1 / -1; }
  .dd-card { width: 100% !important; }
  .dd-card .dd-media { aspect-ratio: 1 / 1 !important; }
  .dd-card__body { padding-top: 10px; }
  .dd-card__body p { display: none; }
  .dd-card h3 { font-size: 16px; margin: 8px 0 6px; }

  /* ========== 2 · about ========== */
  /* decorative WebGL contour canvas: pure battery/CPU cost on phones */
  .yab-topo { display: none !important; }
  /* hero side: drop the small second photo (the big one stays) */
  .yab-intro__small { display: none !important; }
  /* Global Experience: 8 photos, magazine grid → one swipe row (nothing deleted) */
  .yab-gal {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 12px !important;
    margin-top: 24px !important;
    align-items: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yab-gal::-webkit-scrollbar { display: none; }
  .yab-gal__item { flex: 0 0 64% !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; scroll-snap-align: start; }
  .ya-about .yab-gal__item img { aspect-ratio: 4 / 5 !important; height: auto; }
  /* How we manufacture: four tall stacked steps → swipe cards, photo on top */
  .yab-flow__steps {
    display: flex !important;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yab-flow__steps::-webkit-scrollbar { display: none; }
  .yab-flow__step { flex: 0 0 84%; display: flex; flex-direction: column; padding: 0 0 6px !important; border-bottom: 0 !important; scroll-snap-align: start; }
  .yab-flow__media { order: -1; margin: 0 0 16px !important; aspect-ratio: 16 / 10 !important; }
  .yab-flow__step h3 { font-size: clamp(24px, 7vw, 30px) !important; }
  .yab-flow__step > p:not(.yab-flow__label) { margin-top: 12px !important; font-size: 15px !important; }
  .yab-flow__label { margin-bottom: 12px !important; }

  /* ========== 3 · partnership ========== */
  /* hero photo: 4:5 portrait → short banner; small inset photo hidden */
  .pv2 .pv2-hero__photo { aspect-ratio: 16 / 11 !important; min-height: 0 !important; }
  .pv2 .pv2-hero__inset { display: none !important; }
  /* "your role" 3 cards + "how it works" 3 steps → swipe rows */
  .pv2 .pv2-cards,
  .pv2 .pv2-flow {
    display: flex !important;
    overflow-x: auto;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    align-items: flex-start !important;
  }
  .pv2 .pv2-cards::-webkit-scrollbar,
  .pv2 .pv2-flow::-webkit-scrollbar { display: none; }
  .pv2 .pv2-card { flex: 0 0 82%; min-height: 0 !important; padding-top: 56px !important; scroll-snap-align: start; order: 0 !important; grid-column: auto !important; }
  .pv2 .pv2-step { flex: 0 0 80%; scroll-snap-align: start; }

  /* ========== 4 · where to buy page ========== */
  .ywb-rooms,
  .ywb-elsewhere__grid {
    display: flex !important;
    overflow-x: auto;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
    padding-bottom: 6px;
  }
  .ywb-rooms::-webkit-scrollbar,
  .ywb-elsewhere__grid::-webkit-scrollbar { display: none; }
  .ywb-rooms > *,
  .ywb-elsewhere__grid > * { flex: 0 0 82% !important; scroll-snap-align: start; }

  /* items inside swipe rows must never wait for a vertical "reveal" trigger */
  .yo-swipe > *, .yh-dd-steps > *, .yhs__grid > *, .yab-gal > *, .yab-flow__steps > *,
  .pv2-cards > *, .pv2-flow > *, .ywb-rooms > *, .ywb-elsewhere__grid > * {
    opacity: 1 !important;
  }

  /* ========== 5 · projects ========== */
  /* list-page hero: scroll-scrubbed construction video, ~2.1 screens → 1.5 */
  .yooan-projects-hero { height: 150svh !important; }          /* « KNOB » */

  /* ========== 6 · resources ========== */
  .ypr-process { display: flex !important; overflow-x: auto; gap: 14px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch; padding-bottom: 6px; }
  .ypr-process::-webkit-scrollbar { display: none; }
  .ypr-process > * { flex: 0 0 78% !important; scroll-snap-align: start; opacity: 1 !important; transform: none !important; }

  /* ========== 7 · footer (every page) ========== */
  .yooan-outline { display: none !important; }       /* giant decorative outline wordmark */

  /* case detail pages: photo stack and highlight list → swipe rows */
  .yooan-project-figures,
  .yooan-project-highlights {
    display: flex !important;
    overflow-x: auto;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: flex-start;
    padding-left: 0;
    padding-bottom: 6px;
  }
  .yooan-project-figures::-webkit-scrollbar,
  .yooan-project-highlights::-webkit-scrollbar { display: none; }
  .yooan-project-figures > * { flex: 0 0 86% !important; margin: 0 !important; scroll-snap-align: start; opacity: 1 !important; transform: none !important; }
  .yooan-project-figure img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
  .yooan-project-highlights > li { flex: 0 0 80% !important; scroll-snap-align: start; }

  /* ---- vertical rhythm: section padding was 72–112px on phones ---- */
  .yab-global.ya-section,
  .yab-support.ya-section,
  .yab-certifications > .ya-section { padding-block: 48px !important; }
  .yab-manufacturing.ya-section { padding-top: 48px !important; }
  .pv2 .pv2-sec,
  .pv2 .pv2-dark { padding-block: 44px !important; }
  #partner-faq { padding-block: 44px !important; }

  /* ========== 8 · type scale on phones (round 2) ==========
     Site-wide sizes come from type-tokens.css variables, so shrinking the variables here
     scales everything that uses them. Desktop values are untouched. */
  :root {
    --type-display: clamp(2rem, 9vw, 2.375rem);   /* 32–38px  (was 44px min) */
    --type-step:    clamp(2.75rem, 12vw, 3.5rem); /* 44–56px  (was 64px min) */
    --type-h2:      clamp(1.5rem, 6.4vw, 1.75rem);/* 24–28px  (was 32px min) */
    --type-h3:      1.125rem;                     /* 18px     (was 20px) */
    --type-lead:    1rem;                         /* 16px     (was 18px) */
    --type-body:    0.96875rem;                   /* 15.5px   (was 17px) */
    --type-dense:   0.875rem;                     /* 14px     (was 15px) */
    --type-label:   0.6875rem;                    /* 11px     (was 12px) */
    --type-numeral: 1.0625rem;                    /* 17px     (was 19px) */
    --flow-base:    1rem;
    --flow-loose:   1.75rem;
  }
  /* iOS zooms the page when a form field is < 16px — keep fields at 16px */
  input, select, textarea { font-size: 16px; }

  /* ---- headings: one calm size scale for every page (specific hero/chapter titles below keep their own) ---- */
  main h1 { font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.05 !important; }
  main h2 { font-size: clamp(22px, 6.4vw, 26px) !important; line-height: 1.1 !important; }
  main h3 { font-size: clamp(17px, 4.9vw, 19px) !important; line-height: 1.2 !important; }
  .yh-film__title { font-size: clamp(30px, 8.6vw, 34px) !important; }   /* pinned chapter titles stay a bit bigger */
  .yooan-footer__tagline { font-size: 20px !important; line-height: 1.25 !important; }
  :root { --lh-body: 1.5; --lh-lead: 1.45; }

  /* ---- big display numbers / script words ---- */
  .yab-script { font-size: 64px !important; }
  .yab-ruler__value { font-size: 40px !important; }
  .dd-bigword { font-size: 14vw !important; }
  .pv2-stats span:first-child, .pv2-stats strong { font-size: 36px !important; }
  .yh-cinema__statement { font-size: clamp(2.2rem, 11vw, 3.2rem) !important; }

  /* ---- picture frames: flatter ratios (desktop frames untouched) ---- */
  .yhc__slide { aspect-ratio: 1 / 1 !important; }                       /* home product-systems carousel was 3:4 */
  .yab-deck__card--img img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
  .ya-about .yab-gal__item img { aspect-ratio: 1 / 1 !important; }      /* Global photos 4:5 → square */
  .yab-flow__media { aspect-ratio: 16 / 9 !important; }
  .yh-dd-mfg__a .dd-media { aspect-ratio: 16 / 9 !important; }
  .pv2 .pv2-step figure { aspect-ratio: 16 / 9 !important; }
  .pv2 .pv2-mcard figure { aspect-ratio: 16 / 10 !important; }
  .yooan-project-figure img { aspect-ratio: 16 / 10 !important; }

  /* ========== 9 · round 2b: fewer scenes, smaller type ========== */
  /* home factory film: 3 pinned chapters (~2 screens of scrolling) → ONE static video card with chapter 1.
     Chapters 2–3 stay in the HTML (hidden); desktop keeps the full scroll story. « KNOB »: delete this block to restore the pinned version. */
  .yh-film { height: auto !important; }
  .yh-film__stage { position: relative !important; height: 76svh !important; min-height: 440px; }   /* « KNOB » card height */
  .yh-film__layer:not(:first-child),
  .yh-film__chapter:not(:first-child),
  .yh-film__progress { display: none !important; }
  .yh-film__layer:first-child { opacity: 1 !important; z-index: 1 !important; }
  .yh-film__chapter:first-child { visibility: visible !important; pointer-events: auto !important; }
  .yh-film__chapter:first-child .yh-film__eyebrow,
  .yh-film__chapter:first-child .yh-film__text,
  .yh-film__chapter:first-child .yh-film__action,
  .yh-film__chapter:first-child .yh-film__secondary,
  .yh-film__chapter:first-child .yh-film__title span { opacity: 1 !important; transform: none !important; }

  /* decorative / duplicate blocks on phones */
  .dd-bigword { display: none !important; }                    /* giant outline "DOCUMENTS" */
  .yh-showcase__head p { display: none; }                       /* the title + "Explore all products" link stay */
  .yooan-footer__description { display: none; }
  .yh-cinema { height: 135svh !important; }                     /* « KNOB » hero scrub length */

  /* body copy one notch smaller (unclassed paragraphs + the main lead classes) */
  main p, footer p { font-size: 15px; line-height: 1.5; }
  .yh-dd__lead, .pv2-lead, .pv2-body, .yab-intro__text { font-size: 15px !important; line-height: 1.5 !important; }

  /* partnership: three big stat lines → swipe row */
  .pv2-stats { display: flex !important; overflow-x: auto; gap: 14px !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pv2-stats::-webkit-scrollbar { display: none; }
  .pv2-stats > li { flex: 0 0 62%; scroll-snap-align: start; opacity: 1 !important; transform: none !important; }

  /* ========== round 3 · five phone fixes ========== */
  /* ① footer: Explore + Contact side by side, brand block full width */
  .yooan-footer__brand, .yooan-footer__explore, .yooan-footer__contact { min-width: 0; }
  footer .wp-block-columns.alignwide { display: grid !important; grid-template-columns: .62fr 1.38fr; gap: 22px 16px !important; }
  footer .wp-block-columns.alignwide > .wp-block-column { flex-basis: auto !important; width: auto !important; margin: 0 !important; }
  footer .wp-block-columns.alignwide > .yooan-footer__brand { grid-column: 1 / -1; }
  .yooan-footer__contact-list a, .yooan-footer__contact-list li { overflow-wrap: break-word; font-size: 13px; }

  /* ② home hero video: no extra zoom, aim the crop at the building (lower-left of the frame) « KNOB » */
  .yh-cinema__visual { transform: none !important; object-position: 30% 62%; }

  /* ③ applications: compact — device on top, four proof cards as ONE small row, no float / rotation */
  .yh-apps--proof .yh-apps__inner { padding: 44px 16px 36px; gap: 18px; }
  .yh-apps--proof .yh-apps__stage { grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
  .yh-apps--proof .yh-apps__media { grid-column: 1 / -1; margin-bottom: 4px; }
  .yh-apps--proof .yh-proof { width: 100% !important; animation: none !important; transform: none !important; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }

  /* ④ technical resources: horizontal swipe, intro stays pinned on the left edge */
  .yh-dd-docs__track {
    display: grid !important; grid-template-columns: repeat(4, 62vw) !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; padding-inline: 16px !important;
  }
  .yh-dd-docs__track::-webkit-scrollbar { display: none; }
  .yh-dd-docs__intro { position: sticky; left: 0; width: calc(100vw - 32px) !important; grid-column: 1 / -1 !important; }
  .dd-card { scroll-snap-align: start; opacity: 1 !important; }
  .dd-card .dd-media { aspect-ratio: 4 / 3 !important; }

  /* ⑤ projects hero: smaller title (beats theme selector), lighter veil, crop toward the subject « KNOB » */
  .yooan-projects-hero .yooan-projects-hero__content h1,
  .yooan-projects-hero h1 { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.08 !important; }
  .yooan-projects-hero__video { object-position: 35% 60%; }
  .yooan-projects-hero__lead { display: none !important; }      /* lead text hidden on phones so the picture is the hero */
  .yooan-projects-hero__veil { background: rgba(14,23,51,.28) !important; }
  .yooan-projects-hero__content { align-self: flex-end; padding-top: 0 !important; padding-bottom: 6svh; }
}

/* ========== round 4 · 2026-10-14 · phone polish ==========
   ① home hero: smaller headline + compact CTA row
   ② home Selected Projects: stacked cards → one horizontal swipe row
   (backup of the previous file: _backup-mobile-20261014/) */
@media (max-width: 767px) {

  /* ① hero headline + two buttons */
  .yh-cinema .yh-cinema__intro-title {
    font-size: clamp(2rem, 9.4vw, 2.5rem) !important;   /* « KNOB » ~35px at 375 (was 47px) */
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }
  .yh-cinema .yh-cinema__intro { padding-top: 84px !important; }
  .yh-cinema .yh-cinema__intro-actions {
    flex-wrap: nowrap !important;
    gap: 10px 14px !important;
    align-items: center;
  }
  .yh-cinema .yh-cinema__intro-actions > a {
    min-height: 0 !important;
    min-width: 0 !important;
    font-size: 11px !important;                         /* « KNOB » button text */
    letter-spacing: .06em !important;
    white-space: nowrap;
    gap: 6px !important;
  }

  /* ② home Selected Projects → swipe row */
  .yh-projects { padding: 48px 20px 44px !important; }
  .yh-projects__head { margin-bottom: 24px !important; gap: 12px !important; }
  .yh-projects__head h2 { font-size: clamp(24px, 6.8vw, 28px) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; }
  .yh-projects__head span { font-size: 14px !important; line-height: 1.5 !important; }
  .yh-projects__head a { margin-top: 12px !important; font-size: 13px; min-height: 0 !important; }
  .yh-projects__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 14px !important;
    margin: 0 -20px !important;                          /* bleed to the screen edge */
    padding: 0 20px 6px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yh-projects__grid::-webkit-scrollbar { display: none; }
  .yh-projects__grid > .yh-project-card {
    flex: 0 0 74%;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
  }
  .yh-project-card__media { aspect-ratio: 4 / 4.2 !important; }
  .yh-project-card__media > span { width: 30px; height: 30px; top: 10px; left: 10px; font-size: 10px; }
  .yh-project-card__copy { padding-top: 12px !important; }
  .yh-project-card__copy p { font-size: 9px !important; margin-bottom: 6px !important; }
  .yh-project-card__copy h3 { font-size: 17px !important; }
}

/* round 4b · hero buttons: the site's pill CTA is sized by CSS variables (cta-system.css),
   so on phones we only shrink those variables — text, arrow circle and padding follow together. */
@media (max-width: 767px) {
  .yh-cinema .yh-cinema__intro-actions > a.yooan-cta {
    --pill-size: 26px;     /* « KNOB » arrow circle (desktop 40px) */
    --pill-room: 38px;     /* right room for the circle */
    --pill-pad: 14px;      /* left padding */
    min-height: 0 !important;
  }
}

/* round 4c · floating "Talk to us" capsule: 48px → 40px, smaller icon dot + label */
@media (max-width: 767px) {
  .ycc .ycc-pill,
  .ycc .ycc-pill:hover,
  .ycc .ycc-pill:focus-visible {
    --ycc-dot: 30px;                                   /* « KNOB » round icon (was 36px) */
    height: 40px;                                      /* « KNOB » capsule height (was 48px) */
    min-height: 0 !important;
    padding: 0 14px 0 calc(var(--ycc-dot) + 12px);
    font-size: 13px;
    gap: 8px;
  }
  .ycc .ycc-pill .ycc-mono { left: 5px; }
  .ycc .ycc-pill .ycc-mono svg { width: 14px; height: 14px; }
  .ycc { right: 12px; bottom: 14px; }
}

/* round 4d · projects list page
   ① hero: the video only filled ~2/3 of the pinned screen, leaving a navy block under it → make the row fill the screen
   ② case cards: staggered stack → one horizontal swipe row */
@media (max-width: 767px) {
  .yooan-projects-hero__sticky { grid-template-rows: minmax(0, 1fr) !important; row-gap: 0 !important; }
  /* two empty <p> (stray editor paragraphs) became extra grid rows + gaps = the navy strip */
  .yooan-projects-hero__sticky > p:not([class]) { display: none !important; }
  .yooan-projects-hero__video { height: 100% !important; min-height: 100%; }

  .yooan-projects-grid {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    overflow-x: auto;
    gap: 14px !important;
    row-gap: 14px !important;
    margin-inline: calc(-1 * var(--yooan-content-padding, 24px));
    padding: 0 var(--yooan-content-padding, 24px) 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--yooan-content-padding, 24px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yooan-projects-grid::-webkit-scrollbar { display: none; }
  .yooan-projects-grid .yooan-project-card {
    flex: 0 0 76%;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
  }
  .yooan-projects-grid .yooan-project-card__media { aspect-ratio: 4 / 4.2; }
  .yooan-projects-grid .yooan-project-card__title { font-size: 17px !important; }
  .yooan-projects-intro { margin-bottom: 28px !important; }
  .yooan-projects-index { padding-block: 48px !important; }
}

/* round 4e · news / Insights page
   ① the three side cards (lead + 2 rows) were stacked vertically → one horizontal swipe row, picture on top
   ② smaller hero slide: title, READ ARTICLE button, pager */
@media (max-width: 767px) {
  .ym-main .ym-side {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    gap: 12px !important;
    margin-inline: -15px;                       /* bleed to the screen edge (shell has 15px gutters) */
    padding: 0 15px 6px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ym-main .ym-side::-webkit-scrollbar { display: none; }
  .ym-main .ym-side > .ym-card {
    flex: 0 0 76%;
    display: block !important;                  /* row cards: picture on top instead of beside the text */
    grid-column: auto !important;
    padding: 10px 10px 16px !important;
    scroll-snap-align: start;
  }
  .ym-main .ym-side > .ym-card .ym-card__media { aspect-ratio: 3 / 2 !important; border-radius: 14px !important; }
  .ym-main .ym-side > .ym-card .ym-card__body { padding: 14px 6px 0 !important; }
  .ym-main .ym-side .ym-card__excerpt { font-size: 14px; margin: 10px 0 12px; -webkit-line-clamp: 2; }

  .ym-main .ym-slide__title { font-size: clamp(1.7rem, 8vw, 2rem) !important; }      /* « KNOB » hero headline (was ~2.35rem) */
  .ym-read { padding: 10px 16px !important; font-size: 11px !important; gap: 8px; min-height: 0 !important; margin-top: 16px; }
  .ym-btn  { padding: 12px 18px !important; font-size: 12px !important; min-height: 0 !important; }
  .ym-pager button { min-width: 36px; height: 36px; min-height: 0; }
  .ym-pager button[aria-current="true"] { width: 42px; height: 42px; }
  .ym-next__card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; }
}

/* round 4f · products
   ① products list hero: 780px tall background → ~560px (the text block sits at the bottom, so nothing is lost)
   ② product "Details" view (dots + round close-ups): a little taller stage so the picture is readable, smaller coin,
      and the "tap" hint text is shown (phones have no hover). JS also auto-opens the first dot (product-detail-split.js). */
@media (max-width: 767px) {
  .yp-hero { min-height: min(560px, 72svh) !important; padding-top: 104px !important; }
  .yp-hero__index { margin-top: 28px !important; }

  .yps-stage__views:has(.yps-view.is-active .yps-spots) { height: min(88vw, 340px); }   /* « KNOB » Details stage height */
  .yps-spots { --yps-coin: 104px; }                                                     /* « KNOB » close-up circle (was 130px) */
  .yps-spot { width: 26px !important; height: 26px !important; margin: -13px 0 0 -13px !important; }
  .yps-spots__hint span { display: inline !important; font-size: 0; }                  /* "Hover a dot" makes no sense on a phone → "Tap a dot" */
  .yps-spots__hint span::after { content: "Tap a dot"; font-size: 11px; letter-spacing: .02em; }
}

/* round 4g · tighter section gaps on phones
   Between two sections the page had 190–240px of empty cream/navy (bottom padding of one + top padding of the next).
   Section padding is now ~52px each side, so the gap reads as ~100px. « KNOB »: change 52px / 48px below. */
@media (max-width: 767px) {
  body.ya-about { --ya-space: 52px !important; }       /* About / Resources / Quote / Partnership share this variable */
  .yp-section { padding-block: 52px !important; }      /* Products list + product pages */
  .yp-choose { gap: 28px !important; }
  .yfp { padding-block: 48px !important; }             /* FAQ panel */
  .yfp--inset { margin-top: 40px !important; }
  .yh-showcase { padding-block: 40px !important; }    /* home: product carousel block */
  .yooan-partners--grid { padding-block: 28px !important; }
}

/* round 4h · every pill CTA on phones (e.g. footer "Plan your openings with us", quote / enquiry buttons):
   48px+ tall with a 40px arrow circle → 42px tall with a 32px circle. Variables are the site's own pill knobs (cta-system.css). */
@media (max-width: 767px) {
  html body :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link) {
    --pill-size: 32px;
    --pill-room: 46px;
    --pill-pad: 18px;
    min-height: 42px !important;
    font-size: 13px;
  }
  .yh-fade { height: 60px !important; }
}

/* ========== products groups · 2026-10-14 ==========
   Cards are wrapped per group (Casement windows / Sliding windows / Vertical lift & folding / Doors / Sunrooms).
   Desktop + tablet: the wrappers are invisible (display: contents) → the grid looks exactly as before.
   Phones: one swipe row per group with small thumbnails. Backup: _backup-products-groups-20261014/ */
.yp-group,
.yp-group__row { display: contents; }
.yp-group__head { display: none; }

@media (max-width: 767px) {
  .yp-catalog .yp-product-grid { display: block !important; }
  .yp-group { display: block; margin: 0 0 30px; }
  .yp-group:not(:has([data-product-card]:not([hidden]))) { display: none; }      /* filter hid every card of this group */
  .yp-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
  main .yp-group__title { margin: 0; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: .14em; text-transform: uppercase; }
  .yp-group__count { color: var(--yp-muted, #66708D); font: 500 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; }
  .yp-group__count::after { content: " systems →"; }

  .yp-group__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    margin-inline: -20px;                                   /* bleed to the screen edge (section gutter = 20px) */
    padding: 4px 20px 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yp-group__row::-webkit-scrollbar { display: none; }
  .yp-group__row > [data-product-card] {
    flex: 0 0 46%;                                           /* « KNOB » thumbnail card width: ~2 cards + a peek of the 3rd */
    min-width: 0;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
  }
  .yp-group__row > [data-product-card]:only-child { flex-basis: 64%; }   /* a group with one system (Sunrooms) */

  /* smaller notched card: radius / white frame / arrow button all scale together (they are variables) */
  .yp-group .ypc { --ypc-radius: 18px; --ypc-pad: 6px; --ypc-btn: 30px; --ypc-gap: 5px; --ypc-fillet: 9px; }
  .yp-group .ypc__btn { font-size: 14px; }
  .yp-group .ypc--name-only .ypc__body { min-height: calc(var(--ypc-notch) + 4px); padding: 8px calc(var(--ypc-notch) + 2px) 10px 11px; }
  main .yp-group .ypc--name-only .ypc__title { font-size: 12.5px !important; line-height: 1.25 !important; -webkit-line-clamp: 3; }
}

/* =========================================================================
   2026-10-16 手机端第五轮(用户真机检查后)
   ========================================================================= */
.yh-film__jump { display: none; }
@media (max-width: 767px) {
  /* 1. 全站大标题统一:页面主标题 26–29px,板块标题 21–24px,一般 2–3 行。
        :not(#y-k) 只是提高优先级,压过各组件自己写死的大字号。 */
  main h1:not(#y-k) { font-size: clamp(26px, 7.2vw, 29px) !important; line-height: 1.08 !important; max-width: none !important; }
  main h2:not(#y-k) { font-size: clamp(21px, 5.9vw, 24px) !important; line-height: 1.12 !important; max-width: none !important; }
  .yh-cinema__intro-title span:not(#y-k) { display: inline !important; font-size: inherit !important; }
  .pv2 .pv2-hero__title { max-width: none !important; }

  /* 2. 首页产品板块:"Explore all products" 和标题同一行,按钮缩小 */
  .yh-showcase--carousel .yh-showcase__head:not(#y-k) { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
  .yh-showcase--carousel .yh-showcase__head > div:not(#y-k) { flex: none; max-width: none; padding-bottom: 2px; }
  .yh-showcase--carousel .yh-showcase__head > div a:not(#y-k) { margin-top: 0; gap: 8px; padding-bottom: 4px; font-size: 12px; white-space: nowrap; }

  /* 3. 首页性能板块:户型图设备框在手机上不显示,只保留四张性能卡和按钮 */
  .yh-apps--proof .yh-apps__media { display: none !important; }

  /* 4. 首页工厂视频:手机上可以点 01/02/03 或左右滑动切换,不用等滚动过渡 */
  html body .yh-film__layer:not(#y-k) { display: block !important; opacity: 0 !important; z-index: 0 !important; transition: opacity .35s ease; }
  html body .yh-film__layer.is-active:not(#y-k) { opacity: 1 !important; z-index: 1 !important; }
  html body .yh-film__chapter:not(#y-k) { display: none !important; }
  html body .yh-film__chapter.is-active:not(#y-k) { display: block !important; visibility: visible !important; pointer-events: auto !important; }
  .yh-film__chapter.is-active :is(.yh-film__eyebrow, .yh-film__text, .yh-film__action, .yh-film__secondary, .yh-film__title span) { opacity: 1 !important; transform: none !important; }
  .yh-film__jump { position: absolute; z-index: 6; left: 16px; top: 16px; display: flex; gap: 6px; }
  html body .yh-film__jump button { all: unset; box-sizing: border-box; min-width: 0; min-height: 0; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(251,247,233,.35); background: rgba(14,23,51,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FBF7E9; font: 600 11px/1 "Geist Mono Variable", ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; }
  html body .yh-film__jump button.is-active { background: #F5A20E; border-color: #F5A20E; color: #0E1733; }

  /* 5. MENU 胶囊:下滑时隐藏、上滑出现;页面滚动后靠右(原来给"Talk to us"预留的空位把它挤到了中间) */
  html.ysn-scrolled:not(.ysn-menu-open) .ysn-cta-slot { display: none !important; }
  html body .ysn-menu-btn { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
  html.ysn-pill-away body .ysn-menu-btn { transform: translateY(-160%); opacity: 0; pointer-events: none; }

  /* 6. 合作页首屏展厅大图:改成竖一点的比例,展厅能看全;轮播小圆点恢复成小点(被全站"按钮至少 44px"规则撑大了) */
  .pv2 .pv2-hero__photo { aspect-ratio: 4 / 5 !important; }
  html body .yg-dot:not(#y-k) { min-width: 0 !important; min-height: 0 !important; width: 8px; height: 8px; padding: 0; }
  html body .yg-dot.is-active:not(#y-k) { width: 22px; }
  .yg--fill .yg-dots { left: 16px; bottom: 14px; gap: 6px; }

  /* 7. Resources 书架:整体缩小,书脊文字不再冒出书外 */
  .yrl .yrl-shelf { height: 380px !important; padding-top: 28px; }
  .yrl .yrl-book { width: calc(var(--w) * .62) !important; height: calc(var(--h) * .7) !important; margin-right: 7px; --open-w: min(290px, 78vw); --open-h: 360px; }
  .yrl .yrl-book.is-open { width: var(--open-w) !important; height: var(--open-h) !important; }
  .yrl .yrl-spine { padding: 12px 3px 10px; }
  .yrl .yrl-spine::before { top: 34px; } .yrl .yrl-spine::after { bottom: 30px; }
  .yrl .yrl-spine__top { font-size: 8.5px; line-height: 1.15; max-width: 100%; max-height: 22px; overflow: hidden; padding: 0 2px; word-break: break-word; }
  .yrl .yrl-spine__title { font-size: 12px; max-height: calc(100% - 92px); }
  .yrl .yrl-spine__foot { font-size: 8.5px; }
  .yrl .yrl-group { padding: 0 14px; }
  .yrl .yrl-group__label { margin: 0 -14px; height: 40px; font-size: 11px; }
  .yrl .yrl-group__label span { font-size: 10px; }
  .yrl .yrl-group + .yrl-group::before { bottom: 40px; height: 80px; }
  .yrl .yrl-cover { grid-template-rows: 104px 1fr !important; }
  .yrl .yrl-cover__mark { font-size: 24px; margin-bottom: 12px; }
  .yrl .yrl-cover__body { padding: 14px 16px 16px; }
  .yrl .yrl-cover__body h3 { font-size: 17px; }
  .yrl .yrl-cover__body > p { font-size: 13px; }
  .yrl .yrl-cover__body dl { font-size: 12.5px; gap: 4px 10px; }
}
@media (max-width: 767px) {
  /* 8. 产品详情页 "In the same Collection":手机上改为一排横滑,不再是两列错落(会出现大块空白) */
  .yps-collection__grid:not(#y-k) { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .yps-collection__grid::-webkit-scrollbar { display: none; }
  .yps-collection__grid > .yps-card:not(#y-k) { flex: 0 0 72%; height: 280px; grid-row: auto; grid-column: auto; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  /* ===== 2026-10-16 手机端第六轮 ===== */
  /* 首页首屏影片:手机用 4:5 专用版本,居中构图,定格画面能看到完整一点的房子 */
  .yh-cinema__visual:not(#y-k) { object-position: 50% 50% !important; }
  /* 首页产品板块:Windows / Doors / Sunrooms 标签居中 */
  .yhc__tabs:not(#y-k) { justify-content: center; margin-inline: auto; }
  /* 首页性能板块(户型图 + 四张性能卡):手机不展示,连同前后的渐变过渡条 */
  .yh-apps--proof, .yh-apps--proof + .yh-fade, .yh-fade:has(+ .yh-apps--proof) { display: none !important; }
  /* About 首屏:正文上移到 "Us" 右侧的空白处开始,排版更紧凑 */
  .yab-intro__grid:not(#y-k) { row-gap: 14px; }
  .yab-intro__text--left:not(#y-k) { margin-top: 0; }
  .yab-intro__text--left::before { content: none; }
  .yab-intro__text:not(#y-k) { line-height: 1.45 !important; }
  .yab-intro__side:not(#y-k) { gap: 10px; }
  /* About 数字标尺:压缩成一条,大约原来一半高;左右滑动切换 */
  .yab-numbers.ya-section:not(#y-k) { padding-top: 24px !important; padding-bottom: 24px !important; }
  .yab-ruler__viewport--copy:not(#y-k) { height: 74px; }
  .yab-ruler__label:not(#y-k) { margin-bottom: 4px; font-size: 10px; }
  .yab-ruler__desc:not(#y-k) { font-size: 13px; line-height: 1.35; }
  .yab-ruler__lines:not(#y-k) { height: 16px; margin: 2px 0; }
  .yab-ruler__lines:not(#y-k)::after { height: 14px; }
  .yab-ruler__viewport--num:not(#y-k) { height: 56px; }
  .yab-ruler__value:not(#y-k) { font-size: 34px !important; }
  .yab-ruler__controls:not(#y-k) { display: none; }
  /* About 展厅影片(胶片框)稍微放大:视频本身改成 4:3,不再锁定外层高度(原来那条规则造成了视频下方一大块空白) */
  .ya-about .yab-film__frame video:not(#y-k) { aspect-ratio: 4 / 3; }
  .yab-film:not(#y-k) { padding-bottom: 36px; }
  /* About 证书:去掉下面的进度方块,改为左右滑动 */
  .yab-cc__tabs:not(#y-k) { display: none !important; }
  /* Resources 书架:书脊顶部字号与边线(配合 resources-library.css 的新写法) */
  .yrl .yrl-spine__top:not(#y-k) { width: calc(100% - 8px); max-height: none; padding: 0 0 5px; font-size: 8.5px; }
  .yrl .yrl-spine__foot:not(#y-k) { width: calc(100% - 8px); padding-top: 5px; }
  .yrl .yrl-spine__title:not(#y-k) { max-height: calc(100% - 104px); }
}
@media (max-width: 767px) {
  /* 首页工厂视频:iPhone 拒绝自动播放时(省电模式等)显示一个播放按钮,点一下就播 */
  .yh-film__tap { position: absolute; z-index: 7; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(251,247,233,.55); border-radius: 50%; background: rgba(14,23,51,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FBF7E9; font-size: 22px; line-height: 62px; text-align: center; padding: 0 0 0 4px; min-width: 0 !important; min-height: 0 !important; }
  .yh-film__tap[hidden] { display: none; }
}

/* ========== 2026-10-16 · phones · Products (Nike-style) + Where-to-buy receipts ========== */
@media (max-width: 767px) {
  /* --- Products: category bar + 2-column grid (replaces one swipe row per group) --- */
  html.ymc-on .yp-catalog__mobile-trigger-wrap { display: none !important; }
  html.ymc-on .yp-catalog .yp-group,
  html.ymc-on .yp-catalog .yp-group__row { display: contents !important; }
  html.ymc-on .yp-catalog .yp-group__head { display: none !important; }
  html.ymc-on .yp-catalog .yp-product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  html.ymc-on .yp-catalog [data-product-card].is-mhide { display: none !important; }
  html.ymc-on .yp-catalog [data-product-card] { opacity: 1 !important; transform: none !important; min-width: 0; }

  .ymc { position: sticky; top: 0; z-index: 30; margin: 0 -20px 14px; padding: 14px 20px 10px; background: #FBF7E9; box-shadow: 0 10px 18px -16px rgba(14,23,51,.4); }
  .ymc__title { margin: 0 0 10px !important; padding-right: 110px; color: #0E1733; font-size: 22px !important; font-weight: 500; line-height: 1.15 !important; letter-spacing: -.02em; }
  .ymc__title b { color: #66708D; font-weight: 400; }
  .ymc__cats { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(14,23,51,.12); }
  .ymc__cats::-webkit-scrollbar, .ymc__subs::-webkit-scrollbar { display: none; }
  html body .ymc__cats button { all: unset; box-sizing: border-box; flex: none; min-width: 0 !important; min-height: 0 !important; padding: 8px 0 10px; color: #66708D; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  html body .ymc__cats button[aria-selected="true"] { color: #0E1733; border-bottom-color: #0E1733; }
  .ymc__subs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
  .ymc__subs[hidden] { display: none; }
  html body .ymc__subs button { all: unset; box-sizing: border-box; flex: none; min-width: 0 !important; min-height: 0 !important; padding: 7px 14px; border: 1px solid rgba(14,23,51,.22); border-radius: 999px; color: #0E1733; font-size: 13px; white-space: nowrap; cursor: pointer; }
  html body .ymc__subs button i { font-style: normal; color: #66708D; font-size: 11px; margin-left: 2px; }
  html body .ymc__subs button.is-on { background: #0E1733; border-color: #0E1733; color: #FBF7E9; }
  html body .ymc__subs button.is-on i { color: rgba(251,247,233,.7); }

  /* --- Where to buy: pills + receipt slip --- */
  .yhs.ymr-on .yhs__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  .yhs.ymr-on .yhs__grid > .yhs__card { all: unset; display: block; box-sizing: border-box; width: 100% !important; flex: none !important; transform: none !important; opacity: 1 !important; }
  .yhs.ymr-on .yhs__card > .ywb-room__fx { display: none; }
  html body .ymr__pill { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px !important; padding: 0 20px 0 24px; border-radius: 999px; background: #0E1733; color: #FBF7E9; font-size: 15px; cursor: pointer; transition: background .25s; }
  .ymr__no { display: grid; place-items: center; flex: none; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; background: #F5A20E; color: #0E1733; font: 700 11px/1 "Geist Mono Variable", ui-monospace, monospace; letter-spacing: .06em; }
  .ymr__place { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ymr__place b { font-weight: 650; }
  .ymr__chev { flex: none; font-size: 20px; line-height: 1; transition: transform .3s; }
  .yhs__card.is-open .ymr__pill { background: #F5A20E; color: #0E1733; }
  .yhs__card.is-open .ymr__no { background: #0E1733; color: #FBF7E9; }
  .yhs__card.is-open .ymr__chev { transform: rotate(45deg); }

  .ymr__slip { display: none; padding: 0 10px; filter: drop-shadow(0 14px 22px rgba(14,23,51,.18)); }
  .yhs__card.is-open .ymr__slip { display: block; animation: ymrPrint .55s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes ymrPrint { from { clip-path: inset(0 0 100% 0); transform: translateY(14px); } to { clip-path: inset(0 0 -40px 0); transform: none; } }
  .ymr__paper { --z: 14px; position: relative; padding: 30px 22px 30px; margin-bottom: 8px; background: #fff; color: #0E1733;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x; }
  .ymr__paper .ywb-room__no { display: none !important; } /* 2026-10-16：小票上不显示「02 · AUTHORISED PARTNER SHOWROOM」 */
  .ymr__paper h3 { margin: 0 0 14px !important; padding-bottom: 14px; border-bottom: 1px dashed rgba(14,23,51,.28); color: #0E1733 !important; font-size: 26px !important; text-align: center; letter-spacing: .02em; }
  .ymr__paper h3 span { color: #66708D !important; }
  .ymr__paper address { margin: 0 !important; color: #323D5D !important; font: 400 12.5px/1.6 "Geist Mono Variable", ui-monospace, monospace !important; max-width: none !important; }
  .ymr__paper .ywb-room__hours { margin: 12px 0 0 !important; padding-top: 12px; border-top: 1px dashed rgba(14,23,51,.28); color: #0E1733 !important; font: 600 12px/1.4 "Geist Mono Variable", ui-monospace, monospace !important; }
  .ymr__paper .ywb-room__actions { display: grid !important; grid-template-columns: 1fr; gap: 8px; margin-top: 16px !important; padding-top: 0 !important; }
  .ymr__paper .ywb-btn { justify-content: center; min-height: 44px; font-size: 13.5px !important; }
  .ymr__paper::after { content: "THANK YOU FOR VISITING"; display: block; margin-top: 16px; color: #66708D; font: 500 10px/1 "Geist Mono Variable", ui-monospace, monospace; letter-spacing: .2em; text-align: center; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .yhs__card.is-open .ymr__slip { animation: none; } }

/* ===== 2026-10-19 · phones · Projects: tabs + country chips + 2-column grid (overrides the round-4d swipe row) ===== */
@media (max-width: 767px) {
  html.ypj-on .yooan-projects-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px !important;
    overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none;
  }
  html.ypj-on .yooan-projects-grid__col { display: contents !important; }
  html.ypj-on .yooan-projects-grid .yooan-project-card { flex: none; min-width: 0; margin: 0 !important; }
  html.ypj-on .yooan-projects-grid .yooan-project-card.is-mhide { display: none !important; }
  html.ypj-on .yooan-projects-grid .yooan-project-card__media { aspect-ratio: 4 / 5 !important; border-radius: 14px; overflow: hidden; }
  html.ypj-on .yooan-projects-grid .yooan-project-card__title { font-size: 14px !important; line-height: 1.3 !important; margin-top: 8px; }
  html.ypj-on .yooan-projects-grid .yooan-project-card__explore { font-size: 12px !important; margin-top: 4px; }
  .ypj.ymc { margin-bottom: 14px; }
}

/* Mobile reading layout: headings stay in normal flow in both languages. */
@media (max-width: 1023px) {
  main :is(h1,h2,h3,h4) { overflow-wrap: anywhere; text-wrap: pretty; }
  main :is(h1,h2) { white-space: normal !important; }
  .yp-hero__title, .yp-hero__title span { white-space: normal !important; max-width: 100% !important; }
  .yab-intro__grid { min-width: 0; }
}
@media (max-width: 767px) {
  html body main h1:not(#y-k) { font-size: clamp(26px,7.2vw,34px) !important; line-height: 1.18 !important; }
  html body main h2:not(#y-k) { font-size: clamp(22px,6vw,28px) !important; line-height: 1.25 !important; }
  html body .yab-intro__grid:not(#y-k) { display: flex; flex-direction: column; gap: 22px; }
  html body .yab-intro__title:not(#y-k) { margin: 0; width: 100%; }
  html body .yab-intro__title .yab-script { display: inline; padding: 0; font-size: inherit !important; line-height: inherit; font-family: inherit; letter-spacing: -.025em; }
  html:not([lang^="zh"]) .yab-intro__title .yab-script + .yab-script::before { content: " "; }
  html body .yab-intro__text--left:not(#y-k) { margin: 0; padding: 0; }
  html body .yab-intro__text:not(#y-k) { font-size: 16px; font-weight: 400; line-height: 1.65 !important; }
  .yp-hero__copy, .yp-hero__content { min-width: 0; width: 100%; }
  html body .ysn-pills { top: 16px; right: max(24px,env(safe-area-inset-right)); gap: 6px; }
  html body .ysn-pills .ysn-menu-btn { order: 9; height: 44px; min-height: 44px; padding-inline: 12px; font-size: 12px; }
  html body .ysn-pills .ysn-language { height: 44px; margin: 0; padding: 3px; gap: 2px; font-size: 12px; }
  html body .ysn-pills .ysn-language a { height: 36px; min-height: 36px; min-width: 36px; padding-inline: 5px; }
  html body .ysn-logo { width: clamp(64px,20vw,78px); }
  html.ysn-scrolled:not(.ysn-menu-open) .ysn-cta-slot { display: none !important; }
  html body .ymc__title { padding-right: 0; }
  html body .ymc__cats button, html body .ymc__subs button { min-height: 44px !important; }
  html.ypj-on .yooan-projects-grid .yooan-project-card { width: auto !important; max-width: 100%; }
  html.ypj-on .yooan-projects-grid .yooan-project-card__title { overflow-wrap: anywhere; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body main h1:not(#y-k) { font-size: clamp(34px,5vw,48px) !important; line-height: 1.15 !important; }
  html body main h2:not(#y-k) { font-size: clamp(28px,4vw,38px) !important; line-height: 1.2 !important; }
}

/* Factory chapters: controls and copy share the card's available width. */
@media (max-width: 767px) {
  html body #factory-film .yh-film__stage { display: flex; flex-direction: column; height: auto !important; min-height: 540px; margin: 16px; border-radius: 24px; overflow: hidden; background: #0b0f1d; }
  html body #factory-film .yh-film__media { inset: 0; width: 100%; height: 100%; transform: none; clip-path: none; border-radius: inherit; }
  html body #factory-film .yh-film__jump { position: relative; order: -1; inset: auto; padding: 18px 18px 0; margin: 0; width: 100%; box-sizing: border-box; }
  html body #factory-film .yh-film__jump button { min-height: 36px !important; padding: 0 14px; }
  html body #factory-film .yh-film__copy { position: relative; inset: auto; width: 100%; max-width: 100%; padding: 24px 18px 120px; box-sizing: border-box; opacity: 1 !important; }
  html body #factory-film .yh-film__chapter { width: 100%; min-width: 0; max-width: 100%; position: relative; inset: auto; }
  html body #factory-film .yh-film__eyebrow { margin: 0 0 18px; white-space: normal; font-size: 11px !important; line-height: 1.5; letter-spacing: .1em; }
  html body #factory-film .yh-film__title { margin: 0 0 20px; width: 100%; font-size: clamp(24px,6.4vw,30px) !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  html body #factory-film .yh-film__title span { white-space: normal; }
  html body #factory-film .yh-film__text { width: 100%; max-width: 100%; margin: 0 0 24px; padding: 16px; box-sizing: border-box; font-size: 15px !important; line-height: 1.65 !important; overflow-wrap: anywhere; }
}

/* 2026-10-20: phone-only complete document artwork and quiet factory card. */
/* Background videos have no native WebKit playback overlay, on any viewport. */
#factory-film video::-webkit-media-controls,
#factory-film video::-webkit-media-controls-panel,
#factory-film video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* Safari can composite native overlay controls above otherwise transparent layers. */
#factory-film .yh-film__tap,
#factory-film .yh-film__play { display: none !important; visibility: hidden !important; pointer-events: none !important; }
#factory-film video::-webkit-media-controls-overlay-play-button,
#factory-film video::-webkit-media-controls-play-button,
#factory-film video::-webkit-media-controls-enclosure,
#factory-film video::-webkit-media-controls-overlay-enclosure { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; -webkit-appearance: none; }
@media (max-width: 767px) {
  html body #factory-film .yh-film__layer:not(.is-active) { display: none !important; visibility: hidden !important; }
  html body #factory-film video { pointer-events: none; }
  html body #technical-resources .dd-card .dd-media { aspect-ratio: 4 / 5 !important; }
  html body #technical-resources .dd-media__inner { position: absolute; inset: 0 !important; transform: none !important; }
  html body #technical-resources .dd-media img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; transform: none !important; }
  html body #factory-film .yh-film__jump,
  html body #factory-film .yh-film__tap { display: none !important; }
  html body #factory-film .yh-film__stage { height: clamp(540px,76svh,740px) !important; min-height: 540px; }
  html body #factory-film .yh-film__copy { flex: 1; display: flex; align-items: flex-start; padding: 72px 20px 130px; }
  html body #factory-film .yh-film__chapter { position: static; text-align: left; }
  html body #factory-film .yh-film__eyebrow { justify-content: flex-start; margin-bottom: 20px; }
  html body #factory-film .yh-film__title { margin-bottom: 32px; text-shadow: 0 2px 12px rgba(0,0,0,.75); }
  html body #factory-film .yh-film__text { max-width: 29ch; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; line-height: 1.85 !important; text-shadow: 0 1px 6px #101827,0 2px 14px #101827; }
  html body #factory-film .yh-film__action { position: absolute; left: 18px; bottom: 28px; max-width: calc(100% - 36px); text-align: left; }
}

/* ===== 2026-10-19 · phones · 最小字号下限：手机上任何要读的字不小于 12px，可点的按钮文字不小于 13px（中英文同一套） ===== */
@media (max-width: 767px) {
  .yh-film__eyebrow, .yh-support__eyebrow, .yhs__eyebrow, .ym-eyebrow, .yv-collection__eyebrow, .yab-certs__eyebrow,
  .yp-eyebrow, .yp-mono, .dd-card__status, .yv-card__format, .yvi-card__topic, .ym-next__label, .ym-read,
  main time, main figcaption, .yooan-project-specs__label, .ypi__type, .yps-card__foot, .yooan-partners__note,
  .yp-group__title, .yooan-footer__heritage span, .yab-certs b, .yab-arc__now b { font-size: 12px !important; line-height: 1.4 !important; }
  html body main .yh-cinema .yh-cinema__intro-actions > a:not(#y-k) { font-size: 13px !important; }
}

/* Phone film: fixed content footprint, with scroll scrubbing inside it. */
@media (max-width: 767px) {
  html body.home .yh-cinema { height: var(--yh-mobile-pin-height, 650px) !important; }
  html body.home .yh-cinema__pin { position: relative; height: var(--yh-mobile-pin-height, 650px) !important; min-height: 0 !important; }
  html body.home .yh-cinema__media { bottom: auto !important; height: var(--yh-mobile-media-height, 62.5vw) !important; aspect-ratio: 16 / 10; overflow: visible; }
  html body.home .yh-cinema__visual { object-fit: cover !important; object-position: center !important; border-radius: inherit; }
  html body.home .yh-cinema__shade { border-radius: inherit; }
  html body.home .yh-cinema__proof { top: calc(100% + 24px); bottom: auto; color: #3e4863; border-color: rgba(14,23,51,.24); }
  html body.home .yh-cinema__proof span:first-child { color: #916000; }
  html body.home .yh-cinema__statement { top: 22%; transform: none; font-size: clamp(28px, 9vw, 40px) !important; line-height: 1; }
  html body.home .yh-cinema__media-link {
    --pill-size: 28px; --pill-room: 40px; --pill-pad: 12px;
    position: absolute !important; top: calc(22% + var(--yh-mobile-copy-height, 80px) + 12px);
    right: auto; left: 22px; width: 132px; height: 44px !important; min-height: 44px !important;
    padding: 6px var(--pill-room) 6px var(--pill-pad) !important;
    font-size: 12px !important; line-height: 1.15 !important; letter-spacing: .02em; gap: 8px; white-space: normal;
  }
  html body.home .yh-cinema__media-link > .yooan-origin-cta__label { white-space: normal; }
  html body .ymc-more { display: flex; justify-content: center; padding: 24px 0 8px; }
  html body .ymc-more[hidden] { display: none !important; }
  html body .ymc-more button { min-height: 44px; padding: 10px 20px; border: 1px solid rgba(14,23,51,.4); border-radius: 999px; background: transparent; color: #0e1733; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
  html.ymc-on [data-product-card].is-mfold { display: none !important; }
  html body #factory-film .yv-tap { display: none !important; }
}

/* Bounded homepage title control; other page headings keep their own scale. */
@media(max-width:767px){html body.home main #yooan-home-hero-title{font-size:clamp(calc(26px * var(--yh-title-mobile-scale,1)),calc(7.2vw * var(--yh-title-mobile-scale,1)),calc(29px * var(--yh-title-mobile-scale,1)))!important}}

/* Reserve the phone hero footprint in normal flow before deferred JS runs. */
@media(max-width:767px){
  html body.home .yh-cinema,html body.home .yh-cinema__pin{height:auto!important}
  html body.home .yh-cinema__pin{padding-bottom:112px!important;overflow:visible}
  html body.home .yh-cinema__intro{position:relative!important;inset:auto!important}
  html body.home .yh-cinema__media{position:relative!important;inset:auto!important;margin-top:22px;width:100%;height:62.5vw!important}
}

/* Preserve the desktop cards while mobile ships its final accordion structure. */
@media(min-width:768px){
  .ymr-server .ymr__pill{display:none!important}
  .ymr-server .ymr__slip,.ymr-server .ymr__paper{display:contents}
}

/* The desktop display:contents wrappers do not create stacking boxes.
   Put each real content box above the original decorative background. */
@media(min-width:768px){
  .ymr-server .ymr__paper > *{position:relative;z-index:1}
  .ymr-server .ywb-room__fx{z-index:0;pointer-events:none}
}