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

/* Source: home-motion.css */
/* Scoped to homepage modules; no editor overrides or remote dependencies. */
.yooan-motion-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(900px, 90svh);
  padding-bottom: 140px;
}
.yooan-motion-hero > .wp-block-group { position: relative; z-index: 2; width: 100%; }
.yooan-motion-hero > .wp-block-group > * { margin-inline: 0 !important; }
.yooan-motion-hero .is-style-yooan-lead { max-width: 44ch; }
.yooan-motion-hero h1 { max-width: 20ch; font-size: clamp(40px, 5vw, 76px); }
.yooan-hero-media, .yooan-hero-slide { position: absolute; inset: 0; max-width: none !important; margin: 0 !important; }
.yooan-hero-media { z-index: -1; background: var(--wp--preset--color--ink); }
.yooan-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,23,51,.97), rgba(14,23,51,.77) 46%, rgba(14,23,51,.16)), linear-gradient(0deg, rgba(14,23,51,.85), transparent 45%);
}
.yooan-hero-slide { opacity: 0; transition: opacity 1000ms ease; }
.yooan-hero-slide.is-active { opacity: 1; }
.yooan-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yooan-hero-slide--product { background: radial-gradient(ellipse at 80% 38%, #65716d, #253b4c 52%, #0e1733); }
.yooan-hero-slide--product img { object-fit: contain; width: 78%; margin-left: auto; object-position: center; }
.yooan-motion-hero.is-enhanced .is-active img { animation: yooan-ken-burns 9000ms linear both; animation-play-state: paused; }
.yooan-motion-hero.is-playing .is-active img { animation-play-state: running; }
@keyframes yooan-ken-burns { from { transform: scale(1); } to { transform: scale(1.065); } }

/* Homepage product stage: oversized editorial copy with a right-aligned product demo. */
body.home .wp-site-blocks > .wp-block-template-part:first-child {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child .wp-block-group.alignwide {
  transition: padding 260ms cubic-bezier(.16, 1, .3, 1);
}

body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-scrolled .wp-block-group.alignwide {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.admin-bar.home .wp-site-blocks > .wp-block-template-part:first-child {
  top: 32px;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child > .wp-block-group {
  color: var(--wp--preset--color--ink);
  background: transparent !important;
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-scrolled > .wp-block-group {
  background: rgba(251, 247, 233, .94) !important;
  box-shadow: 0 16px 42px rgba(14, 23, 51, .08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.home .wp-site-blocks > .wp-block-template-part:first-child .wp-block-site-title a {
  color: #F5A20E !important;
  font-weight: 720;
  letter-spacing: .08em;
  text-decoration: none;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child .wp-block-navigation-item__label {
  display: inline-block;
  transform: translateY(0);
  transition: color 180ms ease, transform 240ms cubic-bezier(.16, 1, .3, 1);
}

body.home .wp-site-blocks > .wp-block-template-part:first-child .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
body.home .wp-site-blocks > .wp-block-template-part:first-child .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
  color: #F5A20E;
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------------
   Homepage hero stage
   A muted product film is pinned to the viewport while the headline and the
   capability strip scroll over it. Palette stays inside the YOOAN system:
   #070B16 is the brand ink (#0E1733) darkened, so the dark band still reads as
   YOOAN rather than as a generic dark template.
   --------------------------------------------------------------------------- */
.yooan-hero-stage.yooan-motion-hero {
  --hero-ink: #070B16;
  --hero-paper: #FBF7E9;
  --hero-accent: #F5A20E;
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 0;
  padding: 0;
  overflow: visible; /* sticky children cannot survive a clipping ancestor */
  color: var(--hero-paper);
  background: var(--hero-ink);
}

.yooan-hero-stage__pin {
  position: sticky;
  z-index: 0;
  top: 0;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  background: #000;
}

.yooan-hero-stage__video {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 64% center; /* keeps the products clear of the headline column */
}

/* Two jobs: keep the fixed navigation legible at the top, keep the headline
   legible on the left. Same technique already used by .yooan-hero-media. */
.yooan-hero-stage__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7, 11, 22, .86) 0%, rgba(7, 11, 22, .34) 13%, rgba(7, 11, 22, 0) 26%),
    linear-gradient(101deg, rgba(7, 11, 22, .95) 0%, rgba(7, 11, 22, .84) 28%, rgba(7, 11, 22, .46) 55%, rgba(7, 11, 22, .14) 78%, rgba(7, 11, 22, .34) 100%);
}

/* Dissolves the film into the brand dark so the section can meet the cream
   band below on a clean edge instead of fading through grey. */
.yooan-hero-stage__hem {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(150px, 22svh, 260px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 11, 22, 0) 0%, rgba(7, 11, 22, .72) 58%, var(--hero-ink) 100%);
}

.yooan-hero-stage__flow {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
}

.yooan-hero-stage__screen {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding: clamp(132px, 11vw, 184px) var(--yooan-content-padding) clamp(104px, 10vw, 148px);
}

.yooan-hero-stage__copy {
  width: min(1340px, 100%);
  max-width: 40rem;
  margin-inline: auto 0;
  margin-inline-start: max(0px, calc((100% - 1340px) / 2));
}

.yooan-hero-stage__eyebrow {
  max-width: 42ch;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  color: var(--hero-accent);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(.7rem, .8vw, .78rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.yooan-hero-stage h1.yooan-hero-stage__title {
  max-width: none;
  margin: 0;
  color: var(--hero-paper);
  font-size: clamp(3rem, 5.35vw, 5.15rem);
  font-weight: 420;
  line-height: .91;
  letter-spacing: -.055em;
}

.yooan-hero-stage__line { display: block; }

.yooan-hero-stage__line--quiet {
  color: rgba(251, 247, 233, .62);
  font-weight: 360;
}

.yooan-hero-stage__line--strong {
  margin-top: .03em;
  font-weight: 720;
}

.yooan-hero-stage__line--italic {
  max-width: 13ch;
  margin-top: .14em;
  color: rgba(251, 247, 233, .82);
  font-size: .68em;
  font-style: italic;
  font-weight: 360;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.yooan-hero-stage__lead {
  max-width: 54ch;
  margin: clamp(27px, 3vw, 42px) 0 0;
  color: rgba(251, 247, 233, .74);
  font-size: clamp(1rem, 1.24vw, 1.16rem);
  line-height: 1.58;
}

.yooan-hero-stage__signature {
  margin: 20px 0 0;
  color: var(--hero-paper);
  font-family: var(--wp--preset--font-family--display);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.yooan-hero-stage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 38px);
  align-items: center;
}

.yooan-hero-stage__actions .wp-block-button__link {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

/* Secondary, lower-commitment path for visitors who already know what they want. */
.yooan-hero-stage__ghost {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 48px;
  align-items: center;
  padding: .95rem clamp(1.35rem, 1.9vw, 1.75rem);
  border: 1px solid rgba(251, 247, 233, .38);
  border-radius: 12px;
  color: var(--hero-paper);
  background: transparent;
  font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}

.yooan-hero-stage__ghost:hover,
.yooan-hero-stage__ghost:focus-visible {
  border-color: var(--hero-accent);
  color: var(--hero-accent);
  background: rgba(245, 162, 14, .08);
}

.yooan-hero-stage__scroll {
  position: absolute;
  bottom: clamp(28px, 4.5vh, 52px);
  left: var(--yooan-content-padding);
  margin: 0;
  color: rgba(251, 247, 233, .5);
  font-family: var(--wp--preset--font-family--spec);
  font-size: .64rem;
  font-weight: 550;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.yooan-hero-stage__scroll span { position: relative; padding-left: 34px; }

.yooan-hero-stage__scroll span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 1px;
  background: rgba(251, 247, 233, .5);
  transform-origin: left center;
  animation: yooan-scroll-cue 2600ms cubic-bezier(.62, .02, .34, 1) infinite;
}

@keyframes yooan-scroll-cue {
  0%, 100% { transform: scaleX(.3); opacity: .45; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* Capability strip: the credibility beat, placed on the first scroll move so
   procurement-side visitors meet proof before the page turns cream. */
.yooan-hero-stage__ledge {
  padding: 0 var(--yooan-content-padding) clamp(150px, 22svh, 260px);
}

.yooan-hero-stage__capability {
  width: min(1340px, 100%);
  margin-inline: auto;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
  border-radius: clamp(18px, 2vw, 26px);
}

.yooan-hero-stage__capability-title {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  color: rgba(251, 247, 233, .58);
  font-family: var(--wp--preset--font-family--display);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.yooan-hero-stage__specs {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
  list-style: none;
}

.yooan-hero-stage__spec {
  display: grid;
  gap: 6px;
  align-content: start;
}

.yooan-hero-stage__spec + .yooan-hero-stage__spec {
  padding-left: clamp(24px, 3vw, 52px);
  border-left: 1px solid rgba(251, 247, 233, .16);
}

.yooan-hero-stage__spec-index {
  color: var(--hero-accent);
  font-family: var(--wp--preset--font-family--spec);
  font-size: .64rem;
  font-weight: 550;
  letter-spacing: .14em;
}

.yooan-hero-stage__spec-value {
  color: var(--hero-paper);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.yooan-hero-stage__spec-value sup { font-size: .5em; }

.yooan-hero-stage__spec-label {
  color: rgba(251, 247, 233, .9);
  font-family: var(--wp--preset--font-family--display);
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: .01em;
}

.yooan-hero-stage__spec-note {
  max-width: 34ch;
  color: rgba(251, 247, 233, .55);
  font-size: .82rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Liquid glass
   Alpha values sit well above the usual reference implementation on purpose:
   the film behind this card is close to black, so a 0.005 white wash would be
   invisible. These are tuned against that footage.
   --------------------------------------------------------------------------- */
.yooan-glass {
  position: relative;
  overflow: hidden;
  border: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, .058) 0%, rgba(255, 255, 255, .024) 42%, rgba(255, 255, 255, .012) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.35) brightness(1.06);
  backdrop-filter: blur(18px) saturate(1.35) brightness(1.06);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .45);
}

.yooan-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 16%,
    rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .03) 62%,
    rgba(255, 255, 255, .09) 86%, rgba(255, 255, 255, .22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.yooan-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .07) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 52%, rgba(255, 255, 255, .02) 82%, rgba(255, 255, 255, .045) 100%);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .yooan-glass { background: rgba(16, 22, 38, .88); }
}

/* ---------------------------------------------------------------------------
   Navigation over the dark stage
   The homepage header is fixed and inherits ink-coloured links, which would be
   invisible against the film. While the header sits over the stage it turns
   cream and drops its bar; past the stage the existing cream bar returns.
   --------------------------------------------------------------------------- */
body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-over-hero > .wp-block-group {
  color: var(--wp--preset--color--base) !important;
  background: transparent !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-over-hero .wp-block-navigation a:not([href*="page_id=1052"]),
body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-over-hero .wp-block-navigation-item__label,
body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-over-hero .wp-block-navigation__responsive-container-open {
  color: #FBF7E9 !important;
}

body.home .wp-site-blocks > .wp-block-template-part:first-child.is-yooan-over-hero .wp-block-navigation__responsive-container-open svg { fill: currentColor; }

@media (max-width: 1080px) {
  .yooan-hero-stage h1.yooan-hero-stage__title { font-size: clamp(2.75rem, 5.2vw, 4.35rem); }
  .yooan-hero-stage__specs { gap: clamp(18px, 2.4vw, 32px); }
  .yooan-hero-stage__spec + .yooan-hero-stage__spec { padding-left: clamp(18px, 2.4vw, 32px); }
}

@media (max-width: 820px) {
  body.admin-bar.home .wp-site-blocks > .wp-block-template-part:first-child { top: 46px; }

  .yooan-hero-stage__screen { padding-top: 124px; padding-bottom: 108px; }
  .yooan-hero-stage__copy { max-width: 690px; }
  .yooan-hero-stage h1.yooan-hero-stage__title { font-size: clamp(3rem, 10.8vw, 5.6rem); }
  .yooan-hero-stage__line--italic { max-width: 15ch; }
  .yooan-hero-stage__video { object-position: center; }

  .yooan-hero-stage__veil {
    background:
      linear-gradient(to bottom, rgba(7, 11, 22, .88) 0%, rgba(7, 11, 22, .4) 15%, rgba(7, 11, 22, .1) 32%),
      linear-gradient(to top, rgba(7, 11, 22, .92) 8%, rgba(7, 11, 22, .55) 48%, rgba(7, 11, 22, .3) 100%);
  }

  .yooan-hero-stage__specs { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .yooan-hero-stage__spec + .yooan-hero-stage__spec {
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid rgba(251, 247, 233, .16);
    border-left: 0;
  }

  .yooan-hero-stage__ledge { padding-bottom: clamp(110px, 16svh, 180px); }
}

@media (max-width: 520px) {
  .yooan-hero-stage__screen { padding-top: 100px; padding-bottom: 92px; }
  .yooan-hero-stage__eyebrow { margin-bottom: 18px; }
  .yooan-hero-stage h1.yooan-hero-stage__title { font-size: clamp(2.45rem, 11.5vw, 3.7rem); line-height: .94; }
  .yooan-hero-stage__lead { margin-top: 18px; font-size: .92rem; line-height: 1.48; }
  .yooan-hero-stage__signature { max-width: 32ch; margin-top: 14px; font-size: .72rem; }
  .yooan-hero-stage__actions { margin-top: 22px; }
  .yooan-hero-stage__actions > * { width: 100%; justify-content: center; }
  .yooan-hero-stage__scroll { display: none; }
}

/* Motion preference: the film holds on its poster frame, nothing else moves. */
.yooan-hero-stage.yooan-motion-quiet .yooan-hero-stage__scroll span::before { animation: none; transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .yooan-hero-stage__scroll span::before { animation: none; transform: scaleX(1); }
  .yooan-hero-stage__video { transition: none; }
}

.yooan-motion-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-block: 24px 0; max-width: 1280px;
}
.yooan-motion-controls button, .yooan-motion-toggle {
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.35;
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--wp--preset--color--warm-border);
  border-radius: 0; cursor: pointer; color: var(--wp--preset--color--ink); background: transparent;
}
.yooan-motion-controls button[aria-pressed="true"] { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
.yooan-motion-controls button:focus-visible, .yooan-motion-toggle:focus-visible { outline: 3px solid var(--wp--preset--color--brand-orange); outline-offset: 4px; }
.yooan-motion-controls button:hover { border-color: currentColor; }
.yooan-motion-hero > .yooan-motion-controls {
  position: absolute; bottom: 32px; left: var(--yooan-content-padding); right: var(--yooan-content-padding); z-index: 3; max-width: none;
}
.yooan-motion-hero .yooan-motion-controls button, .yooan-motion-toggle { color: var(--wp--preset--color--base); border-color: #a9b0c6; background: rgba(14,23,51,.6); }
.yooan-motion-hero .yooan-motion-controls button[aria-pressed="true"] { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--base); }
.yooan-motion-toggle { position: absolute; top: 20px; right: var(--yooan-content-padding); z-index: 4; }
.yooan-motion-pause { margin-inline-start: auto; }

/* Short reveals without pinned sections, scroll-jacking or invisible copy. */
.yooan-motion-reveal.is-pending .yooan-home-section-heading { opacity: .65; transform: translateY(18px); }
.yooan-motion-reveal .yooan-home-section-heading { transition: opacity 700ms ease, transform 700ms ease; }
.yooan-motion-proof .yooan-home-grid { padding-block: 12px 26px; }
.yooan-motion-proof .wp-block-column { min-width: 0; transition: transform 850ms cubic-bezier(.2,.7,.2,1); }
.yooan-motion-proof .is-style-yooan-card { height: 100%; box-sizing: border-box; box-shadow: 0 12px 30px rgba(14,23,51,.055); }
.yooan-motion-proof .wp-block-column:nth-child(1) { --fan-rotation: -3deg; --fan-y: 12px; }
.yooan-motion-proof .wp-block-column:nth-child(2) { --fan-rotation: -1deg; --fan-y: 0px; }
.yooan-motion-proof .wp-block-column:nth-child(3) { --fan-rotation: 1deg; --fan-y: 0px; }
.yooan-motion-proof .wp-block-column:nth-child(4) { --fan-rotation: 3deg; --fan-y: 12px; }
.yooan-motion-proof.is-revealed .wp-block-column { transform: translateY(var(--fan-y)) rotate(var(--fan-rotation)); }
.yooan-motion-proof.is-revealed .wp-block-column:hover { transform: translateY(-6px); }
.yooan-motion-proof h3 { font-variant-numeric: tabular-nums; }

/* Progressive enhancement: without JS, the original accessible grid remains. */
.yooan-motion-deck.is-enhanced .yooan-home-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; padding: 0 12px 16px 0;
}
.yooan-motion-deck.is-enhanced .yooan-home-grid > .wp-block-column {
  grid-area: 1 / 1; min-width: 0; margin: 0; z-index: 0;
  visibility: hidden; opacity: 0; transform: translate(12px, 12px) scale(.985);
  transition: opacity 450ms ease, transform 600ms ease;
}
.yooan-motion-deck.is-enhanced .yooan-home-grid > .wp-block-column.is-active { visibility: visible; opacity: 1; transform: none; z-index: 1; }
.yooan-motion-deck.is-enhanced .is-style-yooan-card {
  min-height: 290px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 72px); box-shadow: 12px 12px 0 var(--wp--preset--color--warm-border); align-items: center; text-align: center;
}
.yooan-motion-deck.is-enhanced h3 { font-size: clamp(30px, 4.5vw, 60px); line-height: 1.12; max-width: 24ch; }
.yooan-motion-deck.is-enhanced .is-style-yooan-card p { margin-inline: 0; max-width: 60ch; }
.yooan-motion-performance .wp-block-column:nth-child(2) .is-style-yooan-card { background: var(--wp--preset--color--brand-orange); color: var(--wp--preset--color--ink); border-color: transparent; }
.yooan-motion-performance .wp-block-column:nth-child(3) .is-style-yooan-card { background: var(--wp--preset--color--link-blue); color: var(--wp--preset--color--base); border-color: transparent; }
.yooan-motion-performance .wp-block-column:nth-child(3) h3 { color: inherit; }
.yooan-motion-performance .wp-block-column:nth-child(4) .is-style-yooan-card { background: var(--wp--preset--color--surface-warm); }
.yooan-motion-projects.is-enhanced .is-active h3 { animation: yooan-title-focus 650ms ease both; }
@keyframes yooan-title-focus { from { opacity: .3; filter: blur(7px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
.yooan-motion-deck > .yooan-motion-controls { margin-bottom: 32px; }
.yooan-motion-quiet *, .yooan-motion-quiet *::before, .yooan-motion-quiet *::after { animation: none !important; transition: none !important; }
.yooan-motion-quiet .yooan-home-section-heading, .yooan-motion-quiet .wp-block-column { opacity: 1; transform: none !important; }
.yooan-motion-quiet .yooan-motion-pause { display: none; }
@media (max-width: 1000px) {
  .yooan-motion-proof .yooan-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yooan-motion-proof.is-revealed .wp-block-column { transform: none; }
}
@media (max-width: 600px) {
  .yooan-motion-hero { min-height: 760px; padding-top: 100px; padding-bottom: 180px; }
  .yooan-motion-hero h1 { font-size: clamp(36px, 9.8vw, 58px); }
  .yooan-hero-slide--product img { width: 100%; opacity: .45; }
  .yooan-hero-media::after { background: linear-gradient(90deg, rgba(14,23,51,.93), rgba(14,23,51,.68)); }
  .yooan-motion-hero > .yooan-motion-controls { bottom: 24px; }
  .yooan-motion-controls button { font-size: 13px; padding: 10px 12px; }
  .yooan-motion-pause { margin-inline-start: 0; }
  .yooan-motion-proof .yooan-home-grid { grid-template-columns: minmax(0, 1fr); }
  .yooan-motion-deck.is-enhanced .is-style-yooan-card { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  [class*="yooan-motion-"] *, [class*="yooan-motion-"] *::before { animation: none !important; transition: none !important; }
  .yooan-motion-reveal .yooan-home-section-heading, .yooan-motion-proof .wp-block-column { opacity: 1 !important; transform: none !important; }
}


/* Source: home-hero-selected-projects.css */
/* YOOAN homepage hero — "Selected Projects" variant.
   Interactive floor-plan model with hoverable product hotspots.
   Typography reuses the theme's global Schibsted Grotesk / Fustat faces
   (already loaded site-wide by assets/css/components.css) — only the
   marker/label micro-type (Manrope) is new to this component. */

@font-face{font-family:YooanBannerManrope;src:url('../fonts/manrope-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:YooanBannerManrope;src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---- Layout: copy left, model right ---- */
.yh-hero{--cream:#fbf7e9;--ink:#0e1733;--soft:#4c5676;--copy:#323d5d;--orange:#f5a20e;position:relative;display:grid;min-height:100svh;grid-template-columns:minmax(430px,39%) minmax(0,61%);overflow:hidden;color:var(--ink);background:var(--cream)}
.yh-hero *{box-sizing:border-box}
.yh-hero__copy{position:relative;z-index:4;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(48px,6.1vw,118px) clamp(36px,4.8vw,92px)}
.yh-hero__copy::before{content:"";position:absolute;top:clamp(34px,4vw,70px);left:clamp(36px,4.8vw,92px);width:clamp(42px,4vw,72px);height:3px;background:var(--orange)}
.yh-hero__eyebrow{max-width:38ch;margin:0 0 clamp(22px,2.1vw,34px);color:#8c5b00;font:650 clamp(.7rem,.72vw,.82rem)/1.4 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.115em;text-transform:uppercase}
.yh-hero__title{margin:0;color:var(--ink);font:420 clamp(3.4rem,5vw,6.15rem)/.91 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:-.058em}
.yh-hero__title span{display:block}
.yh-hero__title .is-quiet{color:var(--soft);font-weight:350;white-space:nowrap}
.yh-hero__title .is-strong{margin-top:.035em;font-weight:760}
.yh-hero__title .is-italic{max-width:11.5ch;margin-top:.16em;color:var(--copy);font-size:.64em;font-style:italic;font-weight:350;line-height:1.04;letter-spacing:-.048em}
.yh-hero__lead{max-width:52ch;margin:clamp(27px,3vw,44px) 0 0;color:var(--copy);font:400 clamp(1rem,1.06vw,1.22rem)/1.58 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-hero__proof{max-width:38ch;margin:clamp(18px,1.65vw,27px) 0 0;color:var(--ink);font:700 clamp(.74rem,.7vw,.85rem)/1.45 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.yh-hero__action{display:inline-flex;width:max-content;align-items:center;gap:22px;margin-top:clamp(26px,2.5vw,40px);padding:14px 17px 14px 19px;color:#fff;background:var(--ink);font:650 .8rem/1 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.035em;text-decoration:none;transition:transform .2s ease,background .2s ease}
.yh-hero__action::after{content:"↗\FE0E";color:var(--orange);font-size:1.05rem;line-height:1}
.yh-hero__action:hover,.yh-hero__action:focus-visible{transform:translateY(-2px);background:#1b2749}
.yh-hero__action:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.yh-hero__visual{position:relative;z-index:1;display:flex;min-width:0;align-items:center;background:var(--cream)}
.yh-hero__visual::before{content:"";position:absolute;inset:6% auto 6% 0;width:1px;background:linear-gradient(transparent,#dfd8c3 18% 82%,transparent)}
.yh-hero .yh-hero__model.yb-banner{--yb-background:var(--cream);width:106%;margin-left:-3%;transform:scale(1.04);transform-origin:center;background:var(--cream)}
/* Real alpha-channel cutout now — no mix-blend-mode hack needed against the cream backdrop. */
.yh-hero>.yooan-motion-toggle{position:absolute;z-index:10;top:auto;right:clamp(18px,2.4vw,36px);bottom:18px;min-height:34px;padding:7px 11px;border:1px solid rgba(14,23,51,.2);border-radius:999px;color:rgba(14,23,51,.72);background:rgba(251,247,233,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11px;line-height:1}
.yh-hero__copy>*{animation:yh-enter .7s cubic-bezier(.2,.72,.24,1) both}
.yh-hero__copy>:nth-child(2){animation-delay:.06s}.yh-hero__copy>:nth-child(3){animation-delay:.12s}.yh-hero__copy>:nth-child(4){animation-delay:.18s}.yh-hero__copy>:nth-child(5){animation-delay:.24s}
@keyframes yh-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.yh-hero{grid-template-columns:minmax(390px,43%) minmax(0,57%)}.yh-hero__copy{padding-inline:clamp(30px,4vw,56px)}.yh-hero__copy::before{left:clamp(30px,4vw,56px)}.yh-hero__title{font-size:clamp(3.1rem,5.1vw,4.65rem)}.yh-hero .yh-hero__model.yb-banner{transform:scale(1.12)}}
@media(max-width:860px){.yh-hero{display:block;min-height:100svh;background:var(--cream)}.yh-hero__copy{padding:72px clamp(24px,7vw,54px) 42px}.yh-hero__copy::before{top:36px;left:clamp(24px,7vw,54px);width:48px}.yh-hero__eyebrow{margin-bottom:20px}.yh-hero__title{font-size:clamp(3rem,10.5vw,5.3rem)}.yh-hero__title .is-italic{max-width:14ch}.yh-hero__lead{max-width:60ch;margin-top:25px}.yh-hero__visual{min-height:0;padding:0 0 12px}.yh-hero__visual::before{display:none}.yh-hero .yh-hero__model.yb-banner{width:100%;margin-left:0;transform:none}}
@media(max-width:520px){.yh-hero__copy{padding:58px 22px 30px}.yh-hero__copy::before{top:28px;left:22px;width:38px;height:2px}.yh-hero__eyebrow{max-width:31ch;margin-bottom:16px;font-size:.66rem}.yh-hero__title{font-size:clamp(2.65rem,12.2vw,3.75rem);line-height:.92}.yh-hero__title .is-quiet{white-space:normal}.yh-hero__lead{margin-top:20px;font-size:.96rem;line-height:1.5}.yh-hero__proof{margin-top:15px;font-size:.7rem}.yh-hero__action{margin-top:22px;padding:13px 15px 13px 17px}}
@media(prefers-reduced-motion:reduce){.yh-hero__copy>*{animation:none!important}.yh-hero__action{transition:none!important}}

/* ---- Interactive floor-plan model: hotspots, dashed leaders, labels ---- */
.yb-banner{--yb-accent:#526f6b;--yb-ink:#3d4541;--yb-muted:#7b827d;--yb-background:#fff;position:relative;display:block;width:100%;margin:0;padding:0;background:var(--yb-background);container:yb-banner / inline-size;font-family:YooanBannerManrope,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate;color:var(--yb-ink)}
.yb-banner *{box-sizing:border-box}
.yb-banner .yb-stage{position:relative;aspect-ratio:1920/1080;overflow:hidden;width:100%;margin:0;padding:0;user-select:none}
.yb-banner .yb-plane{position:relative;width:100%;aspect-ratio:1920/1080}
.yb-banner .yb-image{position:absolute;left:9.895833333%;top:0;width:80%;height:auto;max-width:none;display:block;border:0;margin:0;padding:0;pointer-events:none}
.yb-banner .yb-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.yb-banner .yb-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.yb-banner .yb-outline{fill:#526f6b0c;stroke:var(--yb-accent);stroke-width:1.7;stroke-linejoin:round;opacity:0;transition:opacity .18s;pointer-events:none}
.yb-banner .yb-highlight.is-active .yb-outline{opacity:1}
.yb-banner .yb-leader{fill:none;stroke:#555f59;stroke-width:1.8;stroke-dasharray:1 5;stroke-linecap:round;opacity:0;transition:opacity .15s;pointer-events:none}
.yb-banner .yb-leader.is-active{opacity:1}
.yb-banner .yb-trace{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.22,.7,.22,1)}
.yb-banner .yb-trace.is-active{stroke-dashoffset:0}
.yb-banner .yb-marker{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:white;font:400 11px/1 YooanBannerManrope,Arial,sans-serif;cursor:pointer;touch-action:manipulation;box-shadow:none}
.yb-banner .yb-marker span{display:grid;place-items:center;width:23px;height:23px;background:#6f8480;border:2px solid white;border-radius:50%;box-shadow:0 1px 5px #1f393533;transition:box-shadow .18s,background .18s}
.yb-banner .yb-marker.is-active span{background:var(--yb-accent);box-shadow:0 0 0 5px #526f6b1f}
.yb-banner .yb-marker:focus-visible{outline:2px solid var(--yb-accent);outline-offset:2px}
.yb-banner .yb-label{position:absolute;z-index:3;max-width:22%;width:max-content;margin:0;padding:9px 12px 10px;transform:translateY(-100%);text-align:left;background:rgba(255,255,255,.12);border:0;border-radius:4px;box-shadow:none;-webkit-backdrop-filter:blur(14px) saturate(108%);backdrop-filter:blur(14px) saturate(108%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s .08s,visibility .18s;font-size:18px;font-size:clamp(14px,1.06cqw,21px);font-weight:400;line-height:1.4;color:var(--yb-ink);letter-spacing:0;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.yb-banner .yb-label small{display:block;font-size:13px;font-size:clamp(11px,.78cqw,15px);font-weight:350;line-height:1.5;color:#59625d;letter-spacing:0;margin-top:1px}
.yb-banner .yb-label.is-active{opacity:1;visibility:visible;pointer-events:auto}
.yb-banner .yb-label.is-centered{transform:translate(-50%,-100%);text-align:center}
.yb-banner[data-compact] .yb-stage{aspect-ratio:5/4}
.yb-banner[data-compact] .yb-plane{width:124%;left:-12%;top:8px}
.yb-banner[data-compact] .yb-marker{width:30px;height:30px;font-size:9px}
.yb-banner[data-compact] .yb-marker span{width:18px;height:18px;border-width:1.5px}
.yb-banner[data-compact] .yb-label{font-size:14px;max-width:72%;text-align:center;transform:translate(-50%,-100%);padding:7px 11px 8px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px) saturate(108%);backdrop-filter:blur(12px) saturate(108%)}
.yb-banner[data-compact] .yb-label small{font-size:11px}
@media(prefers-reduced-motion:reduce){.yb-banner *{transition:none!important;animation:none!important}}


/* Source: home-hero-sequence.css */
/* Homepage cinema hero: editorial introduction, expanding film and line reveal. */
.yh-cinema{--paper:#fbf7e9;--ink:#0e1733;--orange:#f5a20e;--yh-intro-opacity:1;--yh-intro-y:0px;--yh-media-top:45vh;--yh-media-side:32px;--yh-media-bottom:32px;--yh-radius:30px;--yh-shadow-alpha:.22;--yh-video-scale:1;--yh-shade-opacity:.38;--yh-line-shift:112%;--yh-proof-opacity:0;--yh-proof-y:18px;--yh-link-y:-12px;--yh-scroll-opacity:1;--yh-line-a:112%;--yh-line-b:112%;--yh-link-opacity:0;--yh-proof-0:0;--yh-proof-1:0;--yh-proof-2:0;--yh-proof-3:0;position:relative!important;display:block!important;height:215svh;min-height:0!important;padding:0!important;overflow:visible!important;color:var(--ink);background:var(--paper)}
.yh-cinema *{box-sizing:border-box}
.yh-cinema__pin{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:var(--paper);isolation:isolate}
.yh-cinema__intro{position:absolute;z-index:1;top:0;right:0;left:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);gap:clamp(52px,7vw,138px);align-items:end;padding:clamp(112px,13vh,154px) clamp(30px,4vw,78px) 0;opacity:var(--yh-intro-opacity);transform:translateY(var(--yh-intro-y));will-change:opacity,transform}
.yh-cinema__intro-title{max-width:none!important;margin:0!important;color:var(--ink);font:420 clamp(3.7rem,6.2vw,7.4rem)/.88 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif!important;letter-spacing:-.058em}
.yh-cinema__intro-title span{display:block;white-space:nowrap}
.yh-cinema__intro-title span:last-child{color:#536079;font-weight:340}
.yh-cinema__intro-side{max-width:34rem;padding-bottom:.45rem}
.yh-cinema__intro-side p{margin:0;color:#3e4863;font:400 clamp(.96rem,1.05vw,1.2rem)/1.5 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-cinema__intro-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-top:1.5rem}
.yh-cinema__intro-side a,.yh-cinema__media-link{display:inline-flex;align-items:center;gap:1.5rem;color:inherit;font:650 .76rem/1.2 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.075em;text-decoration:none;text-transform:uppercase}
.yh-cinema__intro-side a{padding-bottom:.48rem;border-bottom:1px solid rgba(14,23,51,.34)}
.yh-cinema__intro-side .yh-cinema__quote-link{padding:.72rem 1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.yh-cinema__intro-side .yh-cinema__quote-link:hover,.yh-cinema__intro-side .yh-cinema__quote-link:focus-visible{border-color:var(--orange);background:var(--orange);color:var(--ink)}
.yh-cinema__intro-side a span,.yh-cinema__media-link span{color:var(--orange);font-size:1rem}
.yh-cinema__intro-side .yh-cinema__quote-link span{color:currentColor}
.yh-cinema__media{position:absolute;z-index:2;top:var(--yh-media-top);right:var(--yh-media-side);bottom:var(--yh-media-bottom);left:var(--yh-media-side);overflow:hidden;border-radius:var(--yh-radius);background:#10182a;box-shadow:0 34px 80px rgba(14,23,51,var(--yh-shadow-alpha));will-change:top,right,bottom,left,border-radius}
.yh-cinema__visual{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:saturate(.86) contrast(1.02)}
.yh-cinema__shade{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.12),rgba(4,8,18,.04) 30%,rgba(4,8,18,.52) 100%),linear-gradient(90deg,rgba(5,9,20,.48),transparent 62%);opacity:var(--yh-shade-opacity)}
.yh-cinema__statement{position:absolute;z-index:3;top:50%;left:clamp(32px,5vw,100px);width:min(82vw,1180px);color:var(--paper);font:540 clamp(3.6rem,7.1vw,8.5rem)/.88 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:-.058em;transform:translateY(-48%);pointer-events:none}
.yh-cinema__line{display:block;overflow:hidden;padding:.06em 0}
.yh-cinema__line i{display:block;font-style:normal;transform:translateY(var(--yh-line-shift));will-change:transform}
.yh-cinema__line:nth-child(1) i{transform:translateY(var(--yh-line-a))}
.yh-cinema__line:nth-child(2) i{transform:translateY(var(--yh-line-b))}
.yh-cinema__proof{position:absolute;z-index:4;right:clamp(22px,3vw,58px);bottom:clamp(25px,3.2vw,58px);left:clamp(22px,3vw,58px);display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:1.3rem;padding-top:1rem;border-top:1px solid rgba(251,247,233,.42);color:rgba(251,247,233,.82);font:600 clamp(.62rem,.68vw,.76rem)/1.25 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.095em;text-transform:uppercase;opacity:var(--yh-proof-opacity);transform:translateY(var(--yh-proof-y))}
.yh-cinema__proof span:first-child{color:var(--orange)}
.yh-cinema__media-link{position:absolute;z-index:4;top:clamp(24px,3vw,54px);right:clamp(22px,3vw,58px);padding:12px 15px;border:1px solid rgba(251,247,233,.48);color:var(--paper);opacity:var(--yh-link-opacity);transform:translateY(var(--yh-link-y));transition:color .2s ease,background-color .2s ease}
.yh-cinema__media-link:hover,.yh-cinema__media-link:focus-visible{color:var(--ink);background:var(--paper)}
.yh-cinema__media-link:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
/* Keep the cinema overlay anchored despite the shared pill's relative position. */
html body.home .yh-cinema__media-link{position:absolute!important}
.yh-cinema__scroll{position:absolute;z-index:4;right:clamp(22px,3vw,58px);bottom:18px;display:flex;align-items:center;gap:10px;margin:0;color:rgba(14,23,51,.62);font:600 .62rem/1 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:var(--yh-scroll-opacity)}
.yh-cinema__scroll span{display:block;width:34px;height:1px;overflow:hidden;background:rgba(14,23,51,.22)}
.yh-cinema__scroll span::after{content:"";display:block;width:100%;height:100%;background:var(--orange);animation:yh-cinema-scroll 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes yh-cinema-scroll{0%{transform:translateX(-105%)}55%,100%{transform:translateX(105%)}}
@media(max-width:900px){.yh-cinema{height:250svh}.yh-cinema__pin{min-height:560px}.yh-cinema__intro{display:block;padding-top:clamp(96px,13vh,132px)}.yh-cinema__intro-title{font-size:clamp(3.25rem,9.4vw,5.8rem)!important}.yh-cinema__intro-title span{white-space:normal}.yh-cinema__intro-side{display:block;margin-top:1.25rem}.yh-cinema__intro-side p{display:none}.yh-cinema__intro-actions{margin-top:0}.yh-cinema__statement{left:clamp(26px,5vw,48px);width:calc(100% - clamp(52px,10vw,96px));font-size:clamp(3.4rem,10.2vw,6.3rem)}}
@media(max-width:600px){.yh-cinema{height:230svh!important;padding:0!important}.yh-cinema__pin{height:100svh;min-height:540px}.yh-cinema__intro{display:block;padding:90px 22px 0}.yh-cinema__intro-title{font-size:clamp(2.8rem,12.7vw,4.2rem)!important;line-height:.92!important}.yh-cinema__intro-side{margin-top:1rem}.yh-cinema__intro-actions{gap:.55rem .8rem}.yh-cinema__intro-side a{gap:.55rem;font-size:.62rem}.yh-cinema__intro-side .yh-cinema__quote-link{padding:.62rem .78rem}.yh-cinema__statement{top:47%;left:22px;width:calc(100% - 44px);font-size:clamp(2.8rem,13.2vw,4.5rem);line-height:.9}.yh-cinema__proof{right:22px;bottom:24px;left:22px;grid-template-columns:repeat(2,1fr);row-gap:.75rem;padding-top:.75rem;font-size:.58rem}.yh-cinema__media-link{top:20px;right:20px;font-size:.61rem}.yh-cinema__scroll{display:none}}
@media(prefers-reduced-motion:reduce){.yh-cinema{height:100svh}.yh-cinema__intro{display:none}.yh-cinema__media{inset:0;border-radius:0;box-shadow:none}.yh-cinema__visual{transform:none}.yh-cinema__shade{opacity:1}.yh-cinema__line i{transform:none!important}.yh-cinema__proof,.yh-cinema__media-link{opacity:1;transform:none}.yh-cinema__scroll{display:none}}

/* Banner 02: the approved whole-home concept, integrated as the second
   scroll-led chapter without changing Banner 01. */
.yh-spatial-sequence{
  --yh2-copy-opacity:1;
  --yh2-copy-x:0px;
  --yh2-visual-opacity:1;
  --yh2-visual-x:0px;
  --yh2-visual-scale:1;
  --yh2-line-progress:1;
  position:relative;
  height:190svh;
  color:#0e1733;
  background:#fbf7e9;
}
.yh-spatial-sequence *{box-sizing:border-box}
.yh-spatial-sequence__pin{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#fbf7e9;isolation:isolate}
.yh-spatial-sequence .yh-hero{height:100%;min-height:0;background:#fbf7e9}
.yh-spatial-sequence .yh-hero__copy{opacity:var(--yh2-copy-opacity);transform:translateX(var(--yh2-copy-x));will-change:opacity,transform}
.yh-spatial-sequence .yh-hero__copy>*{animation:none!important}
.yh-spatial-sequence .yh-hero__eyebrow{color:#8c5b00}
.yh-spatial-sequence .yh-hero__title{font-size:clamp(3.35rem,4.65vw,6rem);line-height:.91}
.yh-spatial-sequence .yh-hero__title .is-quiet{margin-top:.06em;white-space:normal}
.yh-spatial-sequence .yh-hero__visual{opacity:var(--yh2-visual-opacity);transform:translateX(var(--yh2-visual-x)) scale(var(--yh2-visual-scale));transform-origin:center;will-change:opacity,transform}
.yh-spatial-sequence .yh-hero__model.yb-banner{width:108%;margin-left:-5%;transform:none}
.yh-spatial-sequence__note{position:absolute;right:clamp(20px,3vw,48px);bottom:clamp(18px,2.4vw,36px);z-index:5;margin:0;color:#5c657b;font:600 clamp(.56rem,.62vw,.7rem)/1.3 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.095em;text-transform:uppercase}
.yh-spatial-sequence__progress{position:absolute;z-index:6;right:clamp(22px,3vw,54px);bottom:clamp(22px,3vw,46px);left:clamp(22px,3vw,54px);display:none;grid-template-columns:auto minmax(70px,180px) auto;gap:12px;align-items:center;width:min(230px,35vw);margin-left:auto;color:#5c657b;font:650 .62rem/1 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.1em}
.yh-spatial-sequence__progress i{display:block;height:1px;overflow:hidden;background:rgba(14,23,51,.18)}
.yh-spatial-sequence__progress b{display:block;width:100%;height:100%;background:#f5a20e;transform:scaleX(var(--yh2-line-progress));transform-origin:left}

@media(max-width:960px) and (min-width:701px){
  .yh-spatial-sequence .yh-hero{display:grid;grid-template-columns:minmax(330px,44%) minmax(0,56%)}
  .yh-spatial-sequence .yh-hero__copy{padding:52px clamp(28px,4vw,46px)}
  .yh-spatial-sequence .yh-hero__copy::before{left:clamp(28px,4vw,46px)}
  .yh-spatial-sequence .yh-hero__title{font-size:clamp(2.9rem,5.5vw,4.1rem)}
  .yh-spatial-sequence .yh-hero__lead{font-size:.95rem}
  .yh-spatial-sequence .yh-hero__model.yb-banner{width:112%;margin-left:-8%}
}

@media(max-width:700px){
  .yh-spatial-sequence{height:175svh}
  .yh-spatial-sequence__pin{min-height:560px}
  .yh-spatial-sequence .yh-hero{display:block}
  .yh-spatial-sequence .yh-hero__copy{padding:82px 22px 18px}
  .yh-spatial-sequence .yh-hero__copy::before{top:67px;left:22px;width:38px;height:2px}
  .yh-spatial-sequence .yh-hero__eyebrow{margin-bottom:14px;font-size:.64rem}
  .yh-spatial-sequence .yh-hero__title{font-size:clamp(2.45rem,10.9vw,3.8rem);line-height:.92}
  .yh-spatial-sequence .yh-hero__lead{max-width:48ch;margin-top:17px;font-size:.9rem;line-height:1.46}
  .yh-spatial-sequence .yh-hero__proof{margin-top:12px;font-size:.64rem}
  .yh-spatial-sequence .yh-hero__action{margin-top:18px;padding:12px 14px 12px 16px;font-size:.72rem}
  .yh-spatial-sequence .yh-hero__visual{padding:0}
  .yh-spatial-sequence .yh-hero__model.yb-banner{width:100%;margin-left:0}
  .yh-spatial-sequence__note{right:18px;bottom:14px;font-size:.52rem}
}

@media(max-width:420px){
  .yh-spatial-sequence .yh-hero__copy{padding-top:78px}
  .yh-spatial-sequence .yh-hero__copy::before{top:65px}
  .yh-spatial-sequence .yh-hero__title{font-size:clamp(2.2rem,10.7vw,2.9rem)}
  .yh-spatial-sequence .yh-hero__lead{font-size:.84rem}
  .yh-spatial-sequence .yh-hero__proof{display:none}
}

@media(prefers-reduced-motion:reduce){
  .yh-spatial-sequence{height:auto;min-height:100svh}
  .yh-spatial-sequence__pin{position:relative;height:auto;min-height:100svh;overflow:visible}
  .yh-spatial-sequence .yh-hero__copy,.yh-spatial-sequence .yh-hero__visual{opacity:1;transform:none}
  .yh-spatial-sequence__progress b{transform:none}
}

/* 2026-09-29: scroll-scrubbed villa film + staggered copy reveal. */
video.yh-cinema__visual[data-yooan-hero-scrub]{filter:saturate(.94) contrast(1.02);background:#10182a}
.yh-cinema__proof span{opacity:var(--p,1);transform:translateY(calc((1 - var(--p,1)) * 14px));will-change:opacity,transform}
.yh-cinema__proof span:nth-child(1){--p:var(--yh-proof-0)}
.yh-cinema__proof span:nth-child(2){--p:var(--yh-proof-1)}
.yh-cinema__proof span:nth-child(3){--p:var(--yh-proof-2)}
.yh-cinema__proof span:nth-child(4){--p:var(--yh-proof-3)}
@media(prefers-reduced-motion:reduce){.yh-cinema__proof span{--p:1!important}.yh-cinema__media-link{opacity:1}}

/* 2026-09-29 · Intro layout per user mark-up: title fits its own column (never runs under the side copy);
   side copy is a narrow column — paragraph aligned to the title's cap line, link aligned to the title's last line. */
@media (min-width:901px){
  .yh-cinema__intro{grid-template-columns:minmax(0,1fr) clamp(240px,18.5vw,340px);gap:clamp(40px,4.2vw,84px);align-items:stretch;padding-left:clamp(36px,4.4vw,86px);padding-right:clamp(36px,4.4vw,86px)}
  .yh-cinema__intro-title{container-type:inline-size;align-self:start;min-width:0;padding-top:clamp(28px,2.2vw,58px)}
  /* Keep long headings inside their column; mobile keeps its separate scale. */
  .yh-cinema__intro-title span{max-width:100%;white-space:normal;overflow-wrap:break-word;font-size:clamp(calc(2.56rem * var(--yh-title-desktop-scale,1)),calc(4.32vw * var(--yh-title-desktop-scale,1)),calc(5.92rem * var(--yh-title-desktop-scale,1)));line-height:1}
  @supports (width:1cqi){.yh-cinema__intro-title span{font-size:min(calc(6.84cqi * var(--yh-title-desktop-scale,1)),calc(5.92rem * var(--yh-title-desktop-scale,1)))}}
  .yh-cinema__intro-side{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;max-width:none;padding:clamp(.6rem,1vw,1.2rem) 0 .2rem}
  .yh-cinema__intro-side p{max-width:30ch}
  .yh-cinema__intro-actions{margin-top:0}
  .yh-cinema__intro-side a{align-self:flex-start}
}

@media (min-width:768px) and (max-width:900px){.yh-cinema .yh-cinema__intro-title{font-size:clamp(calc(3.25rem * var(--yh-title-mobile-scale,1)),calc(9.4vw * var(--yh-title-mobile-scale,1)),calc(5.8rem * var(--yh-title-mobile-scale,1)))!important}}


/* Source: home-factory-film.css */
/* Homepage factory film — scroll-driven chapters (2026-09-19).
   Pure CSS + ~80 lines of vanilla JS; no animation library. */
.yh-film{position:relative;height:calc(var(--yh-film-count,3) * 100svh);margin-block:0;background:#0b0f1d;color:#fff}
.yh-film__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}

.yh-film__media,.yh-film__layer,.yh-film__video,.yh-film__placeholder,.yh-film__shade,.yh-film__grain{position:absolute;inset:0;width:100%;height:100%}
.yh-film *,.yh-film *::before,.yh-film *::after{box-sizing:border-box}
.yh-film__layer{margin:0;opacity:0;transition:opacity 1.2s ease-in-out}
.yh-film__layer.is-active{opacity:1;z-index:1}
.yh-film__video{object-fit:cover;display:block}
.yh-film__placeholder{display:flex;align-items:flex-start;justify-content:flex-end;padding:clamp(96px,11vh,120px) clamp(20px,3vw,40px) 0;background:
  radial-gradient(120% 90% at 78% 30%,rgba(245,162,14,.16),transparent 55%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px),
  linear-gradient(160deg,#18213b,#0b0f1d 70%)}
.yh-film__layer:nth-child(2) .yh-film__placeholder{background-position:0 0,40px 0,0 0}
.yh-film__placeholder span{max-width:min(22rem,80vw);padding:10px 14px;border:1px dashed rgba(255,255,255,.35);border-radius:10px;color:rgba(255,255,255,.7);font:600 11px/1.5 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.yh-film__placeholder small{font-size:9px;letter-spacing:.06em;opacity:.7;text-transform:none}
.yh-film__shade{z-index:2;background:linear-gradient(90deg,rgba(8,12,24,.72) 0%,rgba(8,12,24,.35) 48%,rgba(8,12,24,.1) 100%),linear-gradient(0deg,rgba(8,12,24,.55),transparent 40%)}
.yh-film__grain{z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.yh-film__copy{position:absolute;inset:0;z-index:5;display:grid;align-items:center;padding:0 clamp(20px,7vw,112px);pointer-events:none}
.yh-film__chapter{grid-area:1/1;max-width:44rem;visibility:hidden}
.yh-film__chapter.is-active{visibility:visible;pointer-events:auto}
.yh-film__eyebrow{display:flex;gap:16px;align-items:center;margin:0 0 22px;color:#f7bf54;font:600 11px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.26em;text-transform:uppercase;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .35s,transform .8s ease-out .35s}
.yh-film__eyebrow i{display:block;width:48px;height:2px;background:#f5a20e}
.yh-film__title{overflow:hidden;margin:0 0 22px;padding:.08em 0;color:#fff;font-family:var(--wp--preset--font-family--display,inherit);font-size:clamp(38px,6vw,88px);font-weight:470;line-height:.98;letter-spacing:-.035em}
.yh-film__title span{display:block;transform:translateY(105%);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1)}
.yh-film__text{max-width:30rem;margin:0;padding:20px 22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:rgba(255,255,255,.84);font-size:clamp(15px,1.15vw,17px);line-height:1.6;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .45s,transform .8s ease-out .45s}
.yh-film__action{display:inline-flex;gap:14px;align-items:center;margin-top:30px;color:#fff;font:650 11px/1 var(--wp--preset--font-family--body,inherit);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .55s,transform .8s ease-out .55s}
.yh-film__action-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:16px;letter-spacing:0;transition:color .3s,border-color .3s,background .3s}
.yh-film__action:hover .yh-film__action-icon,.yh-film__action:focus-visible .yh-film__action-icon{background:#f5a20e;border-color:#f5a20e;color:#1c1406}
.yh-film__chapter.is-active .yh-film__eyebrow,.yh-film__chapter.is-active .yh-film__text,.yh-film__chapter.is-active .yh-film__action,.yh-film__chapter.is-active .yh-film__title span{opacity:1;transform:none}

.yh-film__progress{position:absolute;left:50%;bottom:clamp(18px,3vw,32px);z-index:6;display:flex;gap:16px;align-items:center;padding:8px 8px 8px 22px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(8,12,24,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(-50%);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.yh-film__progress-text{display:grid;gap:3px;min-width:150px}
.yh-film__progress-text span{color:rgba(255,255,255,.5);font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.16em;text-transform:uppercase}
.yh-film__progress-text b{color:#fff;font-weight:600}
.yh-film__progress-text strong{color:#fff;font-size:12px;font-weight:650;white-space:nowrap}
.yh-film__ring{width:44px;height:44px;transform:rotate(-90deg)}
.yh-film__ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.yh-film__ring .yh-film__ring-bar{stroke:#f5a20e;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;transition:stroke-dashoffset .15s linear}

@media(max-width:700px){
  .yh-film__copy{align-items:end;padding-bottom:120px}
  .yh-film__shade{background:linear-gradient(0deg,rgba(8,12,24,.85) 10%,rgba(8,12,24,.25) 70%)}
  .yh-film__progress{padding-left:16px}
  .yh-film__progress-text{min-width:120px}
}
@media(prefers-reduced-motion:reduce){
  .yh-film__layer,.yh-film__eyebrow,.yh-film__title span,.yh-film__text,.yh-film__action,.yh-film__ring .yh-film__ring-bar{transition:none}
}

/* v2 (2026-09-19): layout follows the reference (left column, eyebrow rule, large title,
   bordered description panel, round action, centred progress pill) using YOOAN type tokens:
   Schibsted Grotesk (display) · Fustat (body) · Geist Mono (eyebrow/labels). */
.yh-film__copy{padding:0 clamp(20px,10.5vw,160px)}
.yh-film__chapter{max-width:min(46rem,100%)}
.yh-film__eyebrow{gap:28px;margin-bottom:clamp(28px,4vh,44px);font-size:12px;letter-spacing:.3em}
.yh-film__eyebrow i{width:clamp(56px,6vw,96px);height:3px;border-radius:2px}
.yh-film__title{margin-bottom:clamp(28px,4vh,40px);font-size:clamp(44px,6.2vw,96px);font-weight:560;line-height:.96;letter-spacing:-.045em}
.yh-film__text{max-width:36rem;padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,40px);border-color:rgba(255,255,255,.1);border-radius:24px;background:rgba(10,12,20,.55);font-family:var(--wp--preset--font-family--body,inherit);font-size:clamp(16px,1.3vw,20px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.82)}
.yh-film__actions{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;margin-top:clamp(30px,4.5vh,48px)}
.yh-film__actions .yh-film__action{margin-top:0}
.yh-film__action{gap:28px;margin-top:clamp(30px,4.5vh,48px);font-family:var(--wp--preset--font-family--body,inherit);font-size:12px;letter-spacing:.18em}
.yh-film__action-icon{width:56px;height:56px;font-size:18px}
.yh-film__secondary{color:rgba(255,255,255,.72);font:600 11px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .6s,transform .8s ease-out .6s,color .25s,border-color .25s}
.yh-film__secondary:hover,.yh-film__secondary:focus-visible{color:#f7bf54;border-color:#f5a20e}
.yh-film__chapter.is-active .yh-film__secondary{opacity:1;transform:none}

.yh-film__progress{gap:22px;padding:10px 10px 10px 30px;border-color:rgba(255,255,255,.1);background:rgba(6,8,14,.82)}
.yh-film__progress-text span{font-size:10px;letter-spacing:.14em}
.yh-film__progress-text strong{font-family:var(--wp--preset--font-family--body,inherit);font-size:14px}
.yh-film__ring-wrap{position:relative;display:grid;place-items:center;width:56px;height:56px}
.yh-film__ring{position:absolute;inset:0;width:100%;height:100%}
.yh-film__play{width:20px;height:20px;border-radius:50%;background:#fff;position:relative}
.yh-film__play::after{content:"";position:absolute;left:8px;top:6px;border-left:6px solid #0b0f1d;border-top:4px solid transparent;border-bottom:4px solid transparent}

@media(max-width:700px){
  .yh-film__copy{padding:0 20px 128px}
  .yh-film__eyebrow{gap:16px;font-size:10px}
  .yh-film__eyebrow i{width:40px}
  .yh-film__text{padding:18px 20px;border-radius:18px;font-size:15px}
  .yh-film__action-icon{width:46px;height:46px}
  .yh-film__progress{padding-left:20px}
  .yh-film__ring-wrap{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){.yh-film__secondary{transition:none}}

/* v3 (2026-09-28): framed film that grows on scroll (reference: halo-lab.com showreel).
   The film no longer fills the screen: it starts as a smaller rounded card, grows while it scrolls in,
   and settles as a card with a margin all round. --g (0→1) is written by home-factory-film.js.
   Chapter copy fades in only once the card has almost reached full size. */
.yh-film{--g:1;--yh-film-m:clamp(12px,2.8vw,44px);--yh-film-r:clamp(18px,2vw,30px);
  height:calc(var(--yh-film-count,3) * 100svh + 40svh);background:#FBF7E9}
.yh-film.is-grow .yh-film__media{inset:var(--yh-film-m);width:auto;height:auto;overflow:hidden;background:#0b0f1d;
  border-radius:calc(var(--yh-film-r) / (.5 + .5 * var(--g)));
  transform:scale(calc(.5 + .5 * var(--g)));transform-origin:50% 50%;
  box-shadow:0 50px 90px -50px rgba(14,23,51,.6);will-change:transform}
.yh-film.is-grow .yh-film__copy{inset:var(--yh-film-m)}
.yh-film.is-grow .yh-film__copy,.yh-film.is-grow .yh-film__progress{opacity:clamp(0,(var(--g) - .82) * 5.5,1);transition:opacity .2s linear}
.yh-film.is-grow .yh-film__progress{bottom:calc(var(--yh-film-m) + clamp(14px,2.4vw,26px))}
@media(max-width:700px){.yh-film{--yh-film-m:10px;--yh-film-r:18px}}
@media(prefers-reduced-motion:reduce){.yh-film{--g:1!important}.yh-film.is-grow .yh-film__media{will-change:auto}}

/* v3.1 (2026-09-28): smaller card + large rounded corners.
   clip-path (not only border-radius) so the playing <video> layers are clipped too —
   browsers often ignore overflow+radius on composited video. */
.yh-film{--yh-film-m:clamp(16px,6vw,110px);--yh-film-r:clamp(26px,3.4vw,60px)}
.yh-film.is-grow .yh-film__media{
  clip-path:inset(0 round calc(var(--yh-film-r) / (.5 + .5 * var(--g))));
  -webkit-clip-path:inset(0 round calc(var(--yh-film-r) / (.5 + .5 * var(--g))));
  box-shadow:none}
@media(max-width:700px){.yh-film{--yh-film-m:14px;--yh-film-r:24px}}


/* Source: home-heading-scale.css */
/* Owner's final reference: use the original showroom headline scale throughout. */
body.home { --yh-home-heading-size: clamp(30px, 3.1vw, 50px); }
html body.home #factory-film .yh-film__title,
html body.home #product-systems #yh-showcase-title,
html body.home #selected-projects #yh-projects-title,
html body.home #where-to-buy #yhs-title {
  font-size: var(--yh-home-heading-size) !important;
  line-height: 1.02 !important;
}
html body.home #where-to-buy #yhs-title { grid-column: 1 / -1; width: 100%; max-width: none; white-space: normal; }
@media (min-width: 961px) {
  html body.home #where-to-buy #yhs-title { white-space: nowrap; }
}
/* Only the film statement is larger: roughly two display-size steps below the hero headline. */
html body.home .yh-cinema__statement { font-size: clamp(44px, 5vw, 100px) !important; line-height: 1.02 !important; }
@media (max-width: 767px) {
  body.home { --yh-home-heading-size: clamp(22px, 6vw, 28px); }
  html body.home #factory-film .yh-film__title,
  html body.home #product-systems #yh-showcase-title,
  html body.home #selected-projects #yh-projects-title,
  html body.home #where-to-buy #yhs-title { line-height: 1.25 !important; }
  html body.home .yh-cinema__statement { font-size: clamp(24px, 6.7vw, 32px) !important; line-height: 1.15 !important; }
}


/* Source: home-performance-cards.css */
/* Homepage · verified performance cards. Real SVG artwork, no raster fallbacks. */
.ypc{
  --ypc-cream:#fbf7e9;
  --ypc-orange:#f5a20e;
  --ypc-ink:#0e1733;
  position:relative;
  box-sizing:border-box;
  margin:0!important;
  padding:clamp(92px,10vw,158px) clamp(20px,4.8vw,78px) clamp(78px,8vw,128px)!important;
  overflow:hidden;
  color:var(--ypc-cream);
  background:#081225 url(../media/performance-proof/performance-field-background.svg) center/cover no-repeat;
  isolation:isolate;
}
.ypc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,10,24,.08),rgba(4,10,24,.22) 58%,rgba(4,10,24,.58));pointer-events:none}
.ypc,.ypc *{box-sizing:border-box}
.ypc__inner{width:min(100%,1420px);margin-inline:auto}
.ypc__head{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:20px clamp(32px,7vw,108px);align-items:end;position:relative;z-index:3}
.ypc__eyebrow{grid-column:1/-1;margin:0;color:var(--ypc-orange);font-size:11px;font-weight:760;letter-spacing:.18em}
.ypc__head h2{margin:0;color:var(--ypc-cream);font-size:clamp(42px,6vw,92px);font-weight:480;line-height:.92;letter-spacing:-.058em}
.ypc__head>p:last-child{max-width:35ch;margin:0 0 .4em;color:rgba(251,247,233,.65);font-size:clamp(15px,1.15vw,18px);line-height:1.58}
.ypc__stage{position:relative;min-height:clamp(810px,73vw,1020px);margin-top:clamp(54px,7vw,96px);perspective:1500px}
.ypc-card{position:absolute;margin:0;filter:drop-shadow(0 38px 42px rgba(0,0,0,.24));animation:ypc-float 7s ease-in-out infinite alternate;animation-delay:calc(var(--ypc-index) * -1.25s);will-change:transform}
.ypc-card img{display:block;width:100%;height:auto}
.ypc-card--wind{top:3%;left:1%;width:min(58vw,760px);transform:rotate(-1.8deg)}
.ypc-card--air{top:0;right:1%;width:min(36vw,455px);transform:rotate(3.4deg)}
.ypc-card--water{right:12%;bottom:1%;width:min(42vw,565px);transform:rotate(1.8deg)}
.ypc-card--thermal{bottom:2%;left:12%;width:min(29vw,350px);transform:rotate(-3deg)}
.ypc-card::after{content:"";position:absolute;inset:6%;border-radius:40px;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 32%);mix-blend-mode:screen;pointer-events:none}
.ypc__orbit{position:absolute;border:1px solid rgba(251,247,233,.09);border-radius:50%;pointer-events:none}
.ypc__orbit--one{width:50%;aspect-ratio:1;top:23%;left:25%;transform:rotate(-12deg)}
.ypc__orbit--two{width:68%;height:36%;left:16%;bottom:14%;border-color:rgba(245,162,14,.13);transform:rotate(8deg)}
.ypc__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 44px;align-items:end;padding-top:28px;border-top:1px solid rgba(251,247,233,.18)}
.ypc__foot p{max-width:78ch;margin:0;color:rgba(251,247,233,.5);font-size:12px;line-height:1.55}
.ypc__foot a{display:inline-flex;gap:9px;align-items:center;padding-bottom:5px;border-bottom:1px solid currentColor;color:var(--ypc-cream);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap}
.ypc__foot a:hover{color:var(--ypc-orange)}
@keyframes ypc-float{to{translate:0 -13px}}
@media(max-width:900px){
  .ypc__head{grid-template-columns:1fr}.ypc__head h2 br{display:none}.ypc__head>p:last-child{max-width:52ch}
  .ypc__stage{min-height:1120px;margin-top:48px}
  .ypc-card--wind{top:0;left:-7%;width:87%}.ypc-card--air{top:29%;right:-3%;width:58%}.ypc-card--water{right:-7%;bottom:2%;width:70%}.ypc-card--thermal{bottom:12%;left:-2%;width:43%}
}
@media(max-width:560px){
  .ypc{padding-inline:14px!important}.ypc__head{padding-inline:8px}.ypc__head h2{font-size:clamp(39px,13vw,58px)}
  .ypc__stage{min-height:960px}.ypc-card--wind{left:-13%;width:108%}.ypc-card--air{top:31%;right:-10%;width:70%}.ypc-card--water{right:-15%;width:84%}.ypc-card--thermal{bottom:14%;left:-6%;width:51%}
  .ypc__foot{grid-template-columns:1fr;padding-inline:8px}.ypc__foot a{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.ypc-card{animation:none}}



/* Source: home-showcase.css */
.yh-showcase{--ys-ink:#0e1733;--ys-paper:#fbf7e9;--ys-orange:#f5a20e;box-sizing:border-box;padding:clamp(86px,10vw,156px) max(clamp(22px,5vw,72px),calc((100vw - 1420px)/2));overflow:hidden;color:var(--ys-ink);background:var(--ys-paper)}
.yh-showcase *{box-sizing:border-box}
.yh-showcase__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:24px 7vw;align-items:end;margin-bottom:clamp(38px,5vw,68px)}
.yh-showcase__eyebrow{grid-column:1/-1;margin:0;color:#59617a;font:600 10px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em}
.yh-showcase__head h2{max-width:10ch;margin:0;color:var(--ys-ink);font-size:clamp(54px,7vw,112px);font-weight:480;line-height:.88;letter-spacing:-.065em}
.yh-showcase__head>div{max-width:410px;padding-bottom:7px}
.yh-showcase__head>div p{margin:0;color:#4c5676;font-size:clamp(15px,1.2vw,18px);line-height:1.55}
.yh-showcase__head>div a{display:inline-flex;gap:42px;align-items:center;margin-top:28px;padding-bottom:7px;border-bottom:1px solid #9ca2b5;color:var(--ys-ink);font-size:12px;font-weight:650;text-decoration:none}
.yh-showcase__head>div a span{color:var(--ys-orange)}

.yh-showcase__rail{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(560px,54vw,760px);transition:grid-template-columns .6s cubic-bezier(.2,.75,.2,1),grid-template-rows .6s cubic-bezier(.2,.75,.2,1)}
.yh-showcase__panel{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:18px;background:#19223a;isolation:isolate}
.yh-showcase__panel img,.yh-showcase__shade,.yh-showcase__trigger{position:absolute;inset:0;width:100%;height:100%}
.yh-showcase__panel img{z-index:-2;object-fit:cover;filter:saturate(.78);transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .4s}
.yh-showcase__panel.is-active img{filter:saturate(.94);transform:scale(1.035)}
.yh-showcase__shade{z-index:-1;background:linear-gradient(0deg,rgba(8,15,36,.88),rgba(8,15,36,.05) 58%),linear-gradient(90deg,rgba(8,15,36,.3),transparent 55%)}
.yh-showcase__trigger{z-index:2;padding:0;border:0;background:transparent;cursor:pointer}
.yh-showcase__trigger:focus-visible{outline:2px solid var(--ys-orange);outline-offset:-4px}
.yh-showcase__number{position:absolute;top:18px;left:20px;color:#fff;font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.1em}

.yh-showcase__label{position:absolute;left:20px;right:20px;bottom:18px;z-index:3;margin:0;color:#fff;font:600 10px/1.3 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase;opacity:.85;transition:opacity .3s}
.yh-showcase__label b{display:block;margin-top:4px;color:#fff;font-size:15px;font-weight:650;letter-spacing:-.01em;text-transform:none;font-family:var(--wp--preset--font-family--body,inherit)}
.yh-showcase__panel.is-active .yh-showcase__label{opacity:0}

.yh-showcase__copy{position:absolute;z-index:3;right:clamp(20px,2.4vw,36px);bottom:clamp(20px,2.4vw,32px);left:clamp(20px,2.4vw,36px);max-width:560px;color:#fff;opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .3s .16s,transform .45s .12s}
.yh-showcase__panel.is-active .yh-showcase__copy{opacity:1;pointer-events:auto;transform:none}
.yh-showcase__copy>p{margin:0 0 12px;color:#f7bf54;font:600 9px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em}
.yh-showcase__copy h3{margin:0;color:#fff;font-size:clamp(28px,3vw,42px);font-weight:480;line-height:.95;letter-spacing:-.03em}
.yh-showcase__copy>span{display:block;max-width:42ch;margin-top:12px;color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.5}
.yh-showcase__tag{display:inline-block;margin-top:14px;padding:5px 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:rgba(255,255,255,.92);font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase}
.yh-showcase__copy a{position:relative;z-index:4;display:inline-flex;gap:22px;align-items:center;margin-top:14px;padding:10px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font-size:11px;font-weight:650;text-decoration:none}
.yh-showcase__copy a b{color:var(--ys-orange)}
.yh-showcase__note{max-width:720px;margin:18px 0 0;color:#697087;font-size:10px;line-height:1.5}

.yh-showcase__panel--cta{background:linear-gradient(135deg,#f5a20e,#c97a02)}
.yh-showcase__panel--cta .yh-showcase__number,
.yh-showcase__panel--cta .yh-showcase__label,
.yh-showcase__panel--cta .yh-showcase__copy>p,
.yh-showcase__panel--cta .yh-showcase__copy h3,
.yh-showcase__panel--cta .yh-showcase__copy>span{color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__tag{border-color:rgba(28,20,6,.45);color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__copy a{border-color:rgba(28,20,6,.45);color:#1c1406}
.yh-showcase__panel--cta .yh-showcase__copy a b{color:#1c1406}

@media(max-width:900px){
  .yh-showcase__head{grid-template-columns:1fr}
  .yh-showcase__eyebrow,.yh-showcase__head h2,.yh-showcase__head>div{grid-column:1}
  .yh-showcase__rail{display:grid;grid-template-columns:1fr!important;grid-template-rows:none!important;height:auto;gap:14px}
  .yh-showcase__panel{aspect-ratio:3/4;border-radius:14px}
  .yh-showcase__panel .yh-showcase__label{display:none}
  .yh-showcase__panel .yh-showcase__copy{opacity:1;pointer-events:auto;transform:none}
  .yh-showcase__panel .yh-showcase__copy h3{font-size:26px}
}
@media(max-width:600px){
  .yh-showcase{padding-right:16px;padding-left:16px}
  .yh-showcase__head{padding:0 6px}
  .yh-showcase__head h2{font-size:52px}
  .yh-showcase__copy h3{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.yh-showcase__rail,.yh-showcase__panel img,.yh-showcase__copy{transition:none}.yh-showcase__panel.is-active img{transform:none}}

/* 2026-09-19 · Option C: three product panels in one row + slim project-support banner */
.yh-showcase__rail:has(>.yh-showcase__panel:nth-child(3):last-child){grid-template-rows:1fr;height:clamp(420px,38vw,580px)}
.yh-showcase__support{display:grid;grid-template-columns:auto 1fr auto;gap:12px clamp(24px,4vw,64px);align-items:center;margin-top:12px;padding:clamp(20px,2.2vw,28px) clamp(20px,2.6vw,36px);border-radius:18px;background:linear-gradient(135deg,#f5a20e,#c97a02);color:#1c1406}
.yh-showcase__support-eyebrow{margin:0;font:600 9px/1.2 var(--wp--preset--font-family--spec,monospace);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.yh-showcase__support-copy h3{margin:0;color:#1c1406;font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.yh-showcase__support-copy p{margin:6px 0 0;color:rgba(28,20,6,.82);font-size:13.5px;line-height:1.45}
.yh-showcase__support-link{display:inline-flex;gap:22px;align-items:center;padding:10px 16px;border:1px solid rgba(28,20,6,.45);border-radius:999px;color:#1c1406;font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.yh-showcase__support-link:hover,.yh-showcase__support-link:focus-visible{background:#1c1406;color:#f5a20e}
@media(max-width:900px){
  .yh-showcase__rail:has(>.yh-showcase__panel:nth-child(3):last-child){height:auto}
  .yh-showcase__support{grid-template-columns:1fr;border-radius:14px}
  .yh-showcase__support-link{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.yh-showcase__support-link{transition:none}}
/* Tag pill was inheriting display:block from .yh-showcase__copy>span and stretching full width */
.yh-showcase__copy>.yh-showcase__tag{display:block;width:fit-content}

/* 2026-09-19 r2 · Removed section number, card numbers, "Products · Visual concept", tag pill and footnote.
   Collapsed cards now show only the product name. */
.yh-showcase__label b{margin-top:0}

/* ==========================================================================
   Applications · split colour block (2026-09-19 r2)
   Copy sits on a light-blue panel; the framed floor-plan model hangs past the
   panel's lower edge into the cream page. Pure CSS + a tiny IntersectionObserver
   in home-showcase.js for the entrance.
   ========================================================================== */
.yh-apps{
  --apps-blue:#D3E4F0;          /* brand light blue (panel) — tune here */
  --apps-ink:#0E1733;
  --apps-copy:#23304F;
  --apps-paper:#FBF7E9;
  --apps-overhang:clamp(48px,6vw,96px);
  --apps-gutter:max(clamp(22px,4.5vw,72px),calc((100vw - 1600px)/2));
  position:relative;box-sizing:border-box;margin:0;color:var(--apps-ink);
  background:linear-gradient(180deg,var(--apps-blue) 0,var(--apps-blue) calc(100% - var(--apps-overhang)),var(--apps-paper) calc(100% - var(--apps-overhang)))
}
.yh-apps *{box-sizing:border-box}
.yh-apps__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);min-height:clamp(580px,min(90svh,52vw),860px);padding:clamp(28px,2.4vw,44px) var(--apps-gutter) 0}
.yh-apps__copy{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:48px;padding-bottom:calc(var(--apps-overhang) + clamp(40px,5vw,96px))}
.yh-apps__title{margin:0;color:var(--apps-ink);font:680 clamp(3rem,5.6vw,6.6rem)/.9 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:-.055em}
.yh-apps__body{max-width:34rem}
.yh-apps__lead{margin:0;color:var(--apps-copy);font:400 clamp(1.05rem,1.3vw,1.3rem)/1.5 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-apps__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0}
.yh-apps__links a{color:var(--apps-ink);font:650 .74rem/1.3 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(14,23,51,.35);padding-bottom:3px;transition:border-color .2s}
.yh-apps__links a:hover,.yh-apps__links a:focus-visible{border-color:#F5A20E}
.yh-apps .yh-apps__cta{margin-top:30px}
.yh-apps__frame{position:relative;display:flex;min-width:0;align-items:center;margin:0;align-self:stretch;overflow:hidden;border-radius:18px;background:var(--apps-paper);box-shadow:0 30px 70px -40px rgba(14,23,51,.35)}
.yh-apps__frame .yb-banner{--yb-background:transparent;flex:none;width:128%;margin-left:-14%;background:transparent}

/* entrance (JS adds data-yh-apps-ready, then .is-in when 20% visible) */
.yh-apps[data-yh-apps-ready] .yh-apps__title,
.yh-apps[data-yh-apps-ready] .yh-apps__body{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.yh-apps[data-yh-apps-ready] .yh-apps__frame{clip-path:inset(12% 0 0 0 round 18px);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.yh-apps.is-in .yh-apps__title,.yh-apps.is-in .yh-apps__body{opacity:1;transform:none}
.yh-apps.is-in .yh-apps__body{transition-delay:.15s}
.yh-apps.is-in .yh-apps__frame{clip-path:inset(0 0 0 0 round 18px)}

@media(max-width:900px){
  .yh-apps{--apps-overhang:48px}
  .yh-apps__inner{grid-template-columns:1fr;gap:36px;padding-top:64px}
  .yh-apps__copy{gap:24px;padding-bottom:0}
  .yh-apps__title{font-size:clamp(2.6rem,10vw,4.4rem)}
  .yh-apps__inner{min-height:0}
  .yh-apps__frame{align-self:auto;aspect-ratio:4/3;border-radius:14px}
  .yh-apps__frame .yb-banner{width:124%;margin-left:-12%}
}
@media(max-width:600px){
  .yh-apps__inner{padding:56px 16px 0}
  .yh-apps__lead{font-size:1rem}
  .yh-apps__frame{aspect-ratio:1/1}
  .yh-apps__frame .yb-banner{width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .yh-apps[data-yh-apps-ready] .yh-apps__title,.yh-apps[data-yh-apps-ready] .yh-apps__body{opacity:1;transform:none;transition:none}
  .yh-apps[data-yh-apps-ready] .yh-apps__frame{clip-path:none;transition:none}
}

/* ==========================================================================
   Applications · pinned scroll sequence (2026-09-26)
   Scroll timeline (p = 0 → 1 over the section's extra height):
     0.00–0.12  model on a light-blue block, already enlarged, keeps zooming to centre
     0.14–0.40  the 8 hotspots reveal one by one (marker + outline + leader + label)
     0.46–0.68  model shrinks back into the left column (labels stay on)
     0.70–0.90  copy rises into the lower-right
   JS only writes CSS variables / classes; all visuals live here.
   ≤900px or reduced motion: no pin, static stacked layout.
   ========================================================================== */
.yh-apps.yh-apps--seq{
  --seq-len:320svh;
  height:var(--seq-len);
  background:var(--apps-paper);
}
.yh-apps--seq .yh-apps__pin{position:sticky;top:0;display:flex;height:100svh;align-items:center;overflow:hidden}
.yh-apps--seq .yh-apps__inner{
  width:100%;min-height:0;
  grid-template-columns:minmax(0,7fr) minmax(0,3.5fr);
  gap:clamp(28px,3.6vw,64px);align-items:end;
  padding:clamp(76px,10svh,112px) var(--apps-gutter) clamp(36px,6svh,72px)
}
.yh-apps--seq .yh-apps__media{position:relative;z-index:3;grid-column:1;grid-row:1;margin:0;min-width:0}
.yh-apps--seq .yh-apps__frame{
  --tx:0px;--ty:0px;--ts:1;
  display:block;align-self:auto;
  width:min(100%,calc((100svh - clamp(112px,16svh,184px)) * 16 / 9));
  aspect-ratio:16/9;overflow:hidden;
  border-radius:18px;
  background:var(--apps-blue);   /* 浅蓝色块：让户型模型从奶油色页面里跳出来 */
  box-shadow:0 34px 80px -46px rgba(14,23,51,.45);
  transform:translate3d(var(--tx),var(--ty),0) scale(var(--ts));
  transform-origin:50% 50%;will-change:transform;clip-path:none
}
.yh-apps--seq .yh-apps__frame .yb-banner{width:100%;margin:0}
.yh-apps--seq .yh-apps__copy{grid-column:2;grid-row:1;display:block;min-width:0;padding:0 0 6px}
.yh-apps--seq .yh-apps__title{margin:0 0 clamp(20px,2.4vw,34px);font-size:clamp(2.3rem,3.3vw,4rem);line-height:.92}
.yh-apps--seq .yh-apps__lead{font-size:clamp(.98rem,1.08vw,1.14rem)}
.yh-apps--seq .yh-apps__body{max-width:30rem}

/* copy reveal is scrubbed by --c1 / --c2 (0→1) */
.yh-apps--seq.is-seq .yh-apps__title{opacity:var(--c1,0);transform:translateY(calc((1 - var(--c1,0)) * 46px))}
.yh-apps--seq.is-seq .yh-apps__body{opacity:var(--c2,0);transform:translateY(calc((1 - var(--c2,0)) * 46px))}
.yh-apps--seq.is-seq:not(.is-copy) .yh-apps__copy{pointer-events:none}

/* labels: compact so all eight fit together */
.yh-apps--seq .yb-banner .yb-label{padding:5px 9px 6px;background:rgba(255,255,255,.78);border-radius:6px;box-shadow:0 6px 18px -12px rgba(14,23,51,.4);font-size:clamp(12px,.95cqw,17px);line-height:1.3;text-shadow:none}
.yh-apps--seq .yb-banner .yb-label small{font-size:clamp(10px,.7cqw,13px);line-height:1.35}
.yh-apps--seq .yb-banner .yb-outline{fill:rgba(255,255,255,.34)}

/* sequence mode: hotspots start hidden and are switched on one by one */
.yh-apps--seq.is-seq .yb-banner .yb-marker{opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.9,.25,1.25)}
.yh-apps--seq .yb-banner .yb-marker.is-shown{opacity:1;transform:translate(-50%,-50%)}
.yh-apps--seq .yb-banner .yb-label.is-shown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s .12s,visibility .35s .12s}
.yh-apps--seq .yb-banner .yb-leader.is-shown{opacity:1}
.yh-apps--seq .yb-banner .yb-trace.is-shown{stroke-dashoffset:0}
.yh-apps--seq .yb-banner .yb-highlight.is-shown .yb-outline{opacity:1}

@media(max-width:900px){
  .yh-apps.yh-apps--seq{height:auto;background:var(--apps-paper)}
  .yh-apps--seq .yh-apps__pin{position:relative;height:auto;overflow:visible}
  .yh-apps--seq .yh-apps__inner{grid-template-columns:1fr;padding:64px 16px 56px}
  .yh-apps--seq .yh-apps__media,.yh-apps--seq .yh-apps__copy{grid-column:1;grid-row:auto}
  .yh-apps--seq .yh-apps__frame{width:100%;transform:none;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .yh-apps.yh-apps--seq{height:auto}
  .yh-apps--seq .yh-apps__pin{position:relative;height:auto}
  .yh-apps--seq .yh-apps__frame{transform:none}
}

/* ==========================================================================
   Applications × Tested performance (2026-09-29)
   One chapter: centred heading · floor plan inside a tablet-style device frame
   (same pinned zoom → hotspots → shrink sequence) · four proof cards float in
   around the device · short line + CTA + reference note below.
   Warm-white page (flow-bg blends it into the sections above and below).
   ========================================================================== */
.yh-apps.yh-apps--proof{
  --seq-len:330svh;
  --fw:min(56vw,calc((100svh - 330px) * 16 / 9 + 28px),980px);  /* device width incl. bezel */
  --bezel:14px;
  --device:#141b2d;
  --screen:#F1ECDF;
  background:var(--apps-paper)
}
.yh-apps--proof .yh-apps__inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,2.6svh,34px);
  padding:clamp(78px,11svh,118px) var(--apps-gutter) clamp(22px,3svh,40px)
}
/* heading: small, centred, always visible */
.yh-apps--proof .yh-apps__head{position:relative;z-index:1;text-align:center}
.yh-apps__eyebrow{margin:0 0 12px;color:#B87400;font:700 .7rem/1.2 "Schibsted Grotesk Variable",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.yh-apps--proof .yh-apps__title,
.yh-apps--proof.is-seq .yh-apps__title{margin:0;font-size:clamp(2rem,3.1vw,3.4rem);line-height:1;letter-spacing:-.05em;opacity:1;transform:none}

/* stage = device + floating cards */
.yh-apps--proof .yh-apps__stage{position:relative;z-index:3;display:flex;justify-content:center;width:100%}
.yh-apps--proof .yh-apps__media{position:relative;z-index:3;display:block;width:var(--fw);margin:0}
.yh-apps--proof .yh-apps__frame{
  width:100%;aspect-ratio:auto;padding:var(--bezel);
  border-radius:30px;overflow:visible;
  background:linear-gradient(145deg,#2a3350,var(--device) 38%,#0b1020);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.14) inset,0 44px 90px -40px rgba(14,23,51,.55),0 16px 30px -18px rgba(14,23,51,.35)
}
.yh-apps__cam{position:absolute;top:50%;left:calc(var(--bezel) / 2 - 3px);width:6px;height:6px;border-radius:50%;background:#2f3a5c;box-shadow:0 0 0 1.5px #0b1020;transform:translateY(-50%)}
.yh-apps__screen{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:17px;background:radial-gradient(120% 90% at 50% 40%,#FFFDF6 0,var(--screen) 70%)}
.yh-apps--proof .yh-apps__frame .yb-banner{width:100%;margin:0}

/* proof cards */
.yh-proof{--k:1;position:absolute;z-index:4;margin:0;pointer-events:none;
  opacity:var(--k);
  transform:translate3d(calc((1 - var(--k)) * var(--dx,0px)),calc((1 - var(--k)) * 40px),0) scale(calc(.82 + .18 * var(--k))) rotate(var(--r,0deg));
  filter:drop-shadow(0 26px 30px rgba(14,23,51,.28));
  animation:yh-proof-float 6.5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.6s)}
.yh-proof img{display:block;width:100%;height:auto}
.yh-proof--wind   {--dx:120px; --r:-2.5deg;width:clamp(210px,18vw,300px);right:calc(50% + var(--fw) / 2 - 64px);top:-7%}
.yh-proof--thermal{--dx:90px;  --r:3deg;   width:clamp(118px,9.5vw,158px);right:calc(50% + var(--fw) / 2 - 10px);bottom:0;animation-duration:7.4s}
.yh-proof--air    {--dx:-100px;--r:4deg;   width:clamp(148px,12.5vw,206px);left:calc(50% + var(--fw) / 2 - 50px);top:-11%;animation-duration:5.8s}
.yh-proof--water  {--dx:-110px;--r:-2deg;  width:clamp(186px,15.5vw,258px);left:calc(50% + var(--fw) / 2 - 58px);bottom:-6%;animation-duration:7s}
@keyframes yh-proof-float{from{translate:0 0}to{translate:0 -12px}}

/* below the device: one line, CTA, reference note */
.yh-apps--proof .yh-apps__copy{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 36px;align-items:center;width:min(100%,var(--fw));padding:0}
.yh-apps--proof .yh-apps__lead{margin:0;max-width:44ch;font-size:clamp(.95rem,1.02vw,1.08rem);line-height:1.5}
.yh-apps--proof .yh-apps__cta{margin:0;justify-self:end}
.yh-apps__note{grid-column:1/-1;margin:4px 0 0;padding-top:12px;border-top:1px solid rgba(14,23,51,.12);color:rgba(14,23,51,.52);font:400 .72rem/1.5 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-apps__note a{color:var(--apps-ink);font-weight:650;text-decoration:none;border-bottom:1px solid rgba(14,23,51,.3);white-space:nowrap}
.yh-apps__note a:hover{border-color:#F5A20E}
.yh-apps--proof.is-seq .yh-apps__copy{opacity:var(--c2,0);transform:translateY(calc((1 - var(--c2,0)) * 24px))}
.yh-apps--proof.is-seq:not(.is-copy) .yh-apps__copy{pointer-events:none}
.yh-apps--proof.is-seq .yh-apps__body{opacity:1;transform:none}

/* hotspot labels sit on a light screen now */
.yh-apps--proof .yb-banner .yb-label{background:rgba(255,255,255,.9)}

/* tablet / phone: no pin — heading, device, 2×2 cards, copy */
@media(max-width:900px){
  .yh-apps.yh-apps--proof{--fw:100%;--bezel:9px}
  .yh-apps--proof .yh-apps__inner{padding:64px 16px 56px;gap:28px}
  .yh-apps--proof .yh-apps__stage{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:center;justify-items:center}
  .yh-apps--proof .yh-apps__media{grid-column:1/-1;width:100%;margin-bottom:6px}
  .yh-apps--proof .yh-apps__frame{border-radius:20px}
  .yh-apps__screen{border-radius:12px}
  .yh-proof{position:relative;inset:auto!important;width:min(100%,240px)!important;--k:1!important}
  .yh-apps--proof .yh-apps__copy{grid-template-columns:1fr;width:100%}
  .yh-apps--proof .yh-apps__cta{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .yh-proof{animation:none;--k:1!important}
  .yh-apps--proof .yh-apps__copy{opacity:1!important;transform:none!important}
}

/* ---------- 2026-09-29 r2 · deep-navy stage + dot field, tidier copy, cards clear the labels ---------- */
.yh-apps.yh-apps--proof{
  --apps-navy:#0E1733;
  background:var(--apps-navy);            /* flow-bg reads this colour and blends cream ↔ navy above / navy ↔ cream below */
  color:#FBF7E9;
  --device:#1d2745;
  --screen:#F4EFE2
}
.yh-apps--proof .yh-apps__pin{isolation:isolate}
/* brand-navy glow + slowly drifting dot field (pure CSS) */
.yh-apps--proof .yh-apps__pin::before,
.yh-apps--proof .yh-apps__pin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.yh-apps--proof .yh-apps__pin::before{
  background:
    radial-gradient(60% 55% at 50% 52%,rgba(58,86,160,.55),transparent 70%),
    radial-gradient(40% 40% at 12% 88%,rgba(245,162,14,.10),transparent 70%),
    radial-gradient(45% 45% at 90% 10%,rgba(74,110,190,.28),transparent 70%)}
.yh-apps--proof .yh-apps__pin::after{
  inset:-20%;
  background-image:radial-gradient(circle,rgba(251,247,233,.38) 1px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(38% 30% at 30% 30%,#000,transparent 70%),radial-gradient(34% 28% at 72% 70%,#000,transparent 70%);
          mask-image:radial-gradient(38% 30% at 30% 30%,#000,transparent 70%),radial-gradient(34% 28% at 72% 70%,#000,transparent 70%);
  opacity:.55;animation:yh-dots-drift 26s ease-in-out infinite alternate}
@keyframes yh-dots-drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}

.yh-apps--proof .yh-apps__title,.yh-apps--proof.is-seq .yh-apps__title{color:#FBF7E9}
.yh-apps--proof .yh-apps__eyebrow{color:#F5A20E}
/* device reads as a lit object on the dark stage */
.yh-apps--proof .yh-apps__frame{
  background:linear-gradient(145deg,#3a4568,#1d2745 40%,#121a31);
  box-shadow:0 0 0 1px rgba(251,247,233,.12) inset,0 1px 0 rgba(255,255,255,.2) inset,0 0 0 1px rgba(0,0,0,.35),0 50px 110px -40px rgba(0,0,0,.7),0 0 80px -20px rgba(90,125,210,.35)}
.yh-apps--proof .yh-apps__cam{background:#4a567c;box-shadow:0 0 0 1.5px #121a31}
/* cards: only kiss the bezel, never the screen (hotspot labels sit on the screen edges) */
.yh-apps--proof .yh-proof{filter:drop-shadow(0 22px 26px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(251,247,233,.25))}
.yh-apps--proof .yh-proof--wind   {right:calc(50% + var(--fw) / 2 - 14px);top:-9%}
.yh-apps--proof .yh-proof--thermal{right:calc(50% + var(--fw) / 2 - 10px);bottom:2%}
.yh-apps--proof .yh-proof--air    {left:calc(50% + var(--fw) / 2 - 14px);top:-12%}
.yh-apps--proof .yh-proof--water  {left:calc(50% + var(--fw) / 2 - 14px);bottom:-4%}

/* below the device: CTA + one short reference line, centred */
.yh-apps--proof .yh-apps__copy{display:flex;flex-direction:column;align-items:center;gap:12px;width:auto;text-align:center}
.yh-apps--proof .yh-apps__cta{--cta-ink:#FBF7E9;--cta-paper:#0E1733;justify-self:auto}
.yh-apps--proof .yh-apps__note{margin:0;padding:0;border:0;color:rgba(251,247,233,.55);font-size:.72rem}
.yh-apps--proof .yh-apps__note a{color:#FBF7E9;border-color:rgba(251,247,233,.4)}
.yh-apps--proof .yh-apps__note a:hover{border-color:#F5A20E}
.yh-apps--proof .yb-banner .yb-label{background:rgba(255,255,255,.94)}
@media(max-width:900px){
  .yh-apps--proof .yh-apps__copy{align-items:flex-start;text-align:left}
}
@media(prefers-reduced-motion:reduce){.yh-apps--proof .yh-apps__pin::after{animation:none}}
/* fade bands around the navy stage: cream → navy above, navy → warm cream below (2026-09-29 r2) */
.yh-fade{display:block;height:clamp(160px,32svh,320px);margin-block:0!important;pointer-events:none}
.yh-fade--to-navy{background:linear-gradient(180deg,#FBF7E9 0%,#d9d6d0 22%,#6d7896 52%,#26325a 80%,#0E1733 100%)}
.yh-fade--to-cream{background:linear-gradient(180deg,#0E1733 0%,#26325a 20%,#6d7896 48%,#d9d6d0 78%,#FBF7E9 100%)}
.yh-apps--proof .yh-apps__pin{overflow:hidden}


/* Source: home-showcase-carousel.css */
/* ==================================================================
 * YOOAN 首页 · 01 PRODUCT SYSTEMS
 * 「居中 tab 胶囊 + 大圆角卡片横向切换」轮播（对标参考视频）
 *  + 02 SYSTEM COMPONENTS 品牌段的文字排版对齐
 *
 * 纯 CSS + 原生 JS（transform 位移），无动画库。
 * 配套脚本：assets/js/home-showcase-carousel.js
 * ================================================================== */

.yh-showcase--carousel {
    /* 一处改全站对齐：与页面其它板块共用的左右留白 */
    --yh-gutter: max(clamp(22px, 5vw, 72px), calc((100vw - 1420px) / 2));

    /* 轮播三个可调参数 */
    --yhc-w: min(72vw, 1120px);          /* 当前卡片宽度（左右邻居露出多少由它决定） */
    --yhc-gap: clamp(16px, 2.2vw, 34px); /* 卡片间距 */
    --yhc-radius: clamp(26px, 3.6vw, 58px); /* 大圆角，想收敛就改这一个值 */

    padding-top: clamp(56px, 6.4vw, 104px);
    padding-right: var(--yh-gutter);
    padding-bottom: clamp(56px, 6.4vw, 104px);
    padding-left: var(--yh-gutter);
    overflow: hidden;
}

/* 标题层级：首页 H1 是 89px，板块标题必须明显小于它。
   这里定为第一档 66px；卡内标题 38px，比例 1.7 倍，读起来不打架。 */
.yh-showcase--carousel .yh-showcase__head {
    align-items: start;
    margin-bottom: clamp(26px, 3vw, 42px);
}

/* 右栏与标题顶端对齐，不再吊在底部 */
.yh-showcase--carousel .yh-showcase__head > div {
    padding-top: 6px;
    padding-bottom: 0;
}

.yh-showcase--carousel .yh-showcase__head h2 {
    max-width: 13ch;
    font-size: clamp(38px, 4.4vw, 66px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

/* ---------- tab 胶囊行 ---------- */

.yhc__tabs {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: clamp(24px, 3vw, 44px);
}

/* 跟随当前 tab 滑动的实心胶囊 */
.yhc__pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    background: var(--ys-ink, #0e1733);
    opacity: 0;
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        width .55s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
    pointer-events: none;
}

.yhc.is-ready .yhc__pill { opacity: 1; }

.yhc__tab {
    position: relative;
    z-index: 1;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6a7190;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: clamp(13.5px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: color .35s ease;
}

.yhc__tab:hover { color: var(--ys-ink, #0e1733); }

.yhc__tab.is-active { color: var(--ys-paper, #fbf7e9); }

/* 脚本未接管时（无 JS）退回实心底，保证当前项仍可辨认 */
.yhc:not(.is-ready) .yhc__tab.is-active {
    background: var(--ys-ink, #0e1733);
}

.yhc__tab:focus-visible {
    outline: 2px solid var(--ys-orange, #f5a20e);
    outline-offset: 3px;
}

/* ---------- 轨道与卡片 ---------- */

.yhc__viewport {
    /* 撑出板块的左右留白，让邻居卡片在视口边缘被裁切 */
    margin-right: calc(-1 * var(--yh-gutter));
    margin-left: calc(-1 * var(--yh-gutter));
    overflow: hidden;
}

.yhc__track {
    display: flex;
    gap: var(--yhc-gap);
    will-change: transform;
}

.yhc.is-ready .yhc__track {
    transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}

.yhc__slide {
    position: relative;
    flex: 0 0 var(--yhc-w);
    width: var(--yhc-w);
    aspect-ratio: 1.85;
    max-height: min(64vh, 580px);
    overflow: hidden;
    border-radius: var(--yhc-radius);
    background: #19223a;
    isolation: isolate;
}

.yhc__slide img,
.yhc__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.yhc__slide img {
    z-index: -2;
    object-fit: cover;
    filter: saturate(.76) brightness(.84);
    transition: filter .8s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.yhc__slide.is-active img {
    filter: saturate(.92) brightness(.93);
}

.yhc__scrim {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 15, 36, .88) 0%, rgba(8, 15, 36, .68) 26%, rgba(8, 15, 36, .28) 56%, rgba(8, 15, 36, .10) 76%, rgba(8, 15, 36, .34) 100%);
}

/* 非当前卡整体可点，点一下滑过去 */
.yhc__slide:not(.is-active) { cursor: pointer; }

/* ---------- 卡内文字：左对齐、垂直居中 ---------- */

.yhc__copy {
    position: absolute;
    top: 50%;
    left: clamp(28px, 4vw, 64px);
    z-index: 2;
    width: min(46ch, 62%);
    color: #fff;
    transform: translateY(-50%);
}

.yhc__copy h3 {
    margin: 0;
    color: #fff;
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(21px, 2.15vw, 31px);
    font-weight: 480;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.yhc__copy p {
    max-width: 38ch;
    margin: clamp(14px, 1.5vw, 20px) 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(14px, 1.2vw, 17.5px);
    line-height: 1.58;
}

.yhc__copy .yhc__link {
    --cta-ink: #FBF7E9;
    margin-top: clamp(18px, 2vw, 28px);
}

/* 邻居卡的文字压暗，视觉重量集中在当前卡 */
.yhc__slide:not(.is-active) .yhc__copy {
    opacity: .62;
    transition: opacity .6s ease;
}

.yhc__slide.is-active .yhc__copy {
    opacity: 1;
    transition: opacity .6s ease;
}

/* ---------- 下方留资行：细线 + 右侧实心按钮 ---------- */

.yh-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px clamp(28px, 5vw, 96px);
    align-items: center;
    margin-top: clamp(22px, 2.4vw, 36px);
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid #d9d2b8;
}

.yh-support__eyebrow {
    margin: 0;
    color: #7b6b3a;
    font: 600 10px/1.2 var(--wp--preset--font-family--spec, monospace);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.yh-support__text {
    max-width: 66ch;
    margin: 10px 0 0;
    color: #4c5676;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.55;
}

.yh-support__text strong {
    color: var(--ys-ink, #0e1733);
    font-weight: 500;
}

.yh-support__cta { white-space: nowrap; }

/* ==================================================================
   02 SYSTEM COMPONENTS · 品牌段文字排版与产品段对齐
   左边缘、眉标、正文字号、两栏节奏统一；logo 滚动带保持不变。
   标题级别刻意比产品段小一档 —— 它是支撑性板块，不该和主板块一样响。
   ================================================================== */

.yooan-partners {
    --yh-gutter: max(clamp(22px, 5vw, 72px), calc((100vw - 1420px) / 2));
}

/* ------------------------------------------------------------------
   品牌段改为「小标签 + 大 logo 条」：这一段的主角是 logo，不是标题。
   文字全部退成说明性的小字并居中，把面积让给 logo。
   （.alignfull / 两层类是为了压过后加载的 brand-refinements.css）
   ------------------------------------------------------------------ */

.yooan-partners.alignfull {
    --yooan-partner-gap: clamp(34px, 4.2vw, 70px);

    padding-top: clamp(34px, 3.8vw, 58px);
    padding-bottom: clamp(34px, 3.8vw, 58px);
}

.yooan-partners .yooan-partners__heading {
    display: block;
    width: auto;
    margin: 0 0 clamp(22px, 2.6vw, 36px);
    padding-right: var(--yh-gutter);
    padding-left: var(--yh-gutter);
    text-align: center;
}

/* 只保留主标题一行：居中、收小，把面积全部让给 logo */
.yooan-partners .yooan-partners__heading h2 {
    max-width: none;
    margin: 0 auto;
    color: var(--yb-ink, #0e1733);
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
}

/* logo 条：从无限横滚改成一排等距静态排列。
   横滚会让 logo 永远不在固定位置 —— 既难辨认，也没法截图，
   而这一段的全部价值就在于"一眼认出几个熟悉的名字"。 */
.yooan-partners .yooan-partners__marquee {
    padding: 6px var(--yh-gutter);
    mask-image: none;
    -webkit-mask-image: none;
}

.yooan-partners .yooan-partners__track {
    display: block;
    width: auto;
    animation: none;
}

/* PHP 里为了滚动复制了第二组，静态排列下隐藏它（它本就是 aria-hidden） */
.yooan-partners .yooan-partners__group[aria-hidden="true"] {
    display: none;
}

.yooan-partners .yooan-partners__group {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(14px, 2.2vw, 40px);
    padding: 0;
}

.yooan-partners .yooan-partners__group li {
    flex: 1 1 0;
    min-width: 0;
    height: 70px;
}

.yooan-partners .yooan-partners__group img {
    height: 56px;
    opacity: .8;
}

.yooan-partners .yooan-partners__note {
    width: auto;
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    padding-right: var(--yh-gutter);
    padding-left: var(--yh-gutter);
    color: #767d94;
    font-size: 11.5px;
    text-align: center;
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
    .yh-showcase--carousel {
        --yhc-w: 86vw;
        --yhc-radius: clamp(20px, 5vw, 32px);
    }

    .yhc__tabs {
        margin-right: calc(-1 * var(--yh-gutter));
        margin-left: calc(-1 * var(--yh-gutter));
        padding-right: var(--yh-gutter);
        padding-left: var(--yh-gutter);
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .yhc__tabs::-webkit-scrollbar { display: none; }

    .yhc__tab {
        padding: 10px 16px;
        white-space: nowrap;
    }

    .yhc__slide {
        aspect-ratio: 3 / 4;
        max-height: none;
    }

    .yhc__copy {
        top: auto;
        right: clamp(20px, 5vw, 32px);
        bottom: clamp(24px, 5vw, 36px);
        left: clamp(20px, 5vw, 32px);
        width: auto;
        transform: none;
    }

    .yhc__scrim {
        background: linear-gradient(0deg, rgba(8, 15, 36, .88) 0%, rgba(8, 15, 36, .34) 52%, rgba(8, 15, 36, .12) 100%);
    }

    .yh-support {
        grid-template-columns: 1fr;
    }

    .yh-support__cta { justify-self: start; }

    .yooan-partners .yooan-partners__heading h2 { max-width: none; }

    /* 窄屏放不下 10 个 logo：改成可横向滑动的一排，取消等分 */
    .yooan-partners .yooan-partners__marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .yooan-partners .yooan-partners__marquee::-webkit-scrollbar { display: none; }

    .yooan-partners .yooan-partners__group {
        width: max-content;
        justify-content: flex-start;
        gap: 30px;
    }

    .yooan-partners .yooan-partners__group li {
        flex: 0 0 104px;
        height: 62px;
    }

    .yooan-partners .yooan-partners__group img { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .yhc.is-ready .yhc__track,
    .yhc__pill,
    .yhc__slide img,
    .yhc__copy {
        transition-duration: .01ms;
    }
}

/* ==================================================================
   02 SYSTEM COMPONENTS · Logo 网格交互（2026-09-26）
   参考：细线网格 + 交叉点"+"号 + 悬停格子描边与柔光，离开后光晕慢慢褪去。
   纯 CSS 实现；光晕跟随鼠标位置由 home-showcase-carousel.js 里 10 行 JS 写入 --mx/--my。
   占位与原静态 logo 条基本一致（1440 宽约 +10px）。
   ================================================================== */

.yooan-partners--grid {
    --yp-line: rgba(14, 23, 51, .1);
    --yp-cross: rgba(14, 23, 51, .34);
    --yp-accent: rgba(245, 162, 14, .72);
    --yp-glow: rgba(245, 162, 14, .2);
    --yp-cell-h: clamp(78px, 6.6vw, 96px);
    --yp-extend: clamp(18px, 2vw, 30px);
}

/* 容器：去掉旧的裁切，让竖线能向上下延伸出去 */
.yooan-partners--grid .yooan-partners__marquee {
    position: relative;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

/* 两条横线：贯穿整个屏宽，两端淡出 */
.yooan-partners--grid .yooan-partners__marquee::before,
.yooan-partners--grid .yooan-partners__marquee::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__marquee::before { top: 0; }
.yooan-partners--grid .yooan-partners__marquee::after { bottom: 0; }

.yooan-partners--grid .yooan-partners__group {
    position: relative;
    gap: 0;
}

/* 最右一条竖线 */
.yooan-partners--grid .yooan-partners__group::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--yp-extend));
    right: 0;
    bottom: calc(-1 * var(--yp-extend));
    width: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
}

/* 单元格 */
.yooan-partners--grid .yooan-partners__group li {
    position: relative;
    height: var(--yp-cell-h);
    padding: 0 clamp(10px, 1.2vw, 20px);
    transform: none;
    transition: none;
}

.yooan-partners--grid .yooan-partners__group li:hover { transform: none; }

/* 每格左侧竖线：上下各延伸一截并淡出 */
.yooan-partners--grid .yooan-partners__group li::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--yp-extend));
    bottom: calc(-1 * var(--yp-extend));
    left: 0;
    width: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    pointer-events: none;
}

/* 交叉点"+"号：奇数格放在左上角，偶数格放在左下角，错落不死板 */
.yooan-partners--grid .yooan-partners__group li::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -5px;
    left: -5px;
    width: 11px;
    height: 11px;
    background:
        linear-gradient(var(--yp-cross), var(--yp-cross)) center / 11px 1px no-repeat,
        linear-gradient(var(--yp-cross), var(--yp-cross)) center / 1px 11px no-repeat;
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__group li:nth-child(even)::after {
    top: auto;
    bottom: -6px;
}

/* 悬停层：琥珀色描边 + 跟随鼠标的柔光。
   进入快（.18s），离开慢（.9s）——鼠标划过时会留下一道渐隐的"拖尾"。 */
.yooan-partners--grid .yooan-partners__cell-fx {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 0;
    border: 1px solid var(--yp-accent);
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 60%), var(--yp-glow) 0%, rgba(245, 162, 14, .06) 45%, rgba(245, 162, 14, 0) 72%);
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__group li:hover .yooan-partners__cell-fx {
    opacity: 1;
    transition-duration: .18s;
}

.yooan-partners--grid .yooan-partners__group img {
    position: relative;
    z-index: 1;
    height: 50px;
    opacity: .78;
    transition: filter .35s ease, opacity .35s ease;
}

.yooan-partners--grid .yooan-partners__group li:hover img {
    filter: none;
    opacity: 1;
    transition-duration: .15s;
}

.yooan-partners--grid .yooan-partners__note {
    margin-top: clamp(18px, 2vw, 26px);
}

@media (max-width: 900px) {
    .yooan-partners--grid {
        --yp-cell-h: 76px;
        --yp-extend: 0px;
    }

    /* 窄屏继续横向滑动；滑动容器会裁掉上下延伸，所以竖线不再延伸 */
    .yooan-partners--grid .yooan-partners__marquee {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .yooan-partners--grid .yooan-partners__marquee::before,
    .yooan-partners--grid .yooan-partners__marquee::after {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .yooan-partners--grid .yooan-partners__group { gap: 0; }

    .yooan-partners--grid .yooan-partners__group li {
        flex: 0 0 116px;
        height: var(--yp-cell-h);
    }

    .yooan-partners--grid .yooan-partners__group img { height: 44px; }

    /* 窄屏"+"号会被裁掉一半，干脆不画 */
    .yooan-partners--grid .yooan-partners__group li::after { display: none; }
}

@media (hover: none) {
    .yooan-partners--grid .yooan-partners__group img { filter: none; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .yooan-partners--grid .yooan-partners__cell-fx,
    .yooan-partners--grid .yooan-partners__group img { transition: none; }
}


/* Source: home-showrooms.css */
/* ==========================================================================
   Homepage · Where to buy (2026-09-29). Prefix .yhs-
   Replaces the HEAT / RAIN / WIND story. Section pins while the heading lights up word by word
   and the showroom cards fly in from tilted, scattered positions into a 2 × 2 grid.
   JS writes --p (heading progress) on the section and --t (0–1) on each card.
   Card look below is copied 1:1 from where-to-buy.css ("Showroom cards v2") so both pages match.
   ========================================================================== */
@font-face{font-family:YAFustat;src:url(../fonts/fustat-latin-wght-normal.woff2) format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:YASchibsted;src:url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

.yhs { --ya-cream:#FBF7E9; --ya-orange:#F5A20E; --ya-ink:#0E1733; --ya-body:#323D5D; --ya-muted:#66708D; --ya-line:#D9D2B8;
  --ywb-ink:#0E1733; --ywb-orange:#F5A20E; --ywb-line:#D9D2B8;
  position: relative; box-sizing: border-box; margin-block: 0 !important; padding: 0 !important; color: var(--ya-ink); font-family: YAFustat, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.yhs *, .yhs *::before, .yhs *::after { box-sizing: border-box; }
.yhs h2, .yhs h3, .yhs p { margin: 0; }
.yhs h2, .yhs h3 { font-family: YASchibsted, YAFustat, Arial, sans-serif; font-weight: 500; letter-spacing: -.055em; }
.yhs a { text-decoration: none; }
.yhs p { line-height: 1.55; }

/* Pinned stage ------------------------------------------------------------- */
.yhs__scroll { position: relative; height: 230svh; }
.yhs__sticky { position: sticky; top: 0; height: 100svh; min-height: 700px; display: grid; grid-template-rows: auto 1fr; align-content: center; gap: clamp(26px, 4vh, 48px);
  padding: calc(88px + 2vh) clamp(24px, 5.5vw, 88px) 5vh; overflow: hidden; perspective: 1600px; }

.yhs__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 40px; max-width: 1240px; width: 100%; margin-inline: auto; }
.yhs__eyebrow { grid-column: 1 / -1; color: #7B6B3A; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.yhs__title { max-width: 22ch; font-size: clamp(34px, 3.7vw, 60px); line-height: 1; }
/* 2026-10-14: opacity + rise are written by JS straight onto each word (no blur filter, no custom property) */
.yhs__w { display: inline-block; }
.yhs__all { justify-self: start; display: inline-flex; gap: 8px; padding: 8px 0 5px; border-bottom: 1px solid currentColor; color: var(--ya-ink); font-size: 13px; font-weight: 650; white-space: nowrap; }
.yhs__all:hover { color: #7B6B3A; }

.yhs__grid { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; transform-style: preserve-3d; }

/* fly-in: --t 0 = scattered & tilted, 1 = in place (JS). Default 1 so no-JS shows the grid. */
.yhs__card { --t: 1; --u: calc(1 - var(--t));
  transform: translate3d(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)), calc(var(--u) * -260px))
             rotateX(calc(var(--rx) * var(--u))) rotateY(calc(var(--ry) * var(--u))) rotateZ(calc(var(--rz) * var(--u)));
  opacity: clamp(0, calc(var(--t) * 2.2), 1); contain: layout paint; }
.yhs .yhs__card { transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, border-color .5s; }
.yhs .yhs__card.is-active { translate: 0 -4px; }

/* ---------- Showroom card (copied from where-to-buy.css) ---------- */
.ywb-room__no { color: var(--ywb-orange); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.ywb-room h3 { margin-top: 10px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
.ywb-room h3 span { color: var(--ya-muted); font-size: .55em; letter-spacing: -.02em; }
.ywb-room address { margin-top: 12px; color: var(--ya-body); font-size: 15px; font-style: normal; line-height: 1.55; max-width: 46ch; }
.ywb-room__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 22px; }
.ywb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid var(--ywb-ink); border-radius: 999px; background: transparent; color: var(--ywb-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.ywb-btn:hover { transform: translateY(-2px); background: var(--ywb-ink); color: var(--ya-cream); }
.ywb-btn--solid { border-color: var(--ywb-orange); background: var(--ywb-orange); }
.ywb-btn--solid:hover { background: #F6AE31; color: var(--ywb-ink); }

.ywb-room { --px: .6; --py: .8; --lift: 0; position: relative; isolation: isolate; overflow: hidden; min-height: clamp(240px, 30svh, 330px); display: flex; flex-direction: column; padding: 30px 30px 26px; border: 1px solid rgba(14, 23, 51, .08); border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 48px -36px rgba(14, 23, 51, .35); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, border-color .5s; }
.ywb-room > :not(.ywb-room__fx) { position: relative; z-index: 1; }
.ywb-room.is-active { --lift: 1; border-color: rgba(245, 162, 14, .45); box-shadow: 0 30px 60px -34px rgba(14, 23, 51, .45); }

.ywb-room__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: radial-gradient(120% 70% at 55% 105%, rgba(245, 162, 14, .55), rgba(255, 215, 106, .25) 55%, transparent 80%); }
.ywb-room__fx i { position: absolute; border-radius: 50%; opacity: .9; will-change: transform; animation: yhs-drift 14s ease-in-out infinite alternate; animation-play-state: paused; }
.ywb-room__fx i:nth-child(1) { width: 80%; height: 80%; left: 34%; bottom: -24%; background: radial-gradient(circle, #F5A20E 0%, rgba(245, 162, 14, .55) 45%, transparent 70%); --fx: -8%; --fy: -6%; }
.ywb-room__fx i:nth-child(2) { width: 62%; height: 70%; left: 4%; bottom: -14%; background: radial-gradient(circle, #FFD76A 0%, rgba(255, 215, 106, .5) 45%, transparent 70%); --fx: 10%; --fy: -8%; animation-duration: 17s; animation-delay: -4s; }
.ywb-room__fx i:nth-child(3) { width: 48%; height: 56%; left: -10%; bottom: -22%; background: radial-gradient(circle, #8EC9D8 0%, rgba(142, 201, 216, .45) 45%, transparent 70%); --fx: 12%; --fy: -4%; animation-duration: 19s; animation-delay: -9s; }
.ywb-room__fx i:nth-child(4) { width: 46%; height: 50%; left: 62%; bottom: 8%; background: radial-gradient(circle, #F7B38A 0%, rgba(247, 179, 138, .45) 45%, transparent 70%); --fx: -10%; --fy: 6%; animation-duration: 16s; animation-delay: -6s; }
.ywb-room:nth-child(2) .ywb-room__fx i:nth-child(1) { left: 8%; }
.ywb-room:nth-child(2) .ywb-room__fx i:nth-child(2) { left: 48%; }
.ywb-room:nth-child(3) .ywb-room__fx i:nth-child(3) { left: 58%; bottom: -14%; }
.ywb-room:nth-child(3) .ywb-room__fx i:nth-child(4) { left: 4%; }
@keyframes yhs-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--fx), var(--fy)) scale(1.12); } }
.ywb-room__fx::before { content: ""; position: absolute; left: 0; top: 0; width: 72%; height: 66%; background: radial-gradient(closest-side, rgba(255, 190, 70, .55), transparent 100%); transform: translate3d(calc(var(--px) * 138.9% - 50%), calc(var(--py) * 151.5% - 50%), 0); transition: transform .25s ease-out; will-change: transform; }
.ywb-room__rays { position: absolute; inset: -40% -30% -10%; opacity: .75;
  background: repeating-conic-gradient(from 270deg at 50% 118%, rgba(255, 255, 255, .62) 0deg .2deg, transparent .2deg 2.1deg);
  -webkit-mask-image: radial-gradient(120% 95% at 50% 112%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 95% at 50% 112%, #000 35%, transparent 78%);
  transition: opacity .6s, transform .4s ease-out; transform: translate3d(calc((var(--px) - .5) * 14%), 0, 0); will-change: transform; }
.ywb-room.is-active .ywb-room__rays { opacity: 1; }
.ywb-room .ywb-btn:not(.ywb-btn--solid) { background: rgba(255, 255, 255, .86); border-color: rgba(14, 23, 51, .55); color: var(--ywb-ink); }
.ywb-room .ywb-btn:not(.ywb-btn--solid):hover { background: var(--ywb-ink); color: #FBF7E9; }
.ywb-room .ywb-btn--solid { box-shadow: 0 8px 20px -10px rgba(180, 100, 0, .7); }

.ywb-room--factory { background: var(--ywb-ink); border-color: rgba(255, 255, 255, .06); color: var(--ya-cream); }
.ywb-room--factory h3 { color: var(--ya-cream); }
.ywb-room--factory h3 span { color: rgba(251, 247, 233, .65); }
.ywb-room--factory address { color: rgba(251, 247, 233, .85); }
.ywb-room--factory.is-active, .ywb-room--factory:hover { border-color: rgba(245, 162, 14, .4); }
.ywb-room--factory .ywb-room__fx i { opacity: .7; }
.ywb-room--factory .ywb-room__fx i:nth-child(2) { background: radial-gradient(circle, #C97A0A 0%, rgba(201, 122, 10, .45) 45%, transparent 70%); }
.ywb-room--factory .ywb-room__fx i:nth-child(3) { background: radial-gradient(circle, #3D5A8C 0%, rgba(61, 90, 140, .45) 45%, transparent 70%); }
.ywb-room--factory .ywb-room__rays { opacity: .16; }
.ywb-room--factory .ywb-room__fx { background: radial-gradient(120% 70% at 55% 110%, rgba(245, 162, 14, .35), transparent 70%); }
.ywb-room--factory .ywb-room__fx::before { background: radial-gradient(closest-side, rgba(245, 162, 14, .45), transparent 100%); }

/* Short / narrow screens: no pinning, cards simply rise in as they enter (JS adds .is-static) -- */
.yhs.is-static .yhs__scroll { height: auto; }
.yhs.is-static .yhs__sticky { position: relative; height: auto; min-height: 0; padding-block: clamp(76px, 10vw, 130px); overflow: visible; perspective: none; }
.yhs.is-static .yhs__w { --o: 1; }
.yhs.is-static .yhs__card { transform: translateY(calc(var(--u) * 40px)); opacity: var(--t); transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .8s, translate .5s, box-shadow .5s, border-color .5s; }
.yhs.is-static .yhs__card:nth-child(even) { transition-delay: .12s; }
@media (max-width: 900px) {
  .yhs__head { grid-template-columns: 1fr; }
  .yhs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ywb-room { min-height: 300px; padding: 24px 20px 22px; border-radius: 18px; }
  .ywb-room__fx i:nth-child(n+3) { display: none; }
  .yhs__title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ywb-room__fx i { animation: none; }
  .yhs__card, .ywb-room { transition: none; }
}

/* 2026-09-29 r2 · warm cream again after the navy Applications stage (flow-bg blends the edge);
   shorter heading + compact cards so the 2×2 grid fits one screen while pinned. */
.yhs{background:#FBF7E9}
.yhs__head{grid-template-columns:1fr}
.yhs__title{max-width:none;font-size:clamp(30px,3.1vw,50px)}
.yhs__sticky{gap:clamp(18px,3vh,36px);padding-top:calc(76px + 2vh);padding-bottom:4vh}
.yhs .ywb-room{min-height:clamp(190px,25svh,280px);padding:clamp(20px,2.6svh,28px) 26px clamp(18px,2.2svh,24px)}
.yhs .ywb-room h3{font-size:clamp(26px,2.3vw,36px)}
.yhs .ywb-room address{margin-top:8px;font-size:14px;line-height:1.5}
.yhs .ywb-room__actions{padding-top:16px}
.yhs__grid{gap:14px}


/* ==========================================================================
   2026-10-14 r3 · Philippines showroom (5 cards) + smoother scrolling
   - 3-column grid on wide + tall screens (same thresholds as home-showrooms.js "pinned"), factory card fills the last row.
   - Opening-hours line on showroom cards.
   - Performance: no blur filters / backdrop-filter / masks on the animated light layers; the top fade is a plain
     overlay in the card colour; light blobs only run while their card is on screen and pause while cards fly in.
   ========================================================================== */
.ywb-room { --room-bg: #fff; }
.ywb-room--factory { --room-bg: var(--ywb-ink); }
.ywb-room__fx::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--room-bg) 0, var(--room-bg) calc(20% - var(--lift) * 10%), transparent calc(64% - var(--lift) * 10%), transparent 100%); }

.yhs .ywb-room__fx i { animation-play-state: paused; }
.yhs .ywb-room.is-on-screen .ywb-room__fx i { animation-play-state: running; }
.yhs.is-flying .ywb-room .ywb-room__fx i { animation-play-state: paused; }
.yhs:not(.is-static) .yhs__card { will-change: transform, opacity; }

.ywb-room__hours { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--ya-body); font-size: 13px; font-weight: 600; line-height: 1.3; }
.ywb-room__hours svg { flex: none; color: var(--ywb-orange); }
.ywb-room--factory .ywb-room__hours { color: rgba(251, 247, 233, .85); }

.yhs__card--factory { grid-column: 1 / -1; }
.yhs__scroll { height: 240svh; }

@media (min-width: 1100px) and (min-height: 700px) {
  .yhs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yhs__card--factory { grid-column: span var(--yhs-span, 2); }
  .yhs .ywb-room { min-height: clamp(176px, 23svh, 260px); padding: clamp(16px, 2.2svh, 24px) 24px clamp(14px, 1.9svh, 20px); }
  .yhs .ywb-room address { font-size: 13.5px; line-height: 1.48; }
  .yhs .ywb-room__actions { gap: 8px; padding-top: 14px; }
  .yhs .ywb-btn { min-height: 40px; padding: 8px 14px; font-size: 12.5px; }
  .yhs__sticky { gap: clamp(14px, 2.4vh, 30px); }
}
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 820px) {
  .yhs__sticky { padding-top: calc(66px + 1vh); padding-bottom: 2.5vh; }
  .yhs .ywb-room { padding-block: 14px 12px; }
  .yhs .ywb-room h3 { font-size: clamp(24px, 2vw, 30px); }
  .yhs .ywb-room address { margin-top: 6px; font-size: 13px; line-height: 1.42; }
  .ywb-room__hours { margin-top: 7px; }
}
@media (max-width: 700px) {
  .ywb-room { min-height: 0; }
  .ywb-room__hours { margin-top: 10px; }
}

/* 2026-10-15 飞入过程中按钮也能点:卡片飞行时 translateZ 为负,位于网格平面"后面",
   浏览器把点击判给了网格本身(ol),导致要等卡片落定才能点。让网格不接收点击、卡片接收即可。 */
.yhs__grid { pointer-events: none; }
.yhs__grid > .yhs__card { pointer-events: auto; }

/* 2026-10-16 只在电脑端"飞入"模式下让网格不接收点击;手机横滑模式下网格要能接收手势,否则滑不动 */
.yhs.is-static .yhs__grid { pointer-events: auto; }

/* 2026-10-16：按用户要求取消展厅板块动效，固定展示（无飞入、无滚入上浮、无光斑漂动；悬停高亮保留） */
.yhs.is-static .yhs__card { transform: none; opacity: 1; transition: translate .5s, box-shadow .5s, border-color .5s; }
.yhs .ywb-room__fx i,
.yhs .ywb-room.is-on-screen .ywb-room__fx i { animation: none; }
.yhs.is-static .yhs__w { opacity: 1 !important; transform: none !important; }


/* Source: home-featured-projects.css */
.yh-projects{box-sizing:border-box;padding:clamp(72px,9vw,140px) clamp(20px,5vw,80px);color:#f5f1e8;background:#0b1726}.yh-projects__head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:20px;max-width:1440px;margin:0 auto clamp(38px,6vw,76px)}.yh-projects__head>p{grid-column:1/-1;margin:0;color:#f5a20e;font:700 11px/1.2 ui-monospace,monospace;letter-spacing:.14em}.yh-projects__head h2{max-width:850px;margin:0;color:#fff;font-size:clamp(42px,6vw,92px);font-weight:500;line-height:.94;letter-spacing:-.05em}.yh-projects__head div{align-self:end}.yh-projects__head span{display:block;color:#b9c2cb;font-size:16px;line-height:1.65}.yh-projects__head a{display:inline-block;margin-top:20px;color:#fff;text-decoration:none}.yh-projects__head b{color:#f5a20e}.yh-projects__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);max-width:1440px;margin:auto}.yh-project-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;border-radius:2px;background:#183047}.yh-project-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.yh-project-card:hover img{transform:scale(1.035)}.yh-project-card__media>span{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#0b1726;background:#f5a20e;font:700 11px/1 ui-monospace,monospace}.yh-project-card__copy{padding-top:18px}.yh-project-card__copy p{min-height:1.2em;margin:0 0 8px;color:#90a0ad;font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase}.yh-project-card__copy h3{margin:0;font-size:clamp(22px,2vw,32px);font-weight:500;line-height:1.1}.yh-project-card__copy h3 a{color:#fff;text-decoration:none}.yh-project-card__copy>span{display:none}
@media(max-width:900px){.yh-projects__head{grid-template-columns:1fr}.yh-projects__grid{grid-template-columns:1fr}.yh-project-card{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:20px}.yh-project-card__media{aspect-ratio:4/3}.yh-project-card__copy{align-self:end;padding:0 0 10px}}@media(max-width:560px){.yh-project-card{display:block}.yh-project-card__media{aspect-ratio:4/3}.yh-project-card__copy{padding-top:15px}}

/* 2026-10-16：Selected Projects 标题下调两档（92px → 66px 封顶） */
.yh-projects__head h2{font-size:clamp(32px,4.4vw,66px)}


/* Source: home-drawing-docs.css */
/* Homepage · Drawing to Delivery + Documents (2026-09-20). Brand dark = ink #0E1733. */
@font-face {
  font-family: "YOOAN Allura";
  src: url("../fonts/allura-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.yh-dd {
  --dd-bg: #0E1733;
  --dd-bg-2: #131F42;
  --dd-text: #FBF7E9;
  --dd-soft: rgba(251, 247, 233, .72);
  --dd-mute: rgba(251, 247, 233, .5);
  --dd-line: rgba(233, 224, 190, .22);
  --dd-accent: #F5A20E;
  --dd-hand: "YOOAN Allura", "Bradley Hand", cursive;
  --dd-sign: "YOOAN Allura", "Snell Roundhand", cursive;
  --dd-gutter: clamp(20px, 4vw, 64px);
  background: var(--dd-bg);
  color: var(--dd-text);
  margin-block: 0 !important;
  max-width: none !important;
  position: relative;
}
.yh-dd * { box-sizing: border-box; }
.yh-dd__wrap { width: min(1340px, 100% - 2 * var(--dd-gutter)); margin-inline: auto; }
.yh-dd__eyebrow {
  font-family: "Geist Mono Variable", ui-monospace, monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dd-accent); margin: 0 0 22px;
}
.yh-dd__title {
  font-family: "Fustat Variable", "Schibsted Grotesk Variable", sans-serif; font-weight: 300;
  font-size: clamp(34px, 3.7vw, 58px); line-height: 1.06; letter-spacing: -.02em;
  color: var(--dd-text); margin: 0 0 26px; max-width: 15ch;
}
.yh-dd__title--sm { font-size: clamp(28px, 2.6vw, 40px); max-width: 17ch; }
.yh-dd__lead { font-size: 16px; line-height: 1.65; color: var(--dd-soft); margin: 0; max-width: 46ch; }
.yh-dd__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Buttons (self-contained so the global CTA script leaves them alone) */
.dd-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 999px;
  font: 600 14px/1 "Schibsted Grotesk Variable", sans-serif; letter-spacing: .01em; text-decoration: none !important;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.dd-btn i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dd-btn:hover i { transform: rotate(45deg); }
.dd-btn--primary { background: var(--dd-accent); color: #0E1733 !important; }
.dd-btn--primary i { background: #0E1733; color: var(--dd-accent); }
.dd-btn--primary:hover { background: #FBF7E9; }
.dd-btn--ghost { border: 1px solid rgba(251,247,233,.4); color: var(--dd-text) !important; }
.dd-btn--ghost i { background: var(--dd-text); color: #0E1733; }
.dd-btn--ghost:hover { border-color: var(--dd-text); }

/* Media frame + placeholder */
.dd-media { margin: 0; position: relative; aspect-ratio: var(--dd-ratio, 4/5); overflow: hidden; background: var(--dd-bg-2); }
.dd-media__inner { position: absolute; inset: -9% 0; will-change: transform; }
.dd-media__inner img, .dd-media__inner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(233,224,190,.05) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #1B2A55 0%, #111B3A 100%);
}
.dd-media:has(.dd-ph)::after { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(233,224,190,.28); pointer-events: none; }
.dd-ph__tag { font: 500 11px/1 "Geist Mono Variable", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--dd-accent); }
.dd-ph__hint { font-size: 13px; line-height: 1.45; color: var(--dd-mute); max-width: 26ch; }

/* Hand-drawn annotation */
.dd-note { position: absolute; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.dd-note__text {
  font-family: var(--dd-hand); font-size: clamp(19px, 1.5vw, 24px); line-height: 1.05; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dd-text); opacity: 0; transform: translateY(8px);
  transition: opacity .8s ease .55s, transform .8s ease .55s; white-space: nowrap;
}
.dd-arrow { width: clamp(90px, 9vw, 150px); height: auto; overflow: visible; flex: none; margin-bottom: 14px; }
.dd-arrow path { fill: none; stroke: var(--dd-text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dd-arrow__line { transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1); }
.dd-arrow__head { transition: stroke-dashoffset .35s ease 1s; }
.dd-note.is-drawn .dd-note__text { opacity: 1; transform: none; }
.dd-note.is-drawn path { stroke-dashoffset: 0; }

/* Generic reveal */
[data-dd-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s ease var(--dd-delay, 0ms), transform 1.1s cubic-bezier(.2,.8,.2,1) var(--dd-delay, 0ms); }
[data-dd-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Section A · Manufacturing ---------- */
.yh-dd-mfg { padding-block: clamp(96px, 11vw, 170px) clamp(80px, 9vw, 140px); overflow: clip; }
.yh-dd-mfg__stage {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
}
.yh-dd-mfg__a { grid-column: 1 / span 4; grid-row: 1 / span 2; position: relative; align-self: start; will-change: transform; }
.yh-dd-mfg__copy { grid-column: 7 / span 6; grid-row: 1; padding-top: clamp(0px, 1vw, 12px); }
.yh-dd-mfg__b { grid-column: 6 / span 4; grid-row: 2; margin-top: clamp(64px, 8vw, 130px); will-change: transform; }
.dd-signature {
  position: absolute; right: -18%; bottom: 7%; margin: 0; font-family: var(--dd-sign); font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1; color: var(--dd-text); white-space: nowrap; text-shadow: 0 2px 18px rgba(0,0,0,.35); transform: rotate(-4deg);
}
.dd-signature.is-in { transform: rotate(-4deg); }
.yh-dd-mfg__note { grid-row: 2; grid-column: 2 / span 4; justify-self: end; align-self: end; position: relative; margin-bottom: 24%; margin-right: -2vw; }
.yh-dd-steps {
  list-style: none; margin: clamp(90px, 10vw, 150px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px);
}
.yh-dd-step { border-top: 1px solid var(--dd-line); padding-top: 22px; }
.yh-dd-step__no { font: 500 12px/1 "Geist Mono Variable", monospace; color: var(--dd-accent); letter-spacing: .1em; }
.yh-dd-step h3 { font-family: "Fustat Variable", sans-serif; font-weight: 400; font-size: clamp(20px, 1.6vw, 25px); color: var(--dd-text); margin: 22px 0 12px; }
.yh-dd-step p { font-size: 14.5px; line-height: 1.6; color: var(--dd-soft); margin: 0; }

/* ---------- Section B · Documents (pinned horizontal) ---------- */
.yh-dd-docs { border-top: 1px solid rgba(233,224,190,.08); }
.yh-dd-docs__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.yh-dd-docs__track {
  display: flex; align-items: center; gap: clamp(40px, 5vw, 96px); padding-inline: var(--dd-gutter) 0;
  will-change: transform; height: 100%;
}
.yh-dd-docs__intro { flex: none; position: relative; width: clamp(560px, 66vw, 1040px); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.dd-bigword {
  margin: 0 0 clamp(20px, 3vh, 40px); overflow: hidden; line-height: .86; padding-bottom: .04em;
  font-family: "Fustat Variable", sans-serif; font-weight: 200; text-transform: uppercase; letter-spacing: -.045em;
  font-size: clamp(80px, 11vw, 200px); color: var(--dd-text); white-space: nowrap;
}
.dd-bigword span { display: inline-block; transform: translateY(var(--dd-rise, 100%)); will-change: transform; }
.yh-dd-docs__copy { max-width: 520px; padding-left: .4vw; }
.dd-card { flex: none; position: relative; will-change: transform; }
.dd-card--1 { width: clamp(260px, 22vw, 360px); align-self: flex-start; margin-top: 11vh; margin-left: clamp(-240px, -12vw, -90px); z-index: 2; }
.dd-card--2 { width: clamp(250px, 20vw, 330px); align-self: flex-end; margin-bottom: 9vh; }
.dd-card--3 { width: clamp(260px, 21vw, 340px); align-self: flex-start; margin-top: 14vh; }
.dd-card--4 { width: clamp(300px, 26vw, 420px); align-self: flex-end; margin-bottom: 12vh; }
.dd-card .dd-media { box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.dd-card__body { padding-top: 18px; max-width: 34ch; }
.dd-card__status { font: 500 11px/1 "Geist Mono Variable", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-accent); }
.dd-card h3 { font-family: "Fustat Variable", sans-serif; font-weight: 400; font-size: clamp(19px, 1.45vw, 23px); color: var(--dd-text); margin: 12px 0 8px; }
.dd-card p { font-size: 14px; line-height: 1.55; color: var(--dd-soft); margin: 0 0 12px; }
.dd-card__link { font-size: 14px; color: var(--dd-text) !important; text-decoration: none; border-bottom: 1px solid rgba(251,247,233,.35); padding-bottom: 2px; transition: border-color .3s, color .3s; }
.dd-card__link:hover { color: var(--dd-accent) !important; border-color: var(--dd-accent); }
.dd-card__note { right: 100%; top: 8%; margin-right: 10px; flex-direction: column; align-items: flex-end; z-index: 3; }
.dd-card__note .dd-arrow { transform: scaleY(-1) rotate(8deg); margin: 4px 0 0; }
.yh-dd-docs__end { flex: none; width: 12vw; height: 1px; }

/* ---------- Tablet / mobile: no pin, natural flow ---------- */
@media (max-width: 960px) {
  .yh-dd-mfg__stage { display: block; }
  .yh-dd-mfg__a { width: 72%; margin-bottom: 48px; }
  .dd-signature { right: -30%; }
  .yh-dd-mfg__b { width: 70%; margin: 56px 0 0 auto; }
  .yh-dd-mfg__note { position: relative; margin: 28px 0 0; justify-content: flex-start; }
  .yh-dd-steps { grid-template-columns: 1fr 1fr; margin-top: 72px; }
  .yh-dd-docs__pin { position: static; height: auto; overflow: visible; display: block; padding-block: 90px; }
  .yh-dd-docs__track { flex-direction: column; align-items: stretch; transform: none !important; padding-inline: var(--dd-gutter); height: auto; gap: 56px; }
  .yh-dd-docs__intro { width: auto; height: auto; }
  .dd-bigword { font-size: 19vw; }
  .dd-card { width: 78% !important; margin: 0 !important; transform: none !important; }
  .dd-card:nth-of-type(even) { align-self: flex-end; }
  .dd-card__note { display: none; }
  .yh-dd-docs__end { display: none; }
}
@media (max-width: 600px) { .yh-dd-steps { grid-template-columns: 1fr; } .yh-dd-mfg__a, .yh-dd-mfg__b, .dd-card { width: 100% !important; } .dd-signature { right: 6%; } }

@media (prefers-reduced-motion: reduce) {
  [data-dd-reveal], .dd-note__text { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dd-arrow path { stroke-dashoffset: 0 !important; transition: none !important; }
  .dd-bigword span { transform: none !important; }
}

/* Remove WP block-gap strips between adjacent dark sections */
.yh-dd + * , * + .yh-dd { margin-block-start: 0 !important; }

/* 2026-10-15 手写体批注改为与 About Us 一致:不再全大写(手写体全大写几乎认不出),字距归零、放大、品牌橙 */
.dd-note__text { font-family: "YOOAN Allura", "Snell Roundhand", "Brush Script MT", cursive; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.1; letter-spacing: 0; text-transform: none; color: #F5A20E; }
.dd-arrow path { stroke: #F5A20E; }

/* Keep the horizontal story; move the complete row as one, without per-card drift. */
html body #technical-resources .yh-dd-docs__pin {
  position: sticky; top: 0; height: 100svh; display: flex; overflow: hidden;
  align-items: center; padding-block: 0 !important;
}
html body #technical-resources .yh-dd-docs__track {
  display: flex !important; align-items: flex-start; gap: clamp(32px, 4vw, 64px) !important;
  width: max-content; height: auto; margin: 0;
  padding-inline: var(--dd-gutter) !important; overflow: visible;
  will-change: transform; scroll-snap-type: none;
}
html body #technical-resources .yh-dd-docs__intro {
  position: relative; width: clamp(560px, 62vw, 940px) !important; height: auto;
  align-self: center; padding-right: 40px;
}
html body #technical-resources .yh-dd-docs__copy { max-width: 520px; padding: 0; }
html body #technical-resources .dd-card {
  width: clamp(280px, 25vw, 420px) !important; min-width: 0; margin: 0 !important; align-self: flex-start;
  transform: none !important; will-change: auto;
}
html body #technical-resources .dd-card .dd-media { aspect-ratio: auto !important; height: clamp(180px, 38svh, 440px); }
html body #technical-resources .dd-media__inner {
  position: absolute; inset: 0 !important; transform: none !important; will-change: auto;
}
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 #technical-resources .dd-card__body { max-width: none; }
html body #technical-resources .dd-card__body p { display: block; }
html body #technical-resources .dd-card__annotation { height: 84px; }
html body #technical-resources .dd-card__note {
  position: static; display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; margin: 0; max-width: 100%; height: 84px;
}
html body #technical-resources .dd-note__text { white-space: normal; font-size: clamp(24px, 1.9vw, 28px); opacity: 1; transform: none; }
html body #technical-resources .dd-card__note .dd-arrow { display: block; width: 64px; margin: 0; transform: none; }
html body #technical-resources .dd-card__note .dd-arrow path { stroke-dashoffset: 0; }
html body #technical-resources .yh-dd-docs__end { display: block; width: 5vw; }
@media (max-width: 960px) {
  html body #technical-resources .yh-dd-docs__pin { position: static; height: auto; display: block; padding-block: 56px !important; }
  html body #technical-resources .yh-dd-docs__track {
    display: grid !important; grid-template-columns: repeat(3, min(82vw, 420px)) !important;
    width: 100%; gap: 24px !important; overflow-x: auto;
    transform: none !important; scroll-snap-type: x proximity; scroll-padding-inline: var(--dd-gutter);
    padding-bottom: 12px; will-change: auto;
  }
  html body #technical-resources .yh-dd-docs__intro {
    grid-column: 1 / -1; position: sticky; left: 0; width: calc(100vw - 2 * var(--dd-gutter)) !important;
    padding: 0;
  }
  html body #technical-resources .dd-card { width: 100% !important; scroll-snap-align: start; }
  html body #technical-resources .dd-card .dd-media { height: auto; aspect-ratio: 4 / 5 !important; }
  html body #technical-resources .yh-dd-docs__end { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 961px) {
  html body #technical-resources .yh-dd-docs__pin { position: static; height: auto; padding-block: 64px !important; }
  html body #technical-resources .yh-dd-docs__track { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; transform: none !important; }
  html body #technical-resources .yh-dd-docs__intro { grid-column: 1 / -1; width: auto !important; }
  html body #technical-resources .dd-card { width: 100% !important; }
  html body #technical-resources .yh-dd-docs__end { display: none; }
}


/* Source: flow-bg.css */
/* Page-wide flowing background (2026-09-28) — see assets/js/flow-bg.js.
   Only active once JS has painted the gradient (html.yfb-on). */
.yfb-on .yfb-clear{background-color:transparent!important}
/* full-screen sticky stages that carried their own colour */
.yfb-on .yh-cinema__pin,
.yfb-on .yp-performance__sticky{background-color:transparent!important}
/* the performance photo fades in from the page instead of starting at a hard edge */
.yfb-on .yp-performance__backgrounds{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
/* About · certifications: the WebGL contour field feathers into the page at top and bottom */
.yfb-on .yab-topo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}


/* Source: brand-refinements.css */
/* Source: the existing YOOAN theme.json palette; no new brand colours. */
:root{--yb-orange:#F5A20E;--yb-cream:#FBF7E9;--yb-ink:#0E1733;--yb-blue:#316387}
.wp-block-site-title .yooan-english-logo{display:block;width:116px;height:auto;max-width:100%;overflow:hidden}
.yooan-footer .wp-block-site-title .yooan-english-logo{width:180px}
.yooan-footer__logo{margin-bottom:0!important}
.yooan-footer__heritage{display:grid;width:180px;gap:4px;margin:0 0 clamp(28px,3vw,42px);color:var(--yb-cream);font-family:var(--wp--preset--font-family--display);text-align:center}
.yooan-footer__heritage>span{color:#FBF7E999;font-family:var(--wp--preset--font-family--spec);font-size:.58rem;font-weight:650;line-height:1;letter-spacing:.18em}
.yooan-footer__heritage strong{display:flex;align-items:baseline;justify-content:center;gap:7px;font-size:1.02rem;font-weight:680;line-height:1;letter-spacing:.08em}
.yooan-footer__heritage strong b{color:var(--yb-orange);font-size:2.25rem;font-weight:520;letter-spacing:-.055em}
.yooan-footer__socials.yooan-social-strip{display:flex;min-height:64px;align-items:center;gap:clamp(18px,3vw,44px);margin:0;padding:0;list-style:none}
.yooan-social-strip li{display:flex;margin:0;padding:0}
.yooan-social-strip a,.has-ink-background-color .yooan-social-strip a{display:grid;width:42px;height:48px;padding:0!important;border:0!important;border-radius:0!important;place-items:center;color:#FBF7E9DE!important;background:transparent!important;box-shadow:none!important;text-decoration:none;transition:color .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.yooan-social-strip a:hover,.yooan-social-strip a:focus-visible{color:var(--yb-orange)!important;transform:translateY(-4px)}
.yooan-social-strip svg{display:block;width:32px;height:32px;overflow:visible;fill:currentColor;stroke:none}
.yooan-social-strip svg.is-stroked{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yooan-social-strip svg .is-filled{fill:currentColor;stroke:none}.yooan-social-strip svg .is-cutout{fill:var(--yb-ink);stroke:none}
.wp-block-site-title:has(.yooan-english-logo) a{display:inline-block;line-height:0}
.yooan-outline,.yooan-partners,.yooan-partners *,.yooan-inline-enquiry,.yooan-inline-enquiry *{box-sizing:border-box}
.yooan-footer{background:var(--yb-ink)!important;position:relative;isolation:isolate;overflow:hidden}
.yooan-footer:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(85% 65% at 8% 22%,#31638730 0%,#31638700 72%),radial-gradient(80% 65% at 92% 68%,#F5A20E10 0%,#F5A20E00 68%),linear-gradient(145deg,#0B132C 0%,#0E1733 48%,#132341 100%);pointer-events:none}
.yooan-outline{position:relative;isolation:isolate;width:100vw;max-width:none!important;margin:clamp(16px,2vw,30px) calc(50% - 50vw) 0!important;overflow:hidden;padding:clamp(18px,2vw,30px) clamp(18px,3.6vw,58px) clamp(8px,1.2vw,18px);background:transparent;border:0;box-shadow:none;line-height:0}
.yooan-outline__svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.yooan-outline use{fill:none}.yooan-outline path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.yooan-outline__base{stroke:#F5A20E8A;stroke-width:1.18;filter:drop-shadow(0 0 1px #F5A20E40)}
.yooan-outline__draw{stroke:var(--yb-orange);stroke-width:1.45;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 2px #F5A20E55)}
.yooan-outline.is-visible .yooan-outline__draw{animation:yooan-outline-draw 3.4s cubic-bezier(.65,0,.2,1) forwards}
.yooan-outline__shine{stroke-width:2.4;opacity:0;filter:drop-shadow(0 0 4px #FFF0B8) drop-shadow(0 0 10px #F5A20E);transition:opacity .3s}.yooan-outline:hover .yooan-outline__shine{opacity:1}
@keyframes yooan-outline-draw{to{stroke-dashoffset:0}}
.yooan-native-products .wp-block-image{margin:0 0 24px}.yooan-native-products .wp-block-image img{width:100%;height:340px;object-fit:cover;border-radius:2px}
.yooan-partners{--yooan-partner-gap:clamp(42px,5vw,86px);overflow:hidden;background:var(--yb-cream);color:var(--yb-ink);padding:clamp(62px,8vw,112px) 0 clamp(68px,8vw,108px)}
.yooan-partners__heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,520px);gap:20px clamp(36px,7vw,120px);align-items:end;width:min(1250px,89vw);margin:0 auto clamp(44px,5vw,72px)}
.yooan-partners__heading .is-style-yooan-eyebrow{grid-column:1/-1;margin:0;color:#68708A}
.yooan-partners__heading h2{margin:0;color:var(--yb-ink);font-size:clamp(42px,5.5vw,78px);font-weight:500;line-height:.95;letter-spacing:-.055em}
.yooan-partners__heading>p:last-child{max-width:480px;margin:0 0 4px;color:#586078;font-size:clamp(13px,1.2vw,16px);line-height:1.65}
.yooan-partners__marquee{position:relative;width:100%;overflow:hidden;padding:15px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.yooan-partners__track{display:flex;width:max-content;will-change:transform;animation:yooan-partners-scroll 32s linear infinite}
.yooan-partners__group{display:flex;flex:none;align-items:center;gap:var(--yooan-partner-gap);margin:0;padding:0 var(--yooan-partner-gap) 0 0;list-style:none}
.yooan-partners__group li{display:grid;flex:0 0 clamp(120px,11vw,172px);height:92px;margin:0;padding:0;place-items:center;background:transparent;transition:transform .25s ease}
.yooan-partners__group img{display:block;width:100%;height:78px;object-fit:contain;filter:grayscale(1);opacity:.66;transition:filter .25s ease,opacity .25s ease}
.yooan-partners__group li:hover{transform:translateY(-3px)}
.yooan-partners__group li:hover img{filter:none;opacity:1}
.yooan-partners__marquee:hover .yooan-partners__track,.yooan-partners__marquee:focus-within .yooan-partners__track{animation-play-state:paused}
@keyframes yooan-partners-scroll{to{transform:translateX(-50%)}}
.yooan-inline-enquiry{background:var(--yb-ink);color:var(--yb-cream);padding:clamp(45px,6vw,90px) clamp(20px,5vw,75px);scroll-margin-top:110px}
.yooan-inline-enquiry__inner{max-width:1250px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:8vw}.yooan-inline-enquiry h2{color:var(--yb-cream)!important;font-size:clamp(32px,4.5vw,60px);line-height:1.08;margin:20px 0}.yooan-inline-enquiry p{color:#FBF7E9CC}.yooan-inline-enquiry .is-style-yooan-eyebrow{color:var(--yb-orange)}
.yooan-partner-inline{font:inherit;font-size:14px;background:none;color:var(--yb-cream);border:0;border-bottom:1px solid var(--yb-orange);padding:10px 0;cursor:pointer;margin-top:28px;text-align:left}
.yooan-enquiry-form label{display:block;font-size:12px;margin-bottom:18px}.yooan-enquiry-form input,.yooan-enquiry-form select,.yooan-enquiry-form textarea{box-sizing:border-box;display:block;width:100%;font:inherit;font-size:15px;padding:12px 0;background:transparent;color:var(--yb-cream);border:0;border-bottom:1px solid #FBF7E960;border-radius:0;margin-top:5px}.yooan-enquiry-form option{color:var(--yb-ink);background:var(--yb-cream)}.yooan-enquiry-form textarea{resize:vertical}.yooan-enquiry-form input::placeholder,.yooan-enquiry-form textarea::placeholder{color:#FBF7E999}.yooan-enquiry-form .wp-element-button{background:var(--yb-orange);color:var(--yb-ink);border:0;cursor:pointer;padding:14px 25px}.yooan-enquiry-note,.yooan-enquiry-status{font-size:11px}.yooan-enquiry-form :focus-visible,.yooan-partner-inline:focus-visible{outline:2px solid var(--yb-orange);outline-offset:4px}
@media(max-width:900px){.yooan-partners__heading{display:block}.yooan-partners__heading h2{margin:15px 0 18px}.yooan-partners__heading>p:last-child{max-width:560px}}
@media(max-width:700px){.yooan-partners{--yooan-partner-gap:28px;padding:60px 0}.yooan-partners__heading{display:block;width:88vw;margin-bottom:34px}.yooan-partners__heading h2{margin:15px 0 18px;font-size:46px}.yooan-partners__heading>p:last-child{font-size:13px}.yooan-partners__marquee{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.yooan-partners__track{animation-duration:24s}.yooan-partners__group li{flex-basis:124px;height:80px}.yooan-partners__group img{height:68px}.yooan-inline-enquiry__inner{grid-template-columns:1fr;gap:35px}.yooan-native-products .wp-block-image img{height:290px}.yooan-outline{margin-top:12px!important;padding:18px 14px 6px}.yooan-footer__heritage{width:180px}.yooan-footer__socials.yooan-social-strip{width:100%;gap:clamp(12px,4vw,24px);justify-content:space-between}.yooan-social-strip a,.has-ink-background-color .yooan-social-strip a{width:40px;height:44px}.yooan-social-strip svg{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.yooan-outline__draw{animation:none!important;stroke-dashoffset:0}.yooan-outline__shine{transition:none}.yooan-partners__marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.yooan-partners__track{animation:none!important}.yooan-partners__group[aria-hidden="true"]{display:none}}

/* 2026-09-19 homepage restructure */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.yh-hero__proof a{color:inherit;text-decoration:underline;text-underline-offset:.22em}
.yh-hero__proof a:hover{text-decoration-thickness:2px}

/* 2026-09-19 r2 · Logo wall overlap fix. Safari sized each group from the <img> width
   attribute (120px) instead of the li flex-basis, so the group box came out shorter than
   its logos and the duplicate group started two slots early (Dulux under TAIWANGLASS,
   HOPPE under Wehag). Explicit widths make the group width deterministic in every engine. */
.yooan-partners__group{width:max-content}
.yooan-partners__group li{flex:none;width:clamp(120px,11vw,172px);min-width:0}
@media(max-width:700px){.yooan-partners__group li{width:124px}}

/* Component Partners copy · Plan B (2026-09-19): shorter H2, balanced 2-line wrap, disclaimer moved below logo wall */
.yooan-partners__heading h2{max-width:15ch;text-wrap:balance}
.yooan-partners__note{width:min(1250px,89vw);margin:clamp(24px,3vw,32px) auto 0;color:#68708A;font-size:13px;line-height:1.5}
@media(max-width:700px){.yooan-partners__note{width:88vw;font-size:12px}}

/* 2026-09-27 · footer badge: "Since 2006" only (the auto-counting "20 years" line was removed) */
.yooan-footer__heritage--since{width:auto;max-width:220px;text-align:left}.yooan-footer__heritage--since strong{justify-content:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.1em;line-height:1.35;text-transform:uppercase;color:#FBF7E9CC}

/* 2026-10-02 首页尾部：两个明确入口取代 mailto 表单 */
.yooan-enquiry-actions{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
.yooan-enquiry-actions .yooan-partner-inline{display:inline-block;text-decoration:none}


/* Source: video-collections.css */
.yv-collection {
  --yv-ink: #13213f;
  --yv-accent: #e84f28;
  margin: clamp(5rem, 10vw, 9rem) auto 0;
  max-width: 1440px;
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  color: var(--yv-ink);
}

.yv-collection__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--yv-ink) 24%, transparent);
}

.yv-collection__eyebrow,
.yv-card__format,
.yv-topic__title {
  margin: 0 0 .8rem;
  font: 700 .72rem/1.2 var(--wp--preset--font-family--manrope, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.yv-collection__eyebrow { color: var(--yv-accent); }

.yv-collection h2 {
  max-width: 820px;
  margin: 0;
  font: 400 clamp(2.5rem, 5.5vw, 5.4rem)/.94 var(--wp--preset--font-family--instrument-serif, Georgia, serif);
  letter-spacing: -.035em;
}

.yv-collection__intro p {
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.yv-collection__intro a,
.yv-card__watch {
  color: inherit;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.yv-topic { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.yv-topic__title { color: color-mix(in srgb, var(--yv-ink) 64%, transparent); }

.yv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.4rem);
}

.yv-card {
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--yv-ink) 20%, transparent);
  padding-top: 1rem;
}

.yv-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 12;
  background: #d9d8d4;
  color: #fff;
}

.yv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.yv-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8,16,33,.54));
}

.yv-card__media:hover img { transform: scale(1.045); filter: saturate(1.08); }

.yv-card__play {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 3.6rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(13,24,48,.48);
  backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
  font-size: .95rem;
  padding-left: .16rem;
}

.yv-card__format {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
}

.yv-card__body { padding: 1.15rem .15rem 0; }

.yv-card h4 {
  margin: 0;
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  line-height: 1.25;
}

.yv-card h4 a { color: inherit; text-decoration: none; }

.yv-card__body p {
  margin: .75rem 0 1rem;
  color: color-mix(in srgb, var(--yv-ink) 72%, transparent);
  line-height: 1.55;
}

.yv-card__watch { font-size: .84rem; }

body.yooan-news-index .yv-collection {
  --yv-ink: #f6f1e8;
  --yv-accent: #ff7148;
  padding-inline: 0;
}

@media (max-width: 900px) {
  .yv-collection__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .yv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .yv-collection { margin-top: 4.5rem; padding-inline: 1rem; }
  body.yooan-news-index .yv-collection { padding-inline: 0; }
  .yv-grid { grid-template-columns: 1fr; }
  .yv-card__media { aspect-ratio: 9 / 11; }
}

@media (prefers-reduced-motion: reduce) {
  .yv-card__media img { transition: none; }
}

/* ---- thumbnails: use the real vertical frame, 4 across on desktop ---- */
.yv-card__media { aspect-ratio: 9 / 14; cursor: pointer; }
.yv-card h4 a, .yv-card__watch { cursor: pointer; }
@media (min-width: 1200px) {
  .yv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .yv-card__media { aspect-ratio: 9 / 13; }
}

/* ---- on-site player ---- */
html.yv-lock { overflow: hidden; }
.yv-modal {
  width: min(92vw, 420px);
  max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0;
  background: transparent; color: #fbf7e9; overflow: visible;
}
.yv-modal::backdrop { background: rgba(7, 12, 28, .82); backdrop-filter: blur(6px); }
.yv-modal__panel { position: relative; }
.yv-modal__frame {
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 8.5rem);
  margin-inline: auto;
  background: #000; border-radius: 18px; overflow: hidden;
}
.yv-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.yv-modal__close {
  position: absolute; z-index: 2; top: -2.9rem; right: 0;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 1px solid rgba(251,247,233,.5); border-radius: 50%;
  background: transparent; color: #fbf7e9; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.yv-modal__close:hover, .yv-modal__close:focus-visible { background: #f5a20e; border-color: #f5a20e; color: #0e1733; }
.yv-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; }
.yv-modal__title { margin: 0; font-size: .95rem; line-height: 1.3; }
.yv-modal__yt { flex: none; color: #f5a20e; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.yv-modal__yt:hover { text-decoration: underline; }

/* ---- mobile: each topic is one swipeable row instead of a long vertical stack ---- */
@media (max-width: 767px) {
  .yv-collection { margin-top: 3rem; }
  .yv-collection__head { gap: 1rem; padding-bottom: 1.4rem; }
  .yv-collection__intro p { margin-bottom: .8rem; font-size: .95rem; line-height: 1.55; }
  .yv-topic { margin-top: 1.8rem; }
  .yv-topic__title { margin-bottom: .7rem; }

  .yv-grid {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding: 0 1rem .4rem;
  }
  body.yooan-news-index .yv-grid { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .yv-grid::-webkit-scrollbar { display: none; }

  .yv-card {
    flex: 0 0 min(52vw, 210px);
    scroll-snap-align: start;
    padding-top: .6rem;
  }
  .yv-card__media { aspect-ratio: 9 / 13; }
  .yv-card__play { width: 2.6rem; font-size: .75rem; }
  .yv-card__format { left: .6rem; bottom: .6rem; font-size: .6rem; letter-spacing: .12em; }
  .yv-card__body { padding: .7rem 0 0; }
  .yv-card h4 { font-size: .95rem; line-height: 1.25; }
  .yv-card__body p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    margin: .45rem 0 0; font-size: .8rem; line-height: 1.45;
  }
  .yv-card__watch { display: none; }
}

/* site heading rules were turning card titles navy-on-navy; keep them readable, and tame the topic labels */
.yv-card h4, .yv-card h4 a { color: var(--yv-ink) !important; }
@media (max-width: 767px) {
  .yv-collection .yv-topic__title { font-size: .72rem !important; letter-spacing: .14em !important; line-height: 1.3 !important; }
  .yv-collection .yv-card h4 { font-size: .95rem !important; line-height: 1.25 !important; }
  /* on /news/ let the rows run edge to edge so the next card peeks in from the screen edge */
  body.yooan-news-index .yv-grid { margin-inline: calc(50% - 50vw); padding-inline: 15px; scroll-padding-inline: 15px; }
}
@media (max-width: 767px) {
  /* rows run edge to edge on both pages; cards still start at the page's normal left margin */
  .yv-collection .yv-grid,
  body.yooan-news-index .yv-collection .yv-grid {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    scroll-padding-inline: calc(50vw - 50%);
  }
}
@media (max-width: 767px) {
  .yv-collection .yv-grid,
  body.yooan-news-index .yv-collection .yv-grid { scroll-padding-inline: 1rem; }
}

/* ================= Insights video library: sidebar categories + rounded vertical cards ================= */
.yvi { --yvi-line: rgba(251,247,233,.14); --yvi-accent: #f5a20e; }
.yvi__panel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding: clamp(1rem, 1.8vw, 1.6rem);
  border: 1px solid var(--yvi-line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(251,247,233,.05), rgba(251,247,233,.02));
}
.yvi__nav { position: sticky; top: 110px; align-self: start; }
.yvi__nav-label { margin: .2rem 0 .9rem .5rem; font: 600 .7rem/1 "Geist Mono Variable", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,247,233,.55); }
.yvi__nav-list { display: grid; gap: .35rem; }
.yvi__tab {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; padding: .8rem .9rem; border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: rgba(251,247,233,.78); text-align: left; cursor: pointer;
  font: 600 .92rem/1.25 "Schibsted Grotesk Variable", "Helvetica Neue", Arial, sans-serif;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.yvi__tab b { flex: none; min-width: 1.8rem; padding: .2rem .5rem; border-radius: 999px; background: rgba(251,247,233,.1); font: 600 .72rem/1.2 "Geist Mono Variable", ui-monospace, monospace; text-align: center; }
.yvi__tab:hover { background: rgba(251,247,233,.07); color: #fbf7e9; }
.yvi__tab.is-active { background: rgba(245,162,14,.14); border-color: rgba(245,162,14,.55); color: #fbf7e9; }
.yvi__tab.is-active b { background: var(--yvi-accent); color: #0e1733; }
.yvi__tab:focus-visible { outline: 2px solid var(--yvi-accent); outline-offset: 2px; }

.yvi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); align-content: start; min-width: 0; }
@media (min-width: 1280px) { .yvi__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.yvi-card { min-width: 0; padding: .5rem .5rem .9rem; border: 1px solid var(--yvi-line); border-radius: 22px; background: rgba(251,247,233,.03); transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.yvi-card[hidden] { display: none; }
.yvi-card:hover { border-color: rgba(245,162,14,.6); background: rgba(251,247,233,.06); transform: translateY(-3px); }
.yvi-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 12; border-radius: 16px; background: #1a2547; cursor: pointer; }
.yvi-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.yvi-card:hover .yvi-card__media img { transform: scale(1.04); }
.yvi-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,14,32,.5)); pointer-events: none; }
.yvi-card__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; padding-left: .15rem; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(14,23,51,.5); backdrop-filter: blur(8px); color: #fff; font-size: .85rem; transform: translate(-50%, -50%); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.yvi-card:hover .yvi-card__play { background: var(--yvi-accent); border-color: var(--yvi-accent); color: #0e1733; }
.yvi-card__body { padding: .85rem .45rem 0; }
.yvi-card h4, .yvi-card h4 a { margin: 0; color: #fbf7e9 !important; text-decoration: none; }
.yvi-card .yvi-card__body h4 { font-size: 1rem !important; line-height: 1.28 !important; font-weight: 600; }
.yvi-card h4 a { cursor: pointer; }
.yvi-card__body p { margin: .45rem 0 0; color: rgba(251,247,233,.68); font-size: .85rem; line-height: 1.45; }
.yvi-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; color: rgba(251,247,233,.62); font: 600 .72rem/1.2 "Geist Mono Variable", ui-monospace, monospace; letter-spacing: .04em; }
.yvi-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.yvi-card__meta svg { color: var(--yvi-accent); }
.yvi.is-filtered .yvi-card__topic { display: none; }

@media (max-width: 1100px) {
  .yvi__panel { grid-template-columns: 200px minmax(0, 1fr); }
}

/* phone + small tablet: categories become a swipeable pill bar, videos become one swipeable row */
@media (max-width: 860px) {
  .yvi__panel { display: block; padding: .8rem; border-radius: 22px; }
  .yvi__nav { position: static; margin-bottom: .9rem; }
  .yvi__nav-label { display: none; }
  .yvi__nav-list { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; margin-inline: -.8rem; padding: 0 .8rem .2rem; }
  .yvi__nav-list::-webkit-scrollbar { display: none; }
  .yvi__tab { flex: none; width: auto; padding: .55rem .8rem; border-color: var(--yvi-line); border-radius: 999px; font-size: .82rem; white-space: nowrap; }
  .yvi__grid { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -.8rem; padding: 0 .8rem .3rem; scroll-padding-inline: .8rem; overscroll-behavior-x: contain; }
  .yvi__grid::-webkit-scrollbar { display: none; }
  .yvi-card { flex: 0 0 min(54vw, 220px); scroll-snap-align: start; }
  .yvi-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yvi-card, .yvi-card__media img { transition: none; }
  .yvi-card:hover { transform: none; }
}
@media (max-width: 860px) { .yvi-card__topic { display: none; } }

/* 2026-10-16：去掉视频卡片之间与标题下方的分隔线（与 About 页统一，不用细线分隔） */
.yv-card{border-top:0;padding-top:0}
.yv-collection__head{border-bottom:0}
/* 2026-10-16：项目短片区大标题下调两档（与全站同级标题统一，66px 封顶） */
.yv-collection h2{font-size:clamp(32px,4.4vw,66px)!important}

/* 2026-10-16：视频弹窗在手机上占满整屏、关闭按钮被挤出屏幕 → 用“小视口高度”(svh) 计算尺寸：
   视频高度 = 屏幕可视高度 − 上方关闭按钮 − 下方标题栏，宽度按 9:16 由高度推出；关闭按钮放在视频右上方、始终在屏幕内；点视频外的暗色区域也能关闭。 */
.yv-modal{--yv-h:min(calc(100vh - 10.5rem), 760px);width:min(88vw, calc(var(--yv-h) * 9 / 16));max-height:100vh}
@supports (height:1svh){.yv-modal{--yv-h:min(calc(100svh - 10.5rem), 760px);max-height:100svh}}
.yv-modal__panel{display:flex;flex-direction:column;padding-top:3.4rem}
.yv-modal__frame{width:100%;height:auto;max-height:var(--yv-h)}
.yv-modal__close{top:0;right:0;width:2.75rem;height:2.75rem;border:0;background:#f5a20e;color:#0e1733;font-size:1.6rem;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.yv-modal__close:hover,.yv-modal__close:focus-visible{background:#ffc04d;color:#0e1733}
@media (max-width:767px){
  /* 2026-10-16 r2：再缩小一档，上下各留足空间，关闭按钮不会贴到屏幕顶部 */
  .yv-modal{--yv-h:min(calc(100vh - 17rem), 540px);width:min(70vw, calc(var(--yv-h) * 9 / 16))}
  @supports (height:1svh){.yv-modal{--yv-h:min(calc(100svh - 17rem), 540px)}}
  .yv-modal__panel{padding-top:3.6rem}
  html body .yv-modal__close{min-width:0!important;min-height:0!important}
  .yv-modal__bar{flex-wrap:wrap;gap:.4rem .8rem}
  .yv-modal__title{font-size:.88rem}
}
/* 页面内直接播放的竖版视频（项目详情页）：手机上不超过屏幕高度的 75%，不会把页面“堵住” */
@media (max-width:767px){
  .ypj-video video,.yooan-project video[controls],main video[controls]{max-height:75svh;width:100%;object-fit:contain;background:#000}
}

/* 产品页海报整体可点击 */
.yps-yt{cursor:pointer}
.yvi__more[hidden] { display: none !important; }
.yvi__more { grid-column: 2; justify-self: center; min-height: 44px; margin-top: 18px; padding: 10px 20px; border: 1px solid rgba(251,247,233,.5); border-radius: 999px; background: transparent; color: #fbf7e9; font: inherit; cursor: pointer; }
@media (max-width: 767px) {
  .yvi-card .yvi-card__body > p, .yvi-card .yvi-card__meta,
  .yv-collection .yv-card > p, .yv-collection .yv-card__body > p,
  .yv-collection .yv-card__format { display: none !important; }
  .yvi-card .yvi-card__body { padding: 10px 4px 4px; }
  .yvi-card .yvi-card__body h4 { margin: 0; font-size: 14px !important; line-height: 1.4 !important; }
  .yv-collection .yv-card h4 { margin-bottom: 0; font-size: 14px !important; line-height: 1.4 !important; }
  .yvi__more { grid-column: auto; justify-self: center; width: max-content; max-width: 100%; margin: 18px auto 0; display: block; }
}

/* ===== 2026-10-19 下午 · 手机/小平板：视频库与项目短片改为「筛选栏 + 两列网格」（原来是一行横滑，看不全） ===== */
@media (max-width: 860px) {
  .yvi__grid, .yv-collection .yv-grid, body.yooan-news-index .yv-collection .yv-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 10px !important;
    overflow: visible !important; margin-inline: 0 !important; padding: 0 !important; scroll-snap-type: none !important;
  }
  .yvi-card, .yv-collection .yv-card { flex: none !important; width: auto !important; min-width: 0; scroll-snap-align: none; }
  .yvi-card { padding: .35rem .35rem .7rem; border-radius: 16px; }
  .yvi-card__media { border-radius: 12px; }
  .yvi-card__body { padding: .6rem .25rem 0; }
  .yvi-card .yvi-card__body h4 { font-size: .92rem !important; line-height: 1.3 !important; }
  .yvi-card__body p { font-size: .78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yvi-card__play { width: 2.6rem; }
  /* 筛选栏：吸顶，滑动时一直能切换分类 */
  .yvi__nav { position: sticky; top: 0; z-index: 5; margin: -.8rem -.8rem .9rem; padding: .8rem .8rem .6rem; background: #0E1733; border-radius: 22px 22px 0 0; }
}

/* ===== 2026-10-19 下午 · 点击视频 = 铺满整个设备屏幕播放；退出键固定在屏幕右上角（所有设备） ===== */
html body .yv-modal {
  position: fixed; inset: 0; width: 100vw !important; height: 100vh; max-width: none; max-height: none !important;
  margin: 0; padding: 0; background: #000; overflow: hidden;
}
@supports (height: 100dvh) { html body .yv-modal { height: 100dvh; } }
html body .yv-modal::backdrop { background: #000; }
html body .yv-modal__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 !important; }
/* 竖版视频按 9:16 撑满：手机竖屏时宽度铺满，电脑上高度铺满 */
html body .yv-modal__frame {
  width: min(100vw, calc(100vh * 9 / 16)) !important; height: min(100vh, calc(100vw * 16 / 9)) !important;
  max-height: none !important; aspect-ratio: auto; border-radius: 0;
}
@supports (height: 100dvh) {
  html body .yv-modal__frame { width: min(100vw, calc(100dvh * 9 / 16)) !important; height: min(100dvh, calc(100vw * 16 / 9)) !important; }
}
html body .yv-modal__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
html body .yv-modal.is-file .yv-modal__frame { width: 100% !important; height: 100% !important; }
html body .yv-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
html body .yv-modal__close {
  position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 14px) !important; right: calc(env(safe-area-inset-right, 0px) + 14px) !important; left: auto !important;
  z-index: 10; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50%; border: 0; background: rgba(251,247,233,.92); color: #0E1733; font-size: 1.7rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
/* 标题与 YouTube 链接浮在底部，不占视频高度 */
html body .yv-modal__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 1.6rem 18px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); pointer-events: none;
}
html body .yv-modal__bar a { pointer-events: auto; }
html body .yv-modal__title { color: #fbf7e9; }

/* 项目详情页等页面内视频（手机）：封面上加播放键，点了进全屏播放器 */
.yv-tapwrap { position: relative; display: block; }
.yps-view .yv-tapwrap, .yps-film .yv-tapwrap { width: 100%; height: 100%; }
.yv-tap { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.yv-tap span { display: grid; place-items: center; box-sizing: border-box; width: 48px; height: 48px; padding-left: 2px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(14,23,51,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: background .2s ease; }
.yv-tap svg { display: block; width: 22px; height: 22px; }
.yv-tap:focus-visible span { outline: 2px solid #fff; outline-offset: 4px; }