/* Brand story: editorial typography, quiet surfaces and real project imagery. */
.yx-brand {
  --yx-ink: #292c27;
  --yx-muted: #6b6d62;
  --yx-line: #d9dbd0;
  --yx-paper: #f5f3ed;
  --yx-accent: #7c7054;
  max-width: 1200px;
  margin: auto;
  padding: 0 22px 28px;
  color: var(--yx-ink);
  background: var(--yx-paper);
  font-family: var(--font-sans, Arial, sans-serif);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
body:has(.yx-brand) { background: #f5f3ed; }
.site-content:has(.yx-brand) { max-width: 1260px; padding-top: 16px; }
.yx-brand * { box-sizing: border-box; }
.yx-brand figure, .yx-brand p, .yx-brand h1, .yx-brand h2, .yx-brand h3 { margin: 0; }
.yx-brand a { color: inherit; text-decoration: none; }
.yx-brand a:hover { text-decoration: underline; text-underline-offset: 5px; }
.yx-brand a:focus-visible, .yx-brand button:focus-visible, .yx-brand summary:focus-visible {
  outline: 3px solid #a58f58;
  outline-offset: 5px;
}
.yx-brand section[id] { scroll-margin-top: 100px; }
.yx-kicker { font-size: 11px; letter-spacing: .13em; color: var(--yx-accent); font-weight: 600; }
.yx-brand-mark { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--yx-accent); }
.yx-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; padding: 62px 0 72px; }
.yx-hero h1 { font-size: clamp(36px, 3.35vw, 50px); line-height: 1.35; font-weight: 550; letter-spacing: -.045em; margin: 28px 0 22px; }
.yx-lead { max-width: 440px; font-size: 16px; line-height: 1.95; color: var(--yx-muted); }
.yx-text-link { display: inline-flex; align-items: center; gap: 36px; border-bottom: 1px solid currentColor; padding: 8px 0; margin-top: 27px; font-size: 13px; }
.yx-hero .yx-hero-note { margin-top: 28px; font-size: 10px; letter-spacing: .12em; color: var(--yx-muted); }
.yx-zoom { position: relative; display: block; width: 100%; border: 0; padding: 0; color: inherit; background: #eeece5; font: inherit; cursor: zoom-in; }
.yx-hero-image { position: relative; padding-top: 26px; }
.yx-hero-image:before { content: ''; position: absolute; top: 0; right: 0; width: 58px; height: 1px; background: var(--yx-accent); }
.yx-hero-image .yx-zoom { padding: 9px; background: #fff; border: 1px solid #e3e0d7; }
.yx-hero-image img { display: block; width: 100%; height: auto; aspect-ratio: 1423/800; object-fit: contain; }
.yx-image-hint { position: absolute; bottom: 14px; right: 14px; padding: 4px 8px; color: #32352e; background: rgba(255,255,255,.94); font-size: 10px; }
.yx-hero-image figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; color: var(--yx-muted); font-size: 10px; }
.yx-section { padding: 76px 0; border-top: 1px solid var(--yx-line); }
.yx-brand h2 { font-size: 32px; line-height: 1.5; font-weight: 550; letter-spacing: -.04em; margin: 15px 0 24px; }
.yx-story, .yx-team-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; }
.yx-story h2 { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; font-weight: 500; font-size: 37px; }
.yx-prose { max-width: 720px; font-size: 16px; line-height: 1.95; color: var(--yx-muted); }
.yx-prose p + p { margin-top: 19px; }
.yx-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 35px; }
.yx-heading h2 { margin-bottom: 0; }
.yx-heading > p { font-size: 13px; color: var(--yx-muted); padding-bottom: 4px; }
.yx-process { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 36px 0 0; gap: 35px; }
.yx-process li { position: relative; padding-top: 17px; border-top: 1px solid var(--yx-line); }
.yx-process li:not(:last-child):after { content: '↗'; position: absolute; right: 0; top: 14px; color: var(--yx-accent); font-size: 18px; }
.yx-step-number { font-size: 11px; color: var(--yx-accent); }
.yx-process h3 { font-size: 23px; font-weight: 550; margin: 14px 0 12px; }
.yx-process p { font-size: 14px; color: var(--yx-muted); }
.yx-step-tools { display: block; margin-top: 22px; font-size: 10px; color: var(--yx-accent); }
.yx-cloud { display: grid; grid-template-columns: 1fr 1.12fr; gap: 70px; padding: 56px 60px; margin: 0 0 76px; background: #2e352f; color: #f5f3ed; }
.yx-cloud .yx-kicker { color: #d2c7aa; }
.yx-cloud h2 { margin: 22px 0; font-size: 39px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.yx-cloud-copy > p:not(.yx-kicker) { color: #ccd1c5; font-size: 14px; max-width: 280px; }
.yx-cloud .yx-text-link { color: #f4ead3; margin-top: 30px; }
.yx-cloud-flow { padding-left: 40px; border-left: 1px solid #5b6258; }
.yx-cloud-label { font-size: 11px; color: #c8cbbf; letter-spacing: .08em; }
.yx-cloud-flow ol { list-style: none; margin: 23px 0 0; padding: 0; }
.yx-cloud-flow li { display: grid; grid-template-columns: 22px 1fr; gap: 17px; margin-top: 21px; }
.yx-cloud-flow li > span { font-size: 10px; color: #c4b590; padding-top: 4px; }
.yx-cloud-flow h3 { font-size: 15px; font-weight: 500; }
.yx-cloud-flow li p { color: #bec5b8; font-size: 12px; margin-top: 4px; }
.yx-works { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px 28px; }
.yx-work-image { background: #ece9e0; border: 1px solid #e0ddd3; }
.yx-work-image img { display: block; width: 100%; height: auto; aspect-ratio: 1.42; object-fit: contain; }
.yx-work-copy { padding-top: 19px; }
.yx-work-copy .yx-kicker { font-size: 10px; }
.yx-work h3 { font-size: 17px; font-weight: 550; margin: 8px 0; }
.yx-work h3 span { font-size: 13px; color: var(--yx-accent); }
.yx-work-copy > p:not(.yx-kicker) { font-size: 13px; color: var(--yx-muted); }
.yx-work-method { display: block; color: var(--yx-accent); font-size: 10px; margin-top: 12px; }
.yx-history { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }
.yx-history-heading { align-self: start; position: sticky; top: 100px; }
.yx-history-heading > p:not(.yx-kicker) { font-size: 14px; color: var(--yx-muted); }
.yx-history-word { display: block; margin-top: 65px; font-size: 50px; line-height: 1.1; font-weight: 300; letter-spacing: -.04em; color: #d9d9cd; }
.yx-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--yx-line); }
.yx-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 23px; padding: 24px 0; border-bottom: 1px solid var(--yx-line); }
.yx-year { font-family: Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.4; color: var(--yx-accent); }
.yx-timeline p { font-size: 14px; color: var(--yx-muted); }
.yx-timeline li:last-child .yx-year { font-family: inherit; font-size: 23px; }
.yx-team-grid { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.yx-team-grid img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 15px; }
.yx-team-grid p, .yx-team-grid a { font-size: 14px; color: var(--yx-muted); }
.yx-training-types { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.yx-training-types article { border-top: 1px solid var(--yx-line); padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.yx-training-types h3 { font-size: 23px; font-weight: 500; margin: 16px 0 12px; }
.yx-training-types p { color: var(--yx-muted); font-size: 14px; margin-bottom: 20px; max-width: 310px; }
.yx-training-types .yx-text-link { margin-top: auto; }
.yx-training-detail { display: grid; grid-template-columns: 1fr 1.25fr; gap: 65px; padding: 40px; background: #eae7dd; }
.yx-training-intro > p:first-child { font-size: 20px; font-weight: 500; margin-bottom: 20px; }
.yx-training-intro > p + p { font-size: 14px; color: var(--yx-muted); line-height: 1.95; }
.yx-training-benefits { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.yx-training-benefits div { border-top: 1px solid #cfcec2; padding-top: 15px; }
.yx-training-benefits dt { font-size: 16px; font-weight: 500; margin-bottom: 9px; }
.yx-training-benefits dd { margin: 0; font-size: 13px; color: var(--yx-muted); }
.yx-brand .yx-enterprise-cases-title { font-size: 22px; font-weight: 500; margin: 45px 0 0; }
.yx-partners { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: 35px; }
.yx-partners figure { background: #fff; border: 1px solid #e6e3db; }
.yx-partner-logo { display: flex; align-items: center; justify-content: center; height: 185px; padding: 20px; }
.yx-partner-logo img { display: block; width: 145px; height: 145px; object-fit: contain; }
.yx-partners figcaption { border-top: 1px solid #efede7; padding: 17px 20px; }
.yx-partners figcaption strong { font-size: 13px; font-weight: 500; }
.yx-partners figcaption p { font-size: 10px; color: var(--yx-muted); margin-top: 5px; }
.yx-enterprise-note { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 30px; }
.yx-enterprise-note p { font-size: 14px; color: var(--yx-muted); }
.yx-enterprise-note .yx-text-link { margin: 0; }
.yx-contact { position: relative; padding: 62px; background: #eae7dd; text-align: center; border: 0; }
.yx-contact h2 { font-size: 36px; line-height: 1.45; }
.yx-contact > p:not(.yx-kicker) { font-size: 14px; color: var(--yx-muted); }
.yx-actions { display: flex; justify-content: center; gap: 14px; margin: 28px 0; }
.yx-brand .yx-button { display: inline-flex; justify-content: center; align-items: center; gap: 38px; min-height: 48px; padding: 12px 25px; border: 1px solid var(--yx-ink); background: var(--yx-ink); color: #fff; font-size: 13px; }
.yx-brand .yx-button-outline { background: transparent; color: var(--yx-ink); }
.yx-contact-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 28px; color: var(--yx-muted); font-size: 12px; }
.yx-contact-list p { max-width: 420px; }
.yx-contact-list span { margin-right: 10px; }
.yx-copyright { max-width: 720px; margin: auto; padding: 28px 0 0; font-size: 11px; color: var(--yx-muted); text-align: center; }
.yx-details { border-top: 1px solid var(--yx-line); margin-top: 18px; padding-top: 16px; text-align: left; }
.yx-details summary { width: fit-content; cursor: pointer; font-size: 12px; }
.yx-details p { padding-top: 14px; }
.yx-lightbox { max-width: min(95vw,1400px); max-height: 92vh; padding: 60px 24px 20px; border: 0; background: #f5f3ed; color: var(--yx-ink); }
.yx-lightbox::backdrop { background: rgba(20,23,20,.9); }
.yx-lightbox img { display: block; max-width: 100%; max-height: 72vh; margin: auto; object-fit: contain; }
.yx-lightbox p { margin-top: 12px; text-align: center; font-size: 13px; }
.yx-close { position: absolute; right: 20px; top: 16px; min-height: 36px; padding: 5px 15px; border: 1px solid var(--yx-line); background: transparent; color: var(--yx-ink); font: inherit; cursor: pointer; }
.yx-lightbox:not([open]) { display: none; }
@media (max-width: 1000px) {
  .yx-hero { grid-template-columns: 1fr 1fr; gap: 30px; }
  .yx-hero h1 { font-size: 35px; }
  .yx-story, .yx-team-section, .yx-history { gap: 36px; }
  .yx-heading { display: block; }
  .yx-heading > p { margin-top: 13px; }
  .yx-cloud { gap: 35px; padding: 42px 36px; }
  .yx-cloud h2 { font-size: 32px; }
  .yx-cloud-flow { padding-left: 26px; }
  .yx-works { gap: 30px 18px; }
  .yx-partners { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .yx-process { gap: 22px; }
  .yx-history-word { font-size: 42px; }
  .yx-timeline li { grid-template-columns: 72px 1fr; gap: 15px; }
}
@media (max-width: 780px) {
  .yx-hero { grid-template-columns: 1fr; gap: 34px; padding: 40px 0 52px; }
  .yx-hero h1 { font-size: 42px; }
  .yx-lead { max-width: 600px; }
  .yx-hero-image { padding: 0; }
  .yx-hero-image:before { display: none; }
  .yx-hero .yx-hero-note { display: none; }
  .yx-process { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
  .yx-works { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .yx-story h2 { font-size: 30px; }
  .yx-brand h2 { font-size: 28px; }
  .yx-history-heading { position: static; }
  .yx-training-detail { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
}
@media (max-width: 600px) {
  .site-content:has(.yx-brand) { padding: 10px 20px 28px; }
  .yx-brand { padding: 0; }
  .yx-hero { padding: 26px 0 43px; gap: 28px; }
  .yx-hero h1 { font-size: 32px; line-height: 1.4; margin: 24px 0 20px; }
  .yx-lead, .yx-prose { font-size: 15px; line-height: 1.9; }
  .yx-kicker { font-size: 10px; letter-spacing: .1em; }
  .yx-hero-image .yx-zoom { padding: 5px; }
  .yx-hero-image figcaption { font-size: 9px; }
  .yx-image-hint { bottom: 9px; right: 9px; font-size: 9px; }
  .yx-text-link { margin-top: 20px; font-size: 12px; }
  .yx-section { padding: 43px 0; }
  .yx-brand h2 { font-size: 26px; margin-top: 13px; }
  .yx-story, .yx-team-section, .yx-history { grid-template-columns: 1fr; gap: 10px; }
  .yx-story h2 { font-size: 31px; }
  .yx-heading { margin-bottom: 25px; }
  .yx-process { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
  .yx-process h3 { font-size: 22px; }
  .yx-process li:not(:last-child):after { content: '↓'; }
  .yx-step-tools { margin-top: 12px; }
  .yx-cloud { grid-template-columns: 1fr; gap: 30px; padding: 32px 25px; margin-bottom: 43px; }
  .yx-cloud h2 { font-size: 32px; }
  .yx-cloud-flow { border-left: 0; border-top: 1px solid #5b6258; padding: 25px 0 0; }
  .yx-cloud-flow li { margin-top: 18px; }
  .yx-works { grid-template-columns: 1fr; gap: 32px; }
  .yx-work h3 { font-size: 18px; }
  .yx-work-copy > p:not(.yx-kicker) { font-size: 14px; }
  .yx-history-word { display: none; }
  .yx-timeline { margin-top: 22px; }
  .yx-timeline li { grid-template-columns: 67px 1fr; gap: 18px; padding: 23px 0; }
  .yx-year { font-size: 24px; }
  .yx-timeline p { font-size: 14px; }
  .yx-team-grid { grid-template-columns: 1fr; }
  .yx-training-types { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .yx-training-types p { max-width: none; margin-bottom: 10px; }
  .yx-training-detail { padding: 25px; }
  .yx-training-benefits { grid-template-columns: 1fr; gap: 22px; }
  .yx-brand .yx-enterprise-cases-title { font-size: 21px; margin-top: 32px; }
  .yx-partners { gap: 12px; margin-top: 25px; }
  .yx-partner-logo { height: 143px; padding: 12px; }
  .yx-partner-logo img { width: 118px; height: 118px; max-width: 100%; }
  .yx-partners figcaption { padding: 13px 11px; }
  .yx-partners figcaption strong { font-size: 12px; }
  .yx-enterprise-note { flex-direction: column; align-items: flex-start; gap: 16px; }
  .yx-enterprise-note p { font-size: 13px; }
  .yx-contact { padding: 36px 23px; }
  .yx-contact h2 { font-size: 26px; }
  .yx-actions { flex-direction: column; }
  .yx-contact-list { display: block; text-align: left; }
  .yx-contact-list p + p { margin-top: 12px; }
  .yx-contact-list span { display: block; margin: 0; }
  .yx-copyright { padding-right: 38px; text-align: left; }
  .yx-lightbox { width: 95vw; padding: 60px 12px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.yx-brand) { scroll-behavior: smooth; }
  .yx-zoom img { transition: filter .2s; }
  .yx-zoom:hover img { filter: brightness(1.025); }
}

/* Native brand illustration; explicitly a workflow diagram, not a project case. */
.yx-hero-diagram { min-width: 0; padding: 23px 0 0; }
.yx-diagram-header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--yx-line); padding-bottom: 16px; color: var(--yx-accent); font-size: 9px; letter-spacing: .12em; }
.yx-hero-diagram svg { display: block; width: 100%; height: auto; margin: 22px 0 8px; }
.yx-hero-diagram figcaption { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--yx-line); padding-top: 20px; font-size: 14px; }
.yx-hero-diagram b { font-family: Georgia, serif; font-weight: 400; color: var(--yx-accent); font-size: 12px; margin-right: 9px; }
.yx-hero-diagram i { font-style: normal; color: #9ba28e; }
.yx-hero-diagram .yx-diagram-note { margin-top: 14px; font-size: 10px; color: var(--yx-muted); letter-spacing: .08em; }
@media(max-width:600px) { .yx-hero-diagram { padding-top: 5px; } .yx-hero-diagram figcaption { font-size: 13px; padding-top: 15px; } }

.yx-audience { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 64px; border-top: 1px solid var(--yx-line); padding: 38px 0 44px; }
.yx-audience h2 { font-size: 22px; margin: 9px 0; }
.yx-audience > div > p:last-child { font-size: 13px; color: var(--yx-muted); }
.yx-audience-numbers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin: 0; }
.yx-audience-numbers > div { border-left: 1px solid var(--yx-line); padding-left: 30px; display: flex; flex-direction: column; }
.yx-audience-numbers dt { order: 2; color: var(--yx-muted); font-size: 13px; margin-top: 8px; }
.yx-audience-numbers dd { margin: 0; font-size: clamp(38px,4vw,54px); font-weight: 400; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yx-audience-numbers dd span { font-size: 23px; margin-left: 5px; color: var(--yx-accent); }
@media(max-width:780px) { .yx-audience { gap: 30px; } .yx-audience-numbers { gap: 16px; } .yx-audience-numbers > div { padding-left: 18px; } }
@media(max-width:600px) { .yx-audience { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; } .yx-audience h2 { font-size: 22px; } .yx-audience-numbers dd { font-size: 40px; } .yx-audience-numbers dd span { font-size: 20px; } }