/* 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}}