/* ABOUT — latest Figma 644:1671. Loaded after about.css so legacy geometry does not leak in. */
.about_main {
  /* One shared page gutter, 144px on desktop and fluid down to 24px. */
  --about-gutter: var(--y-layout-page-gutter);
  position: relative;
  z-index: 1;
  color: var(--y-palette-slate);
}

/* The reference keeps one viewport-sized image fixed behind the document.
   Opaque neighbouring sections cover it; the transparent philosophy section
   becomes the moving window. */
body:has(.about_main)::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(rgb(0 0 0 / 24%), rgb(0 0 0 / 24%)),
    url("../images/about_story_nature_forest_20261103.jpg") center 46% / cover no-repeat;
  background-color: var(--y-palette-ink);
  pointer-events: none;
}
body:has(.about_main) > .nav_wrap,
body:has(.about_main) > .site_footer,
body:has(.about_main) > .language_fab { z-index: 2; }

.about_main .about_hero {
  position: relative;
  overflow: hidden;
}
.about_main .about_hero_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about_main .about_hero_shade {
  background: linear-gradient(to bottom, transparent 54%, rgba(0,0,0,.28));
}
.about_main .about_hero_copy {
  position: absolute;
  z-index: 2;
  left: var(--about-gutter);
  right: var(--about-gutter);
  color: var(--y-color-surface-warm);
}
.about_main .about_hero_title {
  position: static;
  transform: none;
  color: inherit;
  font-family: "Playfair", serif;
}

/* One continuous artwork is revealed from top to bottom while scrolling. */
.about_main .phillosophy {
  position: relative;
  padding: var(--y-layout-section-space) var(--about-gutter);
}
.about_main .phillosophy_bg {
  position: absolute;
  inset: 0;
  background: #a9b0b6;
}
.about_main .phillosophy_container {
  display: block;
  max-width: none;
  margin: 0;
}
.about_main .phillosophy_img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.about_main .phillosophy_img::before,
.about_main .phillosophy_img::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  background: #a9b0b6;
}
.about_main .phillosophy_img::before {
  top: 0;
  height: var(--phillosophy-window-top, 76%);
}
.about_main .phillosophy_img::after {
  top: calc(var(--phillosophy-window-top, 76%) + var(--phillosophy-window-height, 34%));
  bottom: 0;
}
.about_main .phillosophy_copy {
  position: absolute;
  left: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  will-change: opacity, transform;
}
.about_main .phillosophy_copy h2 {
  margin: 0 0 var(--y-space-24);
  color: inherit;
  font: 500 var(--type-section)/1.3 "Playfair", serif;
  letter-spacing: -.05em;
  word-spacing: .12em;
}
.about_main .phillosophy_copy .about_body {
  width: min(100%, 739px);
  margin: 0 auto;
  color: inherit;
}

.about_main .fomular {
  padding: var(--y-layout-section-space) var(--about-gutter);
  background: #fff;
}
.about_main .fomular_item {
  margin: 0;
}
.about_main .fomular_img,
.about_main .fomular_03 .fomular_img {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
}
.about_main .fomular_img img,
.about_main .fomular_02 .fomular_img img,
.about_main .fomular_03 .fomular_img img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.about_main .fomular_01 .fomular_img img {
  top: -95.36%;
  height: 203.09%;
}
.about_main .fomular_02 .fomular_img img {
  top: -30.65%;
  height: 150.85%;
}
.about_main .fomular_03 .fomular_img img {
  top: -49.81%;
  height: 164.37%;
}
.about_main .fomular_copy {
  align-self: stretch;
  justify-content: center;
  padding: 0;
  text-align: left;
}
.about_main .fomular_01 .fomular_copy,
.about_main .fomular_03 .fomular_copy { align-items: flex-start; text-align: left; }
.about_main .fomular_02 .fomular_copy { align-items: flex-end; text-align: right; }

/* Sticky distance and the Figma composition are intentionally separate. */
.about_main .promise_design > .container {
  width: auto;
  height: auto;
}
.about_main .promise_txt_wrap {
  position: absolute;
  z-index: 2;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: space-between;
}
.about_main .promise_title_wrap { position: relative; z-index: 2; color: var(--y-palette-brand-blue); }
.about_main .promise_title_wrap p {
  color: var(--y-palette-brand-blue);
  font-family: "Playfair", serif;
  font-size: calc(var(--type-display) / var(--promise-scale, 1));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
}
.about_main .promise_title_wrap p em {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.about_main .promise_img_main {
  transform: none;
}
.about_main .promise_img_left {
  top: 224px;
  left: 76px;
  width: 349px;
  height: 204px;
}
.about_main .promise_img_top_right {
  top: 3px;
  left: 1426px;
  width: 325px;
  height: 293px;
  overflow: hidden;
}
.about_main .promise_img_top_right img {
  height: 406px;
  object-fit: cover;
  object-position: center;
}
.about_main .promise_img_bottom_left {
  top: 758px;
  left: 453px;
  width: 274px;
  height: 401px;
}
.about_main .promise_img_bottom_right {
  top: 644px;
  left: 1285px;
  width: 281px;
  height: 375px;
  overflow: hidden;
}
.about_main .promise_img_bottom_right img {
  height: 375px;
  object-fit: cover;
  object-position: center top;
}
.about_main .promise_editorial {
  width: 803px;
  color: var(--y-color-text-accent);
  font-family: "Playfair", serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.56px;
}
.about_main .promise_editorial > span { display:block; }
.about_main .promise_subcopy { color:var(--y-color-text-primary); font: 300 var(--type-body)/1.5 "Pretendard", sans-serif; letter-spacing: -.18px; }

.about_main .value {
  height: 950px;
  padding: var(--y-layout-section-space) var(--about-gutter);
  background: var(--y-palette-ink);
  isolation: isolate;
}
.about_main .value_bg_wrap { overflow: hidden; background: var(--y-palette-ink); }
.about_main .value_bg.is_previous { z-index: 0; opacity: 1; }
.about_main .value_bg.is_active { z-index: 1; }
.about_main .value_bg { object-position: center; }
.about_main .value_container { align-items: center; }
.about_main .value_intro {
  display: flex;
  flex: 0 0 816px;
  width: 816px;
  flex-direction: column;
  justify-content: center;
}
.about_main .value_cards { justify-content: center; }
.about_main .value_card {
  width: 770px;
  height: 180px;
  padding: 30px;
  gap: 20px;
  text-align: left;
}

.about_motion_item {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 780ms ease, transform 780ms cubic-bezier(.22,1,.36,1);
}
.about_motion_item.is_inview { opacity: 1; transform: none; }

@media (max-width: 1440px) {
  .about_main .value_intro .about_body .i18n-line {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .about_main .value_cards {
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  .about_main .value_card {
    width: 100%;
    min-width: 0;
    padding: 24px;
  }
  .about_main .value_card_copy .i18n-line {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

@media (max-width: 1024px) {
  .about_main .phillosophy_copy { max-width: 700px; }
  .about_main .value { height: auto; min-height: 850px; }
  .about_main .value_container { display: flex; flex-direction: column; align-items: stretch; gap: 60px; }
  .about_main .value_intro { width: 100%; flex-basis: auto; }
  .about_main .value_cards { align-items: stretch; }
  .about_main .value_card { width: 100%; }
}

@media (max-width: 768px) {
  .about_main .value { min-height: 780px; }
}


@media (max-width: 520px) {
  .about_main .value { min-height: 760px; }
}

/* 2026-09-17 — restore the section directly below the About hero without cropping. */
.about_main .phillosophy_bg {
  top: auto;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 663;
  object-fit: contain;
  object-position: center bottom;
}
html.about_motion_ready .about_main .phillosophy_img {
  display: none;
}

/* 2026-09-17 — Figma 644:1671 / 644:1710 precision pass. */

/* ABOUT YURIU — 1011:1451: content + equal 124px padding, not an extra
   160vh scroll stage. Text may grow naturally when a translation wraps. */
.about_main .phillosophy {
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  color: var(--y-color-text-on-dark);
}
.about_main .phillosophy_bg {
  display: none;
}
.about_main .phillosophy_container {
  position: relative;
  top: auto;
  z-index: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.about_main .phillosophy_img,
html.about_motion_ready .about_main .phillosophy_img {
  display: none;
}
.about_main .phillosophy_img::before,
.about_main .phillosophy_img::after { display: none; }
.about_main .phillosophy_copy {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  width: min(816px, 100%);
  margin: 0 auto;
  color: var(--y-color-text-on-dark);
  opacity: 1;
  text-align: center;
  transform: none;
}
.about_main .phillosophy_copy h2,
.about_main .phillosophy_copy .about_body { color: var(--y-color-text-on-dark); }
.about_main .phillosophy_copy .i18n-spacer { height: 1.5em; }
.about_main .phillosophy_pause { display: block; }
#yuriu-site .about_main .phillosophy_copy strong { font-weight: 700; }
.about_main :is(.phillosophy_copy h2,.fomular_intro h2,.value_intro h2,.promise_title_wrap p,.promise_editorial) { font-variation-settings: "opsz" 12, "wdth" 100; }
.about_main .phillosophy_copy h2 {
  display: flex;
  justify-content: center;
}
.about_main .phillosophy_copy .phillosophy_title_clip {
  display: inline-block;
  overflow: hidden;
  box-sizing: content-box;
  padding: .12em .025em .16em;
  margin: -.12em -.025em -.16em;
}
.about_main .phillosophy_copy .phillosophy_title_space {
  display: inline-block;
  flex: 0 0 .26em;
}
.about_main .phillosophy_copy .phillosophy_title_char {
  display: block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.about_main .phillosophy_copy .i18n-line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.about_main .phillosophy_copy.is_reveal_ready:not(.is_revealed) .phillosophy_title_char {
  opacity: .97;
  transform: translate3d(0, 14px, 0);
}
.about_main .phillosophy_copy.is_reveal_ready.is_revealed .phillosophy_title_char {
  transition:
    transform 900ms cubic-bezier(.22, 1, .36, 1),
    opacity 620ms ease-out;
  transition-delay: calc(var(--char-index) * 24ms);
}
.about_main .phillosophy_copy.is_reveal_ready:not(.is_revealed) .i18n-line {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.about_main .phillosophy_copy.is_reveal_ready.is_revealed .i18n-line {
  transition:
    transform 860ms cubic-bezier(.22, 1, .36, 1),
    opacity 760ms ease-out;
  transition-delay: calc(280ms + var(--line-index) * 68ms);
}

@media (prefers-reduced-motion: reduce) {
  .about_main .phillosophy_copy,
  .about_main .phillosophy_copy .phillosophy_title_char,
  .about_main .phillosophy_copy .i18n-line {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* OUR STANDARD: exact Figma colors and 1920-grid geometry. */
.about_main .fomular { color: var(--y-palette-ink); }
/* Intro → rows: the section rhythm (124px at 1920, fluid down to 64px). */
.about_main .fomular_wrap { gap: var(--y-layout-section-space); }
.about_main .fomular_intro { width: 816px; max-width: 100%; }
.about_main .fomular_intro h2 { margin-bottom: 30px; color: var(--y-palette-brand-blue); }
.about_main .fomular_intro .about_body { width: 739px; max-width: 100%; color: var(--y-palette-ink); }
/* Figma rows use the section gutter only: no second nested gutter. */
.about_main .fomular_contents { width: 100%; padding-inline: 0; box-sizing: border-box; }
.about_main .fomular_item {
  display: grid;
  grid-template-columns: minmax(0,744fr) minmax(0,816fr);
  gap: 72px;
  width: 100%;
  height: auto;
  min-height: 420px;
}
.about_main .fomular_02 { grid-template-columns: minmax(0,671fr) minmax(0,889fr); }
.about_main .fomular_03 { grid-template-columns: minmax(0,744fr) minmax(0,816fr); height: auto; min-height: 436px; }
.about_main .fomular_img,
.about_main .fomular_02 .fomular_img { width: 100%; height: 100%; min-height: 420px; }
.about_main .fomular_03 .fomular_img { width: 100%; height: 100%; min-height: 436px; }
.about_main .fomular_copy { gap: 22px; padding-block: clamp(32px, 6.458333vw, 124px); }
.about_main .fomular_copy h3 { color: var(--y-palette-brand-blue); line-height: 1.3; }
.about_main .fomular_copy .about_body { color: var(--y-palette-ink); }
.about_main .fomular_copy .about_body .i18n-line {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.about_main .fomular_img img,
.about_main .fomular_02 .fomular_img img,
.about_main .fomular_03 .fomular_img img {
  transform: translate3d(0, var(--about-parallax-y, 0px), 0);
}

/* PROMISE: keep the Figma layout, but let the surrounding images pass one by one while scrolling. */
.about_main .promise {
  position: relative;
  height: 300vh;
  min-height: 0;
  padding: 0;
  overflow: clip;
  background: var(--y-color-surface-default);
}
.about_main .promise_sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  background: var(--y-color-surface-default);
}
.about_main .promise_design {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1168px;
  transform: translate3d(-50%, -50%, 0) scale(var(--promise-scale, 1));
  transform-origin: center;
}
.about_main .promise_design > .container { position: absolute; inset: 0; }
.about_main .promise_txt_wrap {
  top: 124px;
  left: 50%;
  width: 803px;
  height: 920px;
  transform: translateX(-50%);
}
.about_main .promise_title_wrap,
.about_main .promise_title_wrap p,
.about_main .promise_title_wrap p em { color: var(--y-palette-brand-blue); }
.about_main .promise_title_wrap { height: calc(var(--type-display) * 1.2 / var(--promise-scale, 1)); }
#yuriu-site .about_main .promise_title_wrap p { width: max-content; max-width: none; }
.about_main .promise_title_wrap p + p {
  position: absolute;
  top: calc(var(--type-display) * .765625 / var(--promise-scale, 1));
  left: 50%;
  transform: translateX(-50%);
}
#yuriu-site .about_main .promise_title_wrap p em {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: 500;
  font-style: italic;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 12, "wdth" 100;
}
.about_main .promise_article_wrap { width: 803px; }
.about_main .promise_editorial.contents_title_small_playitalic {
  width: 803px;
  margin: 0;
  color: var(--y-color-text-accent, #0b328b);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.about_main .promise_subcopy.contents_article_medium_l {
  width: 803px;
  margin: 0;
  color: var(--y-color-text-primary, #202737);
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: normal;
}
/* The 1920px scene is scaled down by --promise-scale (set in about-motion.js).
   Divide by it so this copy is still rendered at the shared caption/body
   sizes instead of shrinking to ~9–13px on laptop screens. */
#yuriu-site .about_main .promise_design .promise_editorial { font-size: calc(var(--type-caption) / var(--promise-scale, 1)); }
#yuriu-site .about_main .promise_design .promise_subcopy { font-size: calc(var(--type-body) / var(--promise-scale, 1)); }
/* Keep at least ~560px of on-screen measure so the larger copy does not wrap
   into the main image when the scene is scaled down near 1025px. */
.about_main .promise_design .promise_article_wrap,
.about_main .promise_design .promise_editorial,
.about_main .promise_design .promise_subcopy { width: max(803px, calc(560px / var(--promise-scale, 1))); }
.about_main .promise_subcopy.contents_article_medium_l > span {
  display: block;
  font: inherit;
  color: inherit;
}
.about_main .promise_img_main {
  z-index: 4;
  top: 335px;
  left: 790px;
  width: 340px;
  height: 498px;
  box-shadow: 0 55px 55px rgba(0,0,0,.09), 0 14px 31px rgba(0,0,0,.10);
}
.about_main .promise_flow_track {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: 4400px;
  height: 1251px;
  pointer-events: none;
  /* The first frame is already composed; JS only moves this existing scene. */
  transform: translate3d(var(--promise-flow-x, 0px), 0, 0);
  will-change: transform;
}
.about_main .promise_flow_track .promise_img_bottom_left { top: 647px; left: 262px; width: 270px; height: 396px; }
.about_main .promise_flow_track .promise_img_left { top: 220px; left: 1312px; width: 404px; height: 238px; }
.about_main .promise_flow_track .promise_img_bottom_right { top: 644px; left: 2350px; width: 281px; height: 375px; }
.about_main .promise_flow_track .promise_img_top_right { top: 220px; left: 3370px; width: 325px; height: 293px; }
.about_main .promise_float_img {
  position: absolute;
  z-index: 1;
  opacity: 1;
  transform-origin: center center;
  transform: none;
}
.about_main .promise.is_scroll_ready .promise_flow_track .promise_float_img {
  transform: none;
}
.about_main .promise_img_main img,
.about_main .promise_img_left img,
.about_main .promise_img_top_right img,
.about_main .promise_img_bottom_left img,
.about_main .promise_img_bottom_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1700px) {
  .about_main .fomular_item,
  .about_main .fomular_03 { grid-template-columns: minmax(0,744fr) minmax(0,816fr); }
  .about_main .fomular_02 { grid-template-columns: minmax(0,671fr) minmax(0,889fr); }
  .about_main .fomular_img,
  .about_main .fomular_02 .fomular_img,
  .about_main .fomular_03 .fomular_img { width: 100%; }
}

/* Laptop: scale the whole OUR VALUE composition continuously instead of
   falling back to the fixed 1920px column widths between breakpoints. */
@media (min-width: 1025px) and (max-width: 1700px) {
  .about_main .value {
    height: clamp(800px, calc(57.692vw - 30.769px), 950px);
  }
  .about_main .value_container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(40px, 3.15vw, 54px);
  }
  .about_main .value_intro {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
  .about_main .value_intro .about_body {
    width: 100%;
    max-width: 100%;
  }
  .about_main .value_intro .about_body .i18n-line,
  .about_main .value_card_copy .i18n-line {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .about_main .value_cards {
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  .about_main .value_card {
    width: 100%;
    min-width: 0;
    padding: clamp(24px, 1.765vw, 30px);
  }
}

@media (max-width: 1024px) {
  .about_main .phillosophy {
    height: auto;
    min-height: 0;
  }
  .about_main .fomular_contents { padding-inline: 0; }
  .about_main .fomular_item,
  .about_main .fomular_02,
  .about_main .fomular_03 {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    flex-direction: column;
    gap: 30px;
  }
  /* Stacked rows (image above copy) need space between them from 1024px,
     not only from 768px. */
  .about_main .fomular_item:not(:last-child) { margin-bottom: var(--y-space-72); }
  .about_main .fomular_img,
  .about_main .fomular_02 .fomular_img,
  .about_main .fomular_03 .fomular_img {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 816 / 420;
  }
  .about_main .fomular_copy,
  .about_main .fomular_01 .fomular_copy,
  .about_main .fomular_02 .fomular_copy,
  .about_main .fomular_03 .fomular_copy {
    order: 2;
    width: 100%;
    padding-block: 0;
    align-items: flex-start;
    text-align: left;
  }
  .about_main .fomular_copy .about_body { max-width: 720px; }
  .about_main .promise { height: 260vh; min-height: 0; }
}

@media (max-width: 768px) {
  .about_main .phillosophy {
    height: auto;
    min-height: 0;
  }
  .about_main .promise { height: 220svh; min-height: 0; }
  .about_main .promise_sticky { height: 100svh; min-height: 0; }
  .about_main .value_intro .about_body { max-width: 680px; }
}

@media (max-width: 520px) {
  .about_main .fomular_intro .about_body .i18n-line,
  .about_main .fomular_copy .about_body .i18n-line { display: inline; }
  .about_main .promise { height: 200svh; }
  .about_main .value_container { gap: 42px; }
  .about_main .value_card { padding: 24px 20px; }
}

/* Keep supporting copy readable while the 1920px image scene scales. */
.about_main .promise_readable_copy { display: none; }
@media (max-width: 1024px) {
  .about_main .promise_design .promise_article_wrap { display: none; }
  /* On narrow screens, anchor the photo to the actual responsive title's
     bottom, leaving only 8px of overlap rather than covering a whole word. */
  .about_main .promise_img_main { top: calc(130px + (var(--type-display) * 1.96875 - 8px) / var(--promise-scale, 1)); }
  .about_main .promise_readable_copy {
    position: absolute;
    z-index: 5;
    top: calc(50% + 44px * var(--promise-scale, 1) + var(--type-display) * 1.96875 + 16px);
    left: 50%;
    display: flex;
    width: min(760px, calc(100% - 80px));
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: var(--y-color-text-accent, #0b328b);
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .about_main .promise_readable_copy p { margin: 0; color: inherit; }
  .about_main .promise_readable_editorial {
    font: italic 300 var(--type-caption)/1.3 "Playfair", serif;
    letter-spacing: -.02em;
  }
  .about_main .promise_readable_subcopy {
    color: var(--y-color-text-primary, #202737) !important;
    font: 300 var(--type-body)/1.5 "Pretendard", sans-serif;
    letter-spacing: -.01em;
    word-break: keep-all;
  }
}
@media (max-width: 768px) {
  /* JS already scales against a 960px canvas here; keep CSS geometry in sync. */
  .about_main .promise_design { width: 960px; height: 1000px; }
  .about_main .promise_img_main { left: 310px; }
  .about_main .promise_flow_track .promise_img_bottom_left { left: 40px; top: 640px; width: 200px; height: 293px; }
  .about_main .promise_flow_track .promise_img_left { left: 680px; top: 220px; width: 260px; height: 153px; }
  .about_main .promise_flow_track .promise_img_bottom_right { left: 2128px; top: 640px; width: 220px; height: 293px; }
  .about_main .promise_flow_track .promise_img_top_right { left: 2768px; top: 220px; width: 240px; height: 216px; }
  .about_main .promise_readable_copy {
    top: calc(50% + 128px * var(--promise-scale, 1) + var(--type-display) * 1.96875 + 16px);
    width: calc(100% - 40px);
  }
}

/* Current Figma value-card colours; interactions still use is_active. */
.about_main .value_bg_wrap::after { display: none; }
.about_main .value_intro h2 {
  margin-bottom: 30px;
  color: var(--y-color-text-on-dark);
  line-height: 1.3;
  letter-spacing: -.05em;
  text-transform: none;
}
.about_main .value_card {
  background: var(--y-color-surface-muted);
  color: var(--y-color-text-on-dark);
  opacity: .5;
}
.about_main .value_card.is_active {
  background: var(--y-color-surface-default);
  color: var(--y-color-text-about-accent);
  opacity: 1;
}
.about_main .value_card h3,
.about_main .value_card_copy { opacity: .62; }
.about_main .value_card h3 { line-height: 1.5; }
.about_main .value_card_copy { font-weight: 300; }
.about_main .promise_title_wrap { gap: 6px; }

/* Value cards shrink continuously, never jump at a breakpoint.
   Copy and titles reuse the existing registered meta/body roles. */
.about_main .value_card h3 { font-size: var(--type-body); }
.about_main .value_card_copy { font-size: var(--type-meta); line-height: 1.35; }
@media (min-width: 1025px) and (max-width: 1700px) {
  .about_main .value_card { height: auto; min-height: clamp(155px, calc(13.462vw - 48.85px), 180px); }
}
@media (max-width: 1024px) {
  .about_main .value_card { height: auto; min-height: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .about_main .phillosophy_bg,
  .about_main .phillosophy_copy,
  .about_main .fomular_img img { transform: none; clip-path: none; opacity: 1; will-change: auto; }
  .about_main .promise.is_scroll_ready .promise_float_img {
    transform: none;
  }
  .about_main .promise_flow_track {
    display: block;
    transform: none;
    will-change: auto;
  }
  .about_main .promise_flow_track .promise_img_bottom_right,
  .about_main .promise_flow_track .promise_img_top_right { display: none; }
  html.about_motion_ready .about_main .phillosophy_img { display: none; }
  .about_motion_item { opacity: 1; transform: none; transition: none; }
}

/* Shape of YURIU: current Figma copy and discrete image assets, not section captures. */
.about_main .fomular_intro { width: min(100%,816px); }
.about_main .fomular_intro .about_body { width: 100%; }
.about_main .fomular_intro .about_body .i18n-line { display: block; }
.about_main .fomular_contents { padding-inline: 0; }
.about_main .fomular_item { display: grid; grid-template-columns: minmax(0,816fr) minmax(0,744fr); gap: var(--y-space-72); min-height: 420px; }
.about_main .fomular_02 { grid-template-columns: minmax(0,744fr) minmax(0,816fr); }
.about_main .fomular_02 .fomular_img { grid-column: 2; grid-row: 1; }
.about_main .fomular_02 .fomular_copy { grid-column: 1; grid-row: 1; }
.about_main .fomular_img, .about_main .fomular_03 .fomular_img { width: 100%; height: 420px; }
.about_main .fomular_03 .fomular_img { height: 436px; }
.about_main .fomular_img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; }
.about_main .fomular_01 .fomular_img img { top: -6.46%; height: 124.01%; }
.about_main .fomular_02 .fomular_img img { top: -30.65%; height: 150.85%; }
.about_main .fomular_03 .fomular_img img { top: 0; height: 100%; object-fit: cover; }
.about_main .fomular_copy { gap: 22px; min-width: 0; }
.about_main .fomular_copy h3 { margin: 0; }
.about_main .fomular_copy .about_body { margin: 0; white-space: pre-line; color: var(--y-color-text-primary); }
@media (max-width: 1100px) { .about_main .fomular_item { gap: var(--y-space-40); } }
@media (max-width: 768px) {
  .about_main .fomular_item, .about_main .fomular_02 { display: flex; flex-direction: column; gap: var(--y-space-32); min-height: 0; margin-bottom: var(--y-space-64); }
  .about_main .fomular_item:last-child { margin-bottom: 0; }
  .about_main .fomular_img, .about_main .fomular_03 .fomular_img { flex: none; width: 100%; height: auto; aspect-ratio: 816 / 420; }
  .about_main .fomular_02 .fomular_img { order: 0; }
  .about_main .fomular_02 .fomular_copy { order: 1; text-align: left; align-items: flex-start; }
}