/* About page (page-about.php): hero (2 slides), vision/mission/purpose, pursuit band, core values (core-values.css), thinking, closing. */
.c-about :where(h1, h2, p, ul) { margin: 0; }
.c-about :where(ul) { padding: 0; list-style: none; }
.c-about [hidden] { display: none; }
.c-about { overflow-x: clip; }

.c-about-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 665px; padding-block: 130px; color: #fff; background: linear-gradient(var(--c-crimson) 28.1%, var(--c-crimson-dark) 141.9%); }
.c-about-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/about/hero.webp") left bottom / cover no-repeat; mix-blend-mode: color-burn; opacity: .85; }
.c-about-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(115, 115, 115, .35), rgba(217, 217, 217, 0)); mix-blend-mode: multiply; }
.c-about-hero__inner { padding-top: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 23px; }
.c-about-hero__slides { width: 904px; max-width: 100%; text-align: right; }
.c-about-hero__slide { display: grid; justify-items: end; gap: 11px; min-height: 338px; align-content: center; }
.c-about-hero__lead { font: 500 23px/1.3 var(--font-display); }
.c-about-hero__title { font: 500 52px/59px var(--font-display); }
.c-about-hero__slide + .c-about-hero__slide .c-about-hero__title { font-size: 44px; line-height: 50px; }
.c-about-hero__text { max-width: 745px; font: 400 17px/1.386 var(--font-ui); }
.c-about-hero__slide + .c-about-hero__slide .c-about-hero__text { max-width: 645px; font-size: 18px; }
.c-about-hero__nav { display: grid; flex: none; gap: 11px; width: 60px; }
.c-about-hero__arrow { display: grid; place-items: center; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; }
.c-about-hero__arrow img { display: block; width: 42px; height: 42px; }
.c-about-hero__arrow--up img { transform: rotate(-90deg); }
.c-about-hero__arrow--down img { transform: rotate(90deg); }
.c-about-hero__arrow[hidden] { display: block; visibility: hidden; }

.c-about-pillars { background: #fff; color: #000; }
.c-about-pillars__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; box-sizing: border-box; min-height: 393px; padding-block: 77px 40px; }
.c-about-pillar { display: grid; gap: 20px; align-content: start; flex: 1 1 0; max-width: 367px; }
.c-about-pillar__head h2 { font: inherit; }
.c-about-pillar__head { display: flex; align-items: flex-end; gap: 14px; color: var(--c-crimson); font: 500 44px/50px var(--font-display); }
.c-about-pillar__rule { flex: 1 0 0; min-width: 1px; height: 1px; margin-bottom: 8px; background: var(--c-crimson); }
.c-about-pillar p { font: 400 17px/1.386 var(--font-ui); }

.c-about-pursuit { display: grid; place-content: center; justify-items: center; gap: 27px; height: 354px; padding-inline: 20px; color: #fff; text-align: center; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), #191717 url("../img/about/pursuit.webp") center / cover no-repeat; }
.c-about-pursuit__script { font: 400 96px/103px "UTM Yen Tu", var(--font-display); white-space: nowrap; }
.c-about-pursuit__sub { font: 500 26px/32px var(--font-display); }

.c-home-about--page .c-home-about__inner { min-height: 740px; }

.c-about-thinking { background: linear-gradient(0deg, var(--c-crimson) 21.3%, #100f0f 88.2%); color: #fff; }
.c-about-thinking__inner { display: flex; align-items: center; gap: 13px; padding-block: 73px; }
.c-about-thinking__copy { display: grid; flex: 1 1 0; gap: 25px; min-width: 0; }
.c-about-thinking__title { font: 500 52px/59px var(--font-display); }
.c-about-thinking__lead { max-width: 640px; margin-top: -17px; font: 500 23px/1.3 var(--font-display); }
.c-about-thinking__label { margin-bottom: -12px; font: 400 18px/1.386 var(--font-ui); }
.c-about-thinking__list { display: grid; gap: 14px; max-width: 515px; font: 400 18px/1.386 var(--font-ui); }
.c-about-thinking__list li { display: flex; align-items: center; gap: 25px; }
.c-about-thinking__icon { flex: none; width: 40px; height: 40px; }
.c-about-thinking__quote { position: relative; flex: none; width: 570px; font: 400 57px/74px "UTM Yen Tu", var(--font-display); }
.c-about-thinking__quote-line { display: block; margin-bottom: -10px; text-align: center; white-space: pre; }
.c-about-thinking__quote-line:nth-of-type(2) { padding-left: 0; text-align: right; }
.c-about-thinking__mark { position: absolute; width: 12px; height: 12px; }
.c-about-thinking__mark--open { top: 12px; left: 95px; }
.c-about-thinking__mark--close { top: 147px; left: 439px; }

.c-about-closing { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 275px; padding: 69px 20px; color: #fff; text-align: center; background: linear-gradient(rgba(34, 32, 32, .88) 30.6%, rgba(57, 19, 28, .88) 68.4%); }
.c-about-closing__art { position: absolute; top: 50%; left: 0; z-index: -1; width: 100%; min-width: 1439px; max-width: none; height: auto; transform: translateY(-50%); mix-blend-mode: multiply; pointer-events: none; }
.c-about-closing__text { max-width: 1192px; font: 450 26px/32px var(--font-display); letter-spacing: .13px; }

@media (max-width: 1099px) {
  .c-about-hero { min-height: 0; padding-block: 120px 56px; }
  .c-about-hero__slide { min-height: 0; }
  .c-about-hero__title, .c-about-hero__slide + .c-about-hero__slide .c-about-hero__title { font-size: 32px; line-height: 38px; }
  .c-about-hero__lead { font-size: 18px; }
  .c-about-hero__text, .c-about-hero__slide + .c-about-hero__slide .c-about-hero__text { font-size: 16px; }
  .c-about-pillars__inner { flex-direction: column; align-items: stretch; gap: 32px; padding-block: 48px; min-height: 0; }
  .c-about-pillar { max-width: none; }
  .c-about-pillar__head { font-size: 34px; line-height: 40px; }
  .c-about-pursuit { height: auto; padding-block: 64px; }
  .c-about-pursuit__script { font-size: 44px; line-height: 56px; white-space: normal; }
  .c-about-pursuit__sub { font-size: 20px; }
  .c-about-thinking__inner { flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 48px; }
  .c-about-thinking__title { font-size: 34px; line-height: 40px; }
  .c-about-thinking__lead { margin-top: 0; font-size: 20px; }
  .c-about-thinking__quote { width: 100%; font-size: 36px; line-height: 48px; }
  .c-about-thinking__quote-line { white-space: normal; }
  .c-about-thinking__mark { display: none; }
  .c-about-thinking__list br, .c-about-closing__text br, .c-about-pillar br, .c-about-hero__text br { display: none; }
  .c-about-closing__text { font-size: 20px; line-height: 28px; }
}