@charset "utf-8";

/* =========================
   Page Header
   ========================= */
.page-header {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem);
  color: #fff;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--black) no-repeat 50% / cover;
  }

  &.nav-about::before {
    background-image: url("/assets/images/sub/sub1_1.jpg");
  }
  &.nav-about-ceo::before {
    background-image: url("/assets/images/sub/sub1_ceo.jpg");
  }
  &.nav-about-certi::before {
    background-image: url("/assets/images/sub/sub1_serti.png");
  }
  &.nav-about-ci::before {
    background-image: url("/assets/images/sub/sub1_ci.jpg");
  }
  &.nav-about-history::before {
    background-image: url("/assets/images/sub/sub1_history.jpg");
  }
  &.nav-about-company::before {
    background-image: url("/assets/images/sub/company/bg-company.jpg");
  }
  &.nav-starpoly::before {
    background-image: url("/assets/images/sub/starpoly/bg1.jpg");
  }
  &.nav-metapoly::before {
    background-image: url("/assets/images/sub/metapoly/bg1.jpg");
  }
  &.nav-nanopoly::before {
    background-image: url("/assets/images/sub/nanopoly/bg1.jpg");
  }
  &.nav-rnd::before {
    background-image: url("/assets/images/sub/rnd-proses/bg1.jpg");
  }
  &.nav-rnd-r::before {
    background-image: url("/assets/images/sub/rnd-research/bg1.jpg");
  }
  &.nav-esg::before {
    background-image: url("/assets/images/sub/esg/bg1.png");
  }
  &.nav-release::before {
    background-image: url("/assets/images/sub/press-release/bg1.jpg");
  }
  &.nav-online::before {
    background-image: url("/assets/images/sub/online/bg1.jpg");
  }
  &.nav-terms::before {
    background-image: url("/assets/images/sub/term.jpg");
  }

  .page-header-container {
    display: grid;
  }
  .heading {
    font: var(--font-size-50) var(--font-sans);
  }

  @media (prefers-reduced-motion: no-preference) {
    &::before {
      animation: page-header-bg 1.8s both;
    }
    .heading {
      animation: slide-up 0.6s 0.2s both;
      opacity: 0;
    }
  }
}

@keyframes page-header-bg {
  0% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@keyframes slide-up {
  0% {
    translate: 0 40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes slide-right {
  0% {
    translate: -40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}

/* =========================
   Local Nav
   ========================= */
.local-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 7;
  font: var(--font-size-18-to-14) var(--font-sans);
  background-color: rgba(255, 255, 255, 0.2);

  .container {
    display: flex;
    height: 3.88888889em;
  }
  .home {
    display: grid;
    place-items: center;
    height: 100%;
    aspect-ratio: 1;
    background: rgba(163, 32, 36, 1);
  }
  .home-icon {
    display: block;
    width: 1.05555556em;
    height: auto;
    fill: #fff;
  }

  details {
    position: relative;
  }
  summary {
    font-size: clamp(14rem, calc(18 / var(--container) * 100vw), 18rem);
    font-weight: 400;
    position: relative;
    display: block;
    align-content: center;
    height: 100%;
    padding-inline: 1.66666667em 3.83333333em;
    background: #fff;
    color: var(--black);
    text-align: left;
    min-width: 155rem;
  }
  .details-level-2 summary {
    min-width: 155rem;
    font-weight: 700;
  }

  summary::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto 29rem auto auto;
    width: 0.55555556em;
    aspect-ratio: 1;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    rotate: 45deg;
    translate: 0 -25%;
  }
  [open] summary::after {
    scale: -1;
    translate: 0 25%;
  }

  .nav-menu {
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10rem 30rem #0000000d;
    color: var(--black);
  }
  .details-level-1 .nav-menu-level-2,
  .details-level-2 .nav-menu-level-3 {
    display: none;
  }

  .nav-link {
    display: block;
    padding: 0.7em 1.61111111em;
  }
  @media (any-hover) {
    .nav-link:hover {
      background: #f4f4f4;
    }
  }
}

/* =========================
   Main Layout
   ========================= */
.sub-page {
  min-height: 300px;
  padding-top: 140rem;
  margin-top: 10px;
  padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 140rem);

  .legal-document .page-heading,
  .page-heading-block {
    margin-bottom: 32rem;
    text-align: center;
  }

  .page-heading {
    font-size: 44rem;
    font-weight: 700;
    line-height: 180%;
    margin-bottom: 32px;
  }
  .page-subheading {
    margin-top: 0.125em;
    font-weight: 700;
    font-size: var(--font-size-16);
    color: #999;
  }

  #main:has(.join_area) .sub_title {
    display: none;
  } /* hide common subtitle on member pages */
}

/* =========================
   Breadcrumb inside Page Header
   ========================= */
.page-header .page-header-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
}
.page-header .page-header-container > nav[aria-label="breadcrumb"] {
  position: static;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  color: rgba(255, 255, 255, 0.85);
}
.page-header .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: inline-flex;
    align-items: center;
  }
  li + li::before {
    content: "›";
    margin-inline: 0.5em;
    opacity: 0.7;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
}
.page-header .breadcrumb li:first-child > a {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  font-size: 0;
  line-height: 1;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.6092 6.77452L8.9425 0.374602C8.69248 0.13474 8.35347 0 8 0C7.64653 0 7.30752 0.13474 7.0575 0.374602L0.390841 6.77452C0.266428 6.89307 0.167807 7.03418 0.100711 7.18964C0.0336155 7.34511 -0.000615546 7.51183 8.3779e-06 7.68011V15.36C8.3779e-06 15.5297 0.0702463 15.6925 0.19527 15.8126C0.320295 15.9326 0.489864 16 0.666674 16H6C6.17681 16 6.34638 15.9326 6.47141 15.8126C6.59643 15.6925 6.66667 15.5297 6.66667 15.36V10.8801H9.33333V15.36C9.33333 15.5297 9.40357 15.6925 9.52859 15.8126C9.65362 15.9326 9.82319 16 10 16H15.3333C15.5101 16 15.6797 15.9326 15.8047 15.8126C15.9298 15.6925 16 15.5297 16 15.36V7.68011C16.0006 7.51183 15.9664 7.34511 15.8993 7.18964C15.8322 7.03418 15.7336 6.89307 15.6092 6.77452ZM14.6667 14.72H10.6667V10.2401C10.6667 10.0703 10.5964 9.90755 10.4714 9.78753C10.3464 9.66751 10.1768 9.60008 10 9.60008H6C5.82319 9.60008 5.65362 9.66751 5.5286 9.78753C5.40357 9.90755 5.33334 10.0703 5.33334 10.2401V14.72H1.33334V7.68011L8 1.28019L14.6667 7.68011V14.72Z'/%3E%3C/svg%3E")
      no-repeat center/100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.6092 6.77452L8.9425 0.374602C8.69248 0.13474 8.35347 0 8 0C7.64653 0 7.30752 0.13474 7.0575 0.374602L0.390841 6.77452C0.266428 6.89307 0.167807 7.03418 0.100711 7.18964C0.0336155 7.34511 -0.000615546 7.51183 8.3779e-06 7.68011V15.36C8.3779e-06 15.5297 0.0702463 15.6925 0.19527 15.8126C0.320295 15.9326 0.489864 16 0.666674 16H6C6.17681 16 6.34638 15.9326 6.47141 15.8126C6.59643 15.6925 6.66667 15.5297 6.66667 15.36V10.8801H9.33333V15.36C9.33333 15.5297 9.40357 15.6925 9.52859 15.8126C9.65362 15.9326 9.82319 16 10 16H15.3333C15.5101 16 15.6797 15.9326 15.8047 15.8126C15.9298 15.6925 16 15.5297 16 15.36V7.68011C16.0006 7.51183 15.9664 7.34511 15.8993 7.18964C15.8322 7.03418 15.7336 6.89307 15.6092 6.77452ZM14.6667 14.72H10.6667V10.2401C10.6667 10.0703 10.5964 9.90755 10.4714 9.78753C10.3464 9.66751 10.1768 9.60008 10 9.60008H6C5.82319 9.60008 5.65362 9.66751 5.5286 9.78753C5.40357 9.90755 5.33334 10.0703 5.33334 10.2401V14.72H1.33334V7.68011L8 1.28019L14.6667 7.68011V14.72Z'/%3E%3C/svg%3E")
      no-repeat center/100% 100%;
  }
}

/* =========================
   About: Lead
   ========================= */
.page-lead {
  max-width: clamp(680rem, calc(987 / var(--container) * 100vw), 987rem);
  margin: 0 auto;
  text-align: center;
}
.page-lead-body {
  font-size: clamp(18rem, calc(32 / var(--container) * 100vw), 32rem);
  line-height: 1.9;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: clamp(12rem, calc(16 / var(--container) * 100vw), 16rem);
  .accent {
    color: rgba(163, 32, 36, 1);
    font-weight: 800;
  }
}
.page-lead-sub {
  font-size: clamp(14rem, calc(20 / var(--container) * 100vw), 20rem);
  color: rgba(0, 0, 0, 0.64);
  font-weight: 400;
}

/* =========================
   Strategy
   ========================= */
.strategy {
  margin-top: clamp(60rem, calc(120 / var(--container) * 100vw), 100rem);
  padding-bottom: 69px;
  text-align: center;
  position: relative;
  isolation: isolate;
  --strategy-bg: url("/assets/images/sub/bg-about.png") no-repeat 50% / cover;
  --media-h: clamp(200rem, calc(320 / var(--container) * 100vw), 320rem);
  --cap-h: clamp(112rem, calc(192 / var(--container) * 100vw), 192rem);
  --band-raise: clamp(12rem, calc(24 / var(--container) * 100vw), 24rem);
  --band-extra: clamp(120rem, calc(180 / var(--container) * 100vw), 180rem);
}
.strategy-title {
  font-weight: 600;
  line-height: 160%;
  font-size: clamp(18rem, calc(24 / var(--container) * 100vw), 36rem);
  color: rgba(0, 0, 0, 0.87);
}
.strategy-rule {
  display: inline-block;
  width: 90px;
  height: 4px;
  background: rgba(163, 32, 36, 1);
  margin-top: 24rem;
}

/* grid */
.strategy-grid {
  position: relative;
  margin-top: clamp(28rem, calc(48 / var(--container) * 100vw), 48rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16rem, calc(28 / var(--container) * 100vw), 28rem);

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 324px;
    width: 100vw;
    height: calc(var(--cap-h) + var(--band-extra));
    z-index: -1;
    background: var(--strategy-bg), linear-gradient(#f5f5f5, #f5f5f5);
    background-blend-mode: luminosity;
  }
}

/* card */
.strategy-card {
  background: #fff;
  overflow: hidden;
  height: calc(var(--media-h) + var(--cap-h));
}
.strategy-media {
  background: #eee;
  height: var(--media-h);
}
.strategy-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.strategy-caption {
  width: 100%;
  text-align: left;
  color: #222 ;
  padding: clamp(16rem, calc(28 / var(--container) * 100vw), 28rem);
  height: clamp(112rem, calc(192 / var(--container) * 100vw), 192rem);
  background: #fafafa;
  font-size: clamp(14rem, calc(20 / var(--container) * 100vw), 20rem);
  font-weight: 400;
  line-height: 170%;
}

/* responsive */
@media (width <= 1024px) {
  .strategy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 640px) {
  .strategy-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   CEO Section
   ========================= */
.ceo-message {
  position: relative;
  z-index: 0;
  --woosung-bg: url("/assets/images/sub/text-woosung.png");
  padding-bottom: clamp(64px, calc(4vw + 38.4px), 96px);
}
.ceo-grid {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(360px, 711px) 1fr;
  align-items: start;
  gap: clamp(24px, calc(9.5vw - 36.8px), 100px);
  margin-top: clamp(16px, calc(2vw + 3.2px), 32px);
}
.ceo-message::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(120px, 18vw, 260px);
  background: var(--woosung-bg) no-repeat center bottom;
}
.ceo-photo {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.ceo-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.ceo-copy {
  margin-top: clamp(16px, calc(1.484375vw + 6.5px), 48px);
  max-width: 720px;
}
.ceo-title {
  font-weight: 600;
  font-size: clamp(22px, calc(1.75vw + 10.8px), 36px);
  line-height: 160%;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
}
.ceo-title-rule {
  display: block;
  width: 86px;
  height: 3px;
  background: #a21d1f;
  margin: clamp(12px, calc(1.5vw + 2.4px), 24px) 0
    clamp(18px, calc(4.5vw - 10.8px), 54px);
}
.ceo-text {
  margin: 0 0 24px;
  color: rgba(0, 0, 0, 0.64);
  line-height: 170%;
  font-size: clamp(15px, calc(0.375vw + 12.6px), 18px);
  font-weight: 400;
  max-width: 638px;
}
.ceo-sign {
  margin-top: 220px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  line-height: 160%;
  font-weight: 500;
}
.sep {
  color: rgba(17, 17, 17, 0.32);
}
@media (max-width: 1024px) {
  .ceo-grid {
    grid-template-columns: 1fr;
  }
}

/*  Timeline */
.history-content {
  position: relative;
  --gap: 48px;
  --brand: #a12024;
  padding-bottom: 200px;
  z-index: 1;
}
/* .page-lead .history::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: url("/assets/images/sub/history/back.png") no-repeat 50% / cover;
  z-index: -1;
} */
.history .page-lead-body {
  margin: 0 auto;
  width: 100%;
  max-width: 414px;
}

.history-content .history-list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 118px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.history-content .history-list {
  --line-progress: 0px;
}
.history-content .history-list::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 0;
  border-right: 2px dotted #ddd;
}

.yearblock {
  position: relative;
  width: 100%;
}
/* smooth highlight */
.yearblock .year,
.yearblock .month,
.yearblock .body strong {
  transition: color 0.35s ease, background-color 0.35s ease,
    box-shadow 0.35s ease;
}
.yearblock.is-reached .year {
  color: var(--brand);
}
/* state aktif */
.yearblock.is-active .year {
  color: var(--brand);
}
.yearblock.is-active .month {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8rem 24rem rgba(161, 32, 36, 0.15);
}
.yearblock.is-active .body strong {
  color: var(--brand);
}
/* opsional: garis tengah sedikit ditebalkan saat ada block aktif */
.history-content .history-list:has(.yearblock.is-active)::before {
  border-right-color: #ddd;
}
.history-content .history-list::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: var(--line-progress);
  border-right: 2px solid var(--brand);
  pointer-events: none;
}
.yearblock .year {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 0 10px;
  background: #fff;
  z-index: 1;
  color: #2b2b2b;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 44px);
  white-space: nowrap;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
}
.yearblock[data-side="right"] .year,
.yearblock[data-side="left"] .year {
  left: 50%;
  transform: translateX(-50%);
}

.events-l {
  display: grid;
  gap: 24px;
  padding: 0;
  list-style: none;
  margin-left: 40px;
}
.events-r {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 128px;
}
.event {
  display: grid;
  align-items: center;
  gap: 24px;
  max-width: 560px;
}

.yearblock[data-side="right"] .event {
  grid-template-columns: auto 1fr;
  margin-left: calc(50% + var(--gap));
  text-align: left;
}
.yearblock[data-side="left"] .event {
  grid-template-columns: 1fr auto;
  margin-right: calc(50% + var(--gap));
  text-align: right;
  align-items: center;
}

.month {
  padding: 10px 16px;
  width: 84px;
  height: 84px;
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.87);
  display: grid;
  place-items: center;
  line-height: 1;
}
.month b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 160%;
}
.month em {
  display: block;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.body strong {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 170%;
  color: #000;
}
.body small {
  font-size: 15px;
  font-weight: 400;
  line-height: 170%;
  color: rgba(0, 0, 0, 0.87);
}

/* =========================================================
   TIMELINE — RESPONSIVE (TETAPKAN ORIGINAL > 1440px)
   Tempelkan di PALING BAWAH stylesheet sub page.
   ========================================================= */

/* ---- ≤1440px: scaling & spacing (basis responsif) ---- */
@media (max-width: 1440px) {
  .history-content {
    position: relative;
    --brand: #a12024;
    --gap: 48px; /* jarak dari garis tengah ke konten */
    --line-w: 2px; /* ketebalan garis */
    --year-h: clamp(56px, 8vw, 80px);
    --m-size: clamp(64px, 8vw, 84px); /* kotak bulan */
    --space-y: clamp(56px, 7vw, 120px);
    padding: 0 0 160px;
    z-index: 1;
  }

  /* LIST + CENTER LINE */
  .history-content .history-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-y);
    margin: 0;
    padding: 0;
    list-style: none;
    --line-progress: 0px; /* diubah oleh JS */
  }
  /* garis dasar */
  .history-content .history-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    transform: translateX(-50%);
    border-right: var(--line-w) dotted #ddd;
    z-index: 1;
  }
  /* garis progres */
  .history-content .history-list::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    transform: translateX(-50%);
    height: var(--line-progress);
    border-right: var(--line-w) solid var(--brand);
    z-index: 2;
    will-change: height;
  }

  /* YEAR BLOCK */
  .yearblock {
    position: relative;
    width: 100%;
    padding-top: var(--year-h); /* ruang untuk label tahun */
    scroll-margin-top: 120px;
  }
  .yearblock .year {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: var(--year-h);
    line-height: var(--year-h);
    padding: 0 12px;
    background: #fff;
    color: #2b2b2b;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 44px);
    white-space: nowrap;
    text-align: center;
    z-index: 3;
    transition: color 0.35s ease;
  }
  .yearblock.is-reached .year,
  .yearblock.is-active .year {
    color: var(--brand);
  }

  /* EVENTS */
  .events-l,
  .events-r {
    display: grid;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .event {
    display: grid;
    align-items: center;
    gap: 24px;
    max-width: 560px;
  }
  /* kanan garis */
  .yearblock[data-side="right"] .event {
    grid-template-columns: auto 1fr;
    margin-left: calc(50% + var(--gap));
    text-align: left;
  }
  /* kiri garis */
  .yearblock[data-side="left"] .event {
    grid-template-columns: 1fr auto;
    margin-right: calc(50% + var(--gap));
    text-align: right;
  }

  /* Bulan */
  .month {
    width: var(--m-size);
    height: var(--m-size);
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.87);
    display: grid;
    place-items: center;
    line-height: 1;
    transition: background-color 0.35s ease, color 0.35s ease,
      box-shadow 0.35s ease;
  }
  .month b {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 160%;
  }
  .month em {
    font-size: clamp(13px, 1.6vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
  }

  /* Judul event */
  .body strong {
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 600;
    line-height: 170%;
    color: #000;
    transition: color 0.35s ease;
  }
  .body small {
    font-size: clamp(13px, 1.5vw, 15px);
    color: rgba(0, 0, 0, 0.87);
  }

  /* Fokus */
  .yearblock.is-active .month {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(161, 32, 36, 0.2);
  }
  .yearblock.is-active .body strong {
    color: var(--brand);
  }
}

/* ---- ≤1024px (masih di domain ≤1440) ---- */
@media (max-width: 1440px) and (max-width: 1024px) {
  .history-content {
    --gap: 36px;
  }
}

/* ---- ≤900px: single column (garis ke kiri) ---- */
@media (max-width: 1440px) and (max-width: 900px) {
  .history-content .history-list::before,
  .history-content .history-list::after {
    left: 20px;
    transform: none;
  }

  .yearblock {
    padding-top: calc(var(--year-h) + 8px);
  }

  .yearblock .year {
    left: 20px;
    transform: none;
    text-align: left;
    padding: 0 8px;
  }

  /* semua event ke kanan garis */
  .yearblock[data-side="right"] .event,
  .yearblock[data-side="left"] .event {
    margin: 0 0 0 48px;
    grid-template-columns: auto 1fr;
    text-align: left;
  }
}

/* ---- Preferensi pengguna: kurangi animasi ---- */
@media (prefers-reduced-motion: reduce) {
  .history-content .history-list::after {
    transition: none;
  }
  .yearblock .year,
  .month,
  .body strong {
    transition: none;
  }
}

/* =========================
   Awards
   ========================= */
.awards {
  --brand: #a12024;
}
.awards .page-heading-block {
  text-align: center;
  margin-bottom: 70rem;
}
.awards-hero {
  text-align: center;
  margin-top: -6rem;
}
.awards-laurel {
  width: 160rem;
  height: auto;
  display: block;
  margin: 10rem auto 0;
}

.awards-divider {
  display: inline-block;
  width: 1px;
  height: 88rem;
  margin: 18rem auto 24rem;
  background: repeating-linear-gradient(
    to bottom,
    var(--brand) 0 6rem,
    transparent 6rem 12rem
  );
}

.awards-tabs {
  display: flex;
  gap: 14rem;
  justify-content: center;
  margin: 8rem 0 28rem;
}
.awards-tab {
  appearance: none;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #7c7c7c;
  font-size: 15rem;
  line-height: 1;
  padding: 13rem 22rem;
  border-radius: 999rem;
  cursor: pointer;
  transition: 0.18s;
  min-width: 150rem;
  &:not(.is-active):is(:hover, :focus-visible) {
    color: var(--brand);
    border-color: var(--brand);
  }
  &.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }
}
.awards-panel[hidden] {
  display: none !important;
}

.awards-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 72rem 42rem;
  padding: 36rem 8rem 64rem;
  list-style: none;
  margin: 0;
  &::before {
    content: "";
    position: absolute;
    inset: 0 -100vw;
    z-index: -1;
    background: linear-gradient(var(--band), var(--band)) 0 140rem / 100% 320rem
        no-repeat,
      linear-gradient(var(--band), var(--band)) 0 calc(140rem + 320rem + 72rem) /
        100% 320rem no-repeat;
  }
}
@media (max-width: 1100px) {
  .awards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56rem 28rem;
  }
}
@media (max-width: 520px) {
  .awards-grid {
    grid-template-columns: 1fr;
  }
  .loc-info {
    column-gap: 16rem;
  }
  .loc-info .tel,
  .loc-info .fax {
    flex-basis: 100%;
  }
}

.award-card {
  text-align: center;
}
.award-paper {
  width: 220rem;
  height: 300rem;
  margin: 0 auto 18rem;
  background: var(--paper);
  border-radius: 6rem;
  box-shadow: 0 8rem 26rem rgba(0, 0, 0, 0.08), 0 2rem 6rem rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.award-paper img {
  max-width: 90%;
  max-height: 90%;
  display: block;
}
.award-title {
  margin: 0;
  color: var(--title);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.award-meta {
  margin: 0.5em 0 0;
  color: var(--muted);
  font-size: 13rem;
}

/* =========================
   Section Head (decor)
   ========================= */
.section-head {
  display: grid;
  place-items: center;
  gap: 18rem;
  margin: -6rem 0 28rem;
  position: relative;
}
.section-laurel {
  width: clamp(72px, 10vw, 300px);
  height: clamp(36px, 5vw, 98.12px);
  background: url("/assets/images/sub/sayap.svg") no-repeat center/contain;
  display: block;
  position: absolute;
  top: -97px;
}
.section-dots {
  display: block;
  width: 2px;
  height: 88rem;
}

/* Tabs (pill) — shared */
.tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(24px, 4vw, 56px);
}
.tab {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  font: 500 clamp(14px, 1.2vw, 16px) / 1 var(--font-sans, system-ui);
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 285px;
  width: 100%;
  &.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    max-width: 285px;
  }
}

/* =========================
   Cards Grid
   ========================= */
.cards-grid {
  padding-top: 100px;
  padding-bottom: 100px;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 196px;
  column-gap: clamp(20px, 3vw, 32px);
  &.is-hidden {
    display: none;
  }
}
.card {
  display: grid;
  max-width: 285px;
}
.media {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 24vw, 280px);
  background: #fff;
  position: relative;
}
.media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.caption {
  text-align: center;
}
.title {
  margin: 6px 0 4px;
  font-weight: 700;
  color: #a32024;
  font-size: clamp(14px, 1.3vw, 24px);
  line-height: 170%;
}
.sub {
  margin: 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: clamp(12px, 1.1vw, 16px);
  line-height: 170%;
  font-weight: 400;
}

@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   CI Section
   ========================= */
.ci {
  --brand: #a12024;
}
.ci .page-lead-body {
  width: 100%;
  margin-inline: auto;
  .accent {
    color: var(--brand);
    font-weight: 800;
  }
}

.ci-info2,
.ci-info3 {
  position: relative;
  padding-top: 200px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .ci-media-stack {
    gap: 120px;
  }
  .ci-text12 {
    color: rgba(0, 0, 0, 0.64);
  }
}

.ci-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(100px, calc(180 / 1920 * 100vw), 180px);
  align-items: start;
}
.ci-title {
  position: relative;
  font-weight: 600;
  font-size: clamp(18rem, calc(24 / var(--container) * 100vw), 36px);
  line-height: 160%;
  color: rgba(0, 0, 0, 0.87);
  margin: 0 0 24rem;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 90px;
    height: 4px;
    background: #a32024;
  }
}
.ci-text12,
.ci-text {
  margin: 54px 0 32rem;
  line-height: 180%;
  font-size: clamp(14rem, calc(18 / var(--container) * 100vw), 20px);
  font-weight: 400;
}
.ci-text12 {
  color: #a32024;
}
.ci-text {
  color: rgba(0, 0, 0, 0.64);
}

.ci-media-stack {
  display: grid;
  gap: 32rem;
}
.ci-card {
  display: grid;
  row-gap: 24rem;
  justify-items: center;
}
.ci-card img {
  width: 85%;
  height: auto;
  display: block;
  object-fit: contain;
}
.ci-actions {
  align-items: center;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  border: 1px solid #a32024;
  color: #a32024;
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 32px);
  border-radius: 999rem;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  cursor: pointer;
  &:hover {
    background-color: #a32024;
    color: #fff;
  }
}
@media (any-hover: hover) {
  .btn-pill:hover {
    color: #111;
  }
}
@media (max-width: 980px) {
  .ci-grid {
    grid-template-columns: 1fr;
  }
  .ci-actions {
    text-align: center;
  }
}

/* =========================
   Locations
   ========================= */
.locations {
  position: relative;
  --strategy-bg: url("/assets/images/sub/bg-about.png") no-repeat 50% / cover;
}
.locations .page-heading-block {
  text-align: center;
  margin-bottom: 48rem;
}
.section-head {
  margin: 4rem 0 54px;
} /* reuse */

.loc {
  position: relative;
  padding-block-end: clamp(24rem, calc(48 / var(--container) * 100vw), 56rem);
}
.loc + .loc {
  margin-top: clamp(36rem, 7vw, 200rem);
}

.locations::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  width: 100vw;
  height: 842px;
  z-index: -1;
  background: var(--strategy-bg), linear-gradient(#f5f5f5, #f5f5f5);
  background-blend-mode: luminosity;
}

.loc-name {
  margin: 0 0 10rem;
  font-weight: 600;
  font-size: 36px;
  line-height: 160%;
  color: rgba(0, 0, 0, 0.87);
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 90px;
    height: 4px;
    background: #a32024;
  }
}
.loc-info {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32rem;
  row-gap: 16rem;
  list-style: none;
  margin: 0 0 18rem;
  padding: 54px 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: clamp(14rem, calc(16 / var(--container) * 100vw), 16rem);
  li {
    position: relative;
    margin: 6rem 0;
    line-height: 170%;
    font-size: clamp(14rem, calc(16 / var(--container) * 100vw), 18px);
    color: rgba(0, 0, 0, 0.64);
    &::before {
      content: "";
      display: inline-block;
      width: 18rem;
      height: 19rem;
      margin-right: 10rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      vertical-align: middle;
    }
  }
  .sep {
    opacity: 0.35;
    margin: 0 0.35em;
  }
}
.loc-grid .media {
  border: 2px solid #a12024;
}

.loc-info .addr {
  flex: 1 1 100%;
}
.loc-info .tel,
.loc-info .fax {
  display: flex;
  align-items: center;
}
.loc-info .addr::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><g clip-path='url(%23c)'><path d='M9 18.2959L4.22703 13.523C1.59099 10.8869 1.59099 6.61307 4.22703 3.97703C6.86307 1.34099 11.1369 1.34099 13.773 3.97703C16.409 6.61307 16.409 10.8869 13.773 13.523L9 18.2959ZM12.7123 12.4623C14.7625 10.4121 14.7625 7.08794 12.7123 5.03769C10.6621 2.98744 7.33794 2.98744 5.28769 5.03769C3.23744 7.08794 3.23744 10.4121 5.28769 12.4623L9 16.1746L12.7123 12.4623ZM9 10.25C8.17155 10.25 7.5 9.57845 7.5 8.75C7.5 7.92157 8.17155 7.25 9 7.25C9.82845 7.25 10.5 7.92157 10.5 8.75C10.5 9.57845 9.82845 10.25 9 10.25Z' fill='%23A32024'/></g><defs><clipPath id='c'><rect width='18' height='18' fill='white' transform='translate(0 0.5)'/></clipPath></defs></svg>");
}
.loc-info .tel::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M7.02417 8.51158C7.7265 9.7466 8.7534 10.7735 9.98842 11.4758L10.6518 10.5471C10.8724 10.2384 11.2887 10.143 11.6217 10.3249C12.6768 10.9012 13.8428 11.2515 15.0592 11.3478C15.4492 11.3787 15.75 11.7042 15.75 12.0954V15.4426C15.75 15.8271 15.4591 16.1493 15.0766 16.1886C14.6792 16.2295 14.2783 16.25 13.875 16.25C7.45469 16.25 2.25 11.0453 2.25 4.625C2.25 4.2217 2.27057 3.82078 2.31142 3.42332C2.35073 3.04081 2.67296 2.75 3.05749 2.75H6.40456C6.79583 2.75 7.12135 3.05078 7.15222 3.44082C7.2485 4.65716 7.59877 5.82323 8.17515 6.87833C8.35703 7.2113 8.26162 7.62766 7.95292 7.84818L7.02417 8.51158ZM5.13319 8.0189L6.55815 7.00107C6.1541 6.12885 5.87721 5.20387 5.73545 4.25H3.7568C3.75227 4.37474 3.75 4.49975 3.75 4.625C3.75 10.2169 8.28315 14.75 13.875 14.75C14.0002 14.75 14.1253 14.7478 14.25 14.7432V12.7645C13.2962 12.6228 12.3712 12.3459 11.4989 11.9419L10.4811 13.3668C10.0694 13.2069 9.6717 13.0186 9.29055 12.8046L9.24697 12.7797C7.77728 11.944 6.55601 10.7227 5.72025 9.25303L5.69545 9.20945C5.48137 8.8283 5.29316 8.43065 5.13319 8.0189Z' fill='%23A32024'/></svg>");
}
.loc-info .fax::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M12.75 2C13.1642 2 13.5 2.33579 13.5 2.75V5.75H15.75C16.1642 5.75 16.5 6.08579 16.5 6.5V14C16.5 14.4142 16.1642 14.75 15.75 14.75H13.5V16.25C13.5 16.6642 13.1642 17 12.75 17H5.25C4.83579 17 4.5 16.6642 4.5 16.25V14.75H2.25C1.83579 14.75 1.5 14.4142 1.5 14V6.5C1.5 6.08579 1.83579 5.75 2.25 5.75H4.5V2.75C4.5 2.33579 4.83579 2 5.25 2H12.75ZM12 13.25H6V15.5H12V13.25ZM15 7.25H3V13.25H4.5V12.5C4.5 12.0858 4.83579 11.75 5.25 11.75H12.75C13.1642 11.75 13.5 12.0858 13.5 12.5V13.25H15V7.25ZM6 8V9.5H3.75V8H6ZM12 3.5H6V5.75H12V3.5Z' fill='%23A32024'/></svg>");
}

.media.map {
  min-height: 360rem;
}
.media.map .root_daum_roughmap,
.media.map .root_daum_roughmap .wrap_map,
.media.map .root_daum_roughmap .wrap_controllers {
  width: 100% !important;
  height: 100% !important;
}

.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16rem, 3.2vw, 24rem);
}
.media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.btn-map {
  z-index: 999;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 15px 20px;
  background: #a12024;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  &:hover {
    background: #fff;
    color: #a12024;
    border: 2px solid #a12024;
  }
}
@media (max-width: 980px) {
  .loc-grid {
    grid-template-columns: 1fr;
  }
  .btn-map {
    right: 10rem;
    bottom: 10rem;
  }
  .loc::after {
    height: clamp(220rem, 44vw, 360rem);
    top: 46%;
  }
}

/* =========================
   Product (shared)
   ========================= */
.product {
  --brand: #a12024;
}

.prod-grid {
  display: grid;
  grid-template-columns: 450rem 1fr;
  gap: clamp(20rem, calc(80 / 1920 * 100vw), 80rem);
  margin-bottom: clamp(24rem, 5vw, 100px);
  align-items: center;
}
.prod-logo {
  width: 100%;
  height: auto;
  img {
    max-width: 100%;
    height: auto;
  }
}
.prod-copy {
  display: grid;
  gap: 32px;
}
.prod-title {
  position: relative;
  margin: 0 0 32px;
  font-weight: 600;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.87);
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 90px;
    height: 4px;
    background: #a32024;
  }
}
.prod-text {
  margin: 0;
  color: rgba(0, 0, 0, 0.64);
  line-height: 170%;
  font-size: 20px;
  font-weight: 400;
}
.prod-cta .btn-pill {
  font-size: 18px;
  font-weight: 500;
  background: #a12024;
  color: #fff;
  padding: 12px 16px;
  margin-top: 12rem;
  display: inline-flex;
  align-items: center;
}
.prod-cta .btn-pill:hover {
  background: transparent;
  color: #a12024;
  border: 1px solid #a12024;
}

.product .tabs {
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 16px);
  justify-content: flex-start;
}
.product .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15.5px 27px;
  border-radius: 9999px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  box-sizing: border-box;
}
.product .tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* table */
.table-wrap {
  overflow: auto;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13rem, 1.2vw, 14rem);
  color: #333;
  thead th {
    font-size: 20px;
    background: #fafafa;
    font-weight: 600;
    color: #434343;
    border-top: 2px solid #101820;
    text-align: center;
  }
  th,
  td {
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    padding: 20rem 16rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    text-align: center;
  }
  tbody tr:nth-child(even of :has(> th.group)) > th.group {
    background: #fafafa;
  }
  th.group {
    font-size: 18px;
    background: #fff;
    font-weight: 400;
    color: #434343;
    border-right: 1px solid #eee;
    line-height: 150%;
  }
}
.table-empty {
  border: 1px dashed #e0e0e0;
  border-radius: 8rem;
  padding: 32rem;
  text-align: center;
  color: #999;
}

/* =========================
   METAPOLY / NANOPOLY sections (shared where possible)
   ========================= */
.meta-def,
.meta-tech,
.meta-plas,
.meta-metal,
.meta-pros,
.meta-nano,
.meta-hazard,
.nano-last {
  position: relative;
  padding: clamp(72px, calc(48.06px + 6.385vw), 140px) 0;
}
.meta-def::before,
.meta-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, rgba(126, 126, 126, 0.08) 0%, rgba(126, 126, 126, 0.08) 100%), #FFF;
  z-index: -1;
  overflow-x: hidden;
}
.section-title {
  position: relative;
  margin: clamp(18px, 3vw, 28px) 0 clamp(16px, 2.5vw, 24px);
  font-weight: 600;
  font-size: clamp(24px, calc(19.78px + 1.13vw), 36px);
  color: rgba(0, 0, 0, 0.87);
}
.section-title::after,
.meta-pros .section-title::after,
.meta-plas .section-title::after,
.meta-tech .section-title::after,
.meta-metal .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 90px;
  height: 4px;
  background: #a12024;
}
.meta-plas .section-title,
.meta-pros .section-title,
.meta-tech .section-title,
.meta-metal .section-title {
  text-align: center;
}
.meta-plas .section-title::after,
.meta-pros .section-title::after,
.meta-tech .section-title::after,
.meta-metal .section-title::after {
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
}
.section-title span {
  color: #a12024;
}

.diagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, calc(13.44px + 2.817vw), 54px);
  padding-top: 54px;
}
.diagram-card {
  display: grid;
  gap: 24px;
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
.diagram-caption {
  padding: 24px;
  background: #fff;
  color: rgba(0, 0, 0, 0.64);
  line-height: 170%;
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 18px);
}

.result-grid {
  margin-top: clamp(18px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}
.result-card {
  display: flex;
  margin: 0;
  img {
    padding-top: 54px;
    display: block;
    width: 100%;
    height: auto;
  }
}
.result-arrow {
  margin: 0;
  img {
    display: block;
    width: clamp(120px, 12vw, 220px);
    height: auto;
    margin-inline: auto;
  }
}

.meta-nano::before,
.meta-pros::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: url("/assets/images/sub/bg-about.png") no-repeat 50% / cover,
    linear-gradient(#fff, #fff);
  background-blend-mode: luminosity;
  z-index: -1;
}

.hazard-title,
.meta-metal .hazard-title {
  position: relative;
  margin: clamp(18px, 3vw, 28px) 0 clamp(16px, 2.5vw, 24px);
  font-weight: 600;
  font-size: clamp(24px, calc(19.78px + 1.13vw), 36px);
  color: rgba(0, 0, 0, 0.87);
}
.meta-metal .hazard-title {
  text-align: center;
  span {
    display: block;
    margin-top: clamp(6px, 1.2vw, 12px);
  }
}
.desc-hazard-c {
  position: relative;
  padding-bottom: 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 170%;
  text-align: center;
}
.desc-hazard,
.meta-metal .desc-hazard {
  position: relative;
  padding-bottom: 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 170%;
}
.desc-hazard::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 90px;
  height: 4px;
  background: #a12024;
}
.meta-metal .desc-hazard::after {
  inset-block-start: calc(100% + 12px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 90px;
  block-size: 4px;
  background: #a12024;
}

/* showcase bands */
.meta-showcase,
.nano-showcase,
.meta-exam {
  position: relative;
  z-index: 0;
  color: #222;
  /*margin: 20px;*/
  padding: 140px 0;
}
.meta-showcase::before,
.nano-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, #FAFAFA 0%, #FAFAFA 100%);
  z-index: -1;
  overflow-x: hidden;
}
.nano-showcase::before {
  top: -19px;
}
.meta-exam .meta-title {
  color: rgba(0, 0, 0, 0.87);
}
.meta-exam .meta-title::after {
  content: "";
  display: block;
  width: 86px;
  height: 3px;
  margin: 10px 0 54px;
  background: rgba(163, 32, 36, 1);
  opacity: 0.85;
}
.spec-panel {
  padding-bottom: 100px;
}

.meta-title {
  font-weight: 700;
  font-size: clamp(24px, calc(19.78px + 1.13vw), 36px);
  margin: 0 0 24px;
  &::after {
    content: "";
    display: block;
    width: 86px;
    height: 3px;
    margin-top: 10px;
    background: var(--brand);
    opacity: 0.85;
    margin-bottom: 54px;
  }
}

.meta-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nano-showcase .meta-cases,
.meta-exam .meta-cases {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.meta-card {
  display: grid;
}
.meta-photo {
  margin: 0;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.meta-cap {
  text-align: center;
  width: 100%;
  padding: 16px 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  background: #911c20;
  color: #fff;
}
.nano-showcase .meta-cap {
  padding: 32px 24px;
  text-align: left;
}
.meta-cap-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 170%;
  position: relative;
  display: inline-block;
  margin-bottom: 32px;
}
.ver-p {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  gap: 12px;
  .meta-verify {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
}

.meta-metal .result {
  display: flex;
  justify-content: center;
}
.meta-metal .result-card {
  inline-size: clamp(160px, 40vw, 800px);
  img {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }
}

@media (max-width: 980px) {
  .meta-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta-exam.meta-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nano-showcase .meta-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .meta-cases,
  .meta-exam .meta-cases,
  .nano-showcase .meta-cases {
    grid-template-columns: 1fr;
  }
}

/* shared responsive tweaks */
@media (max-width: 980px) {
  .diagram-grid {
    grid-template-columns: 1fr;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .result-arrow {
    display: none;
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .prod-grid {
    grid-template-columns: 1fr;
  }
  .prod-logo {
    width: 220rem;
    height: 220rem;
  }
}

.tech-title {
  display: flex;
  position: relative;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.6;
  justify-content: center;
  margin-bottom: clamp(24px, 6vw, 54px);
}

.tech-title::after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: clamp(48px, 12vw, 90px);
  height: clamp(2px, 0.6vw, 4px);
  background: #a12024;
}

.tech-desc {
  margin: 0 auto clamp(24px, 6vw, 54px);
  max-width: clamp(320px, 80vw, 787px);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.tech-main img {
  width: 100%;
  height: auto;
}

.tech-main2 img {
  width: 100%;
  max-width: clamp(320px, 80vw, 636px);
  height: auto;
}

/* ===== NANOPOLY: nano definition ===== */
.nano-def {
  position: relative;
  z-index: 0;
  color: #fff;
  margin: 20px;
  padding: 140px 0;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: url("/assets/images/sub/nanopoly/background.png");
    z-index: -1;
    overflow-x: hidden;
  }
  .section-title {
    margin: 0 0 54px;
  }
}
.nano-stage {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.nano-particle {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
}
.nano-gif {
  width: 100px;
  height: 100px;
  aspect-ratio: 1/1;
}
.nano-unit {
  margin: 0;
  font-size: clamp(10px, 1vw, 12px);
  color: rgba(0, 0, 0, 0.45);
}
.nano-legend {
  margin: 2px 0;
  font-weight: 700;
  color: #a12024;
  font-size: clamp(11px, 1.05vw, 24px);
  line-height: 150%;
  text-align: center;
}
.nano-arrow {
  display: block;
  inline-size: clamp(8px, 1vw, 120px);
  block-size: clamp(46px, 8.5vw, 120px);
  background: url("/assets/images/sub/nanopoly/arrow.svg") no-repeat
    center/contain;
}
.nano-scale {
  margin: 0 0 clamp(8px, 1vw, 24px);
  font-size: clamp(10px, 1vw, 18px);
  color: rgba(0, 0, 0, 0.64);
}
.nano-earth {
  margin: 0;
  img {
    width: clamp(220px, 36vw, 420px);
    height: auto;
    display: block;
  }
}
.nano-showcase .meta-cases {
  --col-gap: clamp(16px, 2.5vw, 80px);
  gap: var(--col-gap);
}
.nano-showcase .meta-card {
  position: relative;
}
.nano-showcase .meta-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--col-gap) / -2);
  transform: translateY(-50%);
  width: 2px;
  height: 166.5px;
  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0 6px,
    transparent 6px 12px
  );
  opacity: 0.9;
}
@media (max-width: 900px) {
  .nano-showcase .meta-card::after {
    display: none;
  }
}

/* RND PROSES */
.process {
  --brand: #a12024;
}
.proc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16rem, 3vw, 80rem);
  align-items: start;
}
.proc-media {
  width: auto;
  height: 100%;
  overflow: hidden;
  background: #fff;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
  }
}
.proc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12rem;
}
.proc-step {
  width: 100%;
  text-align: left;
  border: 0;
  padding: 24rem 40rem;
  background: #f7f7f7;
  color: rgba(0, 0, 0, 0.64);
  cursor: pointer;
  border-radius: 2px;
  transition: 0.18s;
  font-size: clamp(14px, calc(12px + 0.6vw), 20px);
  font-weight: 400;
  &:hover {
    background: #f0f0f0;
  }
  &.is-active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
  }
}

/*new production process*/
.process-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px 100px;
  position: relative;
}

.process-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.process-step:nth-child(odd) {
  padding-left: 0;
}

.process-step:nth-child(even) {
  padding-left: 0;
}

/* Arrows between steps */
.process-step:nth-child(1)::after,
.process-step:nth-child(3)::after,
.process-step:nth-child(5)::after,
.process-step:nth-child(7)::after,
.process-step:nth-child(9)::after {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 2px;
  background: #4d4d4f;
  z-index: 1;
}

.process-step:nth-child(1)::before,
.process-step:nth-child(3)::before,
.process-step:nth-child(5)::before,
.process-step:nth-child(7)::before,
.process-step:nth-child(9)::before {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-right: 2px solid #4d4d4f;
  border-top: 2px solid #4d4d4f;
  z-index: 1;
}

/* Diagonal arrow images */
.diagonal-arrow {
  position: absolute;
  left: -78px;
  bottom: -42px;
  width: 135px;
  height: auto;
  transform: rotate(-40deg);
  z-index: 1;
  pointer-events: none;
}

.step-number {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #4d4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 32px;
  color: white;
  z-index: 3;
  position: relative;
  margin-right: -40px;
}

.step-number.active {
  background: #a32024;
}

.step-card {
  flex: 1;
  background: #fafafa;
  border: 2px solid #4d4d4f;
  border-radius: 20px;
  padding: 28px 28px 28px 72px;
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.step-card.active {
  border-color: #a32024;
}

.step-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 24px;
}

.step-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: flex;
  gap: 12px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
}

.detail-label {
  color: #a32024;
  width: 60px;
  flex-shrink: 0;
}

.detail-value {
  color: rgba(0, 0, 0, 0.64);
  flex: 1;
}

@media (max-width: 1024px) {
  .process-flow {
    gap: 100px 60px;
  }

  .process-step:nth-child(1)::after,
  .process-step:nth-child(3)::after,
  .process-step:nth-child(5)::after {
    right: -40px;
    width: 30px;
  }

  .process-step:nth-child(1)::before,
  .process-step:nth-child(3)::before,
  .process-step:nth-child(5)::before {
    right: -40px;
  }
}

@media (max-width: 768px) {
  .process-flow {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Remove desktop arrows on mobile */
  .process-step:nth-child(1)::after,
  .process-step:nth-child(3)::after,
  .process-step:nth-child(5)::after,
  .process-step:nth-child(1)::before,
  .process-step:nth-child(3)::before,
  .process-step:nth-child(5)::before,
  .process-step:nth-child(2)::after,
  .process-step:nth-child(4)::after,
  .process-step:nth-child(2)::before,
  .process-step:nth-child(4)::before {
    display: none;
  }

  .process-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .process-step:nth-child(odd),
  .process-step:nth-child(even) {
    padding: 0;
  }

  .diagonal-arrow {
  display: none;
  }

  .step-number {
    width: 70px;
    height: 70px;
    font-size: 28px;
    margin-right: -36px;
  }

  .step-card {
    width: 100%;
    padding: 24px 24px 24px 50px;
  }

  .step-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .detail-row {
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
  }

  .detail-label {
    width: auto;
  }
  
}
/*end new production process*/

@media (max-width: 900px) {
  .proc-grid {
    grid-template-columns: 1fr;
  }
}

/* RND Research */
.rd-fields {
  --brand: #a12024;
  --strategy-bg: url("/assets/images/sub/bg-about.png") no-repeat 50% / cover;
}
.rd-fields .page-lead-body {
  text-align: center;
}

.tech {
  text-align: center;
  padding-block: clamp(24rem, 6vw, 80rem);
  position: relative;
  &-title {
    margin: 0 0 10rem;
    font-weight: 600;
    font-size: clamp(18rem, 2.2vw, 36px);
    color: rgba(0, 0, 0, 0.87);
    position: relative;
    display: inline-block;
    line-height: 160%;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -12rem;
      width: 90px;
      height: 4px;
      background: #a12024;
    }
  }
  &-desc {
    margin: 54px auto;
    max-width: 720px;
    color: rgba(0, 0, 0, 0.64);
    line-height: 170%;
    font-size: clamp(14rem, 1.2vw, 20px);
    font-weight: 400;
  }
  &-media {
    display: flex;
    position: relative;
    justify-content: center;
  }
  &-main img,
  &-sub img {
    width: 100%;
    height: auto;
    display: block;
  }
  &-main2 img {
    width: 100%;
    max-width: 636px;
    height: auto;
  }
  &.with-band::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -554rem;
    width: 100vw;
    height: 87%;
    z-index: -1;
    background: var(--strategy-bg), linear-gradient(#f5f5f5, #f5f5f5);
    background-blend-mode: luminosity;
  }
  .meta-cap {
    text-align: center;
    width: 100%;
    padding: 16px 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 170%;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.87);
  }
}

/* ESG */
.esg {
  --brand: #a12024;
  --media-h: clamp(180px, 22vw, 300px);
  --gap-after-media: clamp(16px, 2.4vw, 32px);
}

.esg-intro {
  text-align: center;
  max-width: 873rem;
  margin-inline: auto;
  padding: 16rem 32rem;
  border-radius: 999px;
  background: rgba(126, 126, 126, 0.08);
  font-size: clamp(16rem, calc(14rem + 0.5vw), 20rem);
  line-height: 170%;
  color: rgba(0, 0, 0, 0.64);
}
.esg-group,
.esg-group2 {
  margin: clamp(20rem, 4vw, 36rem) 0 12rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
  font-size: 36px;
  font-weight: 600;
  line-height: 160%;
  position: relative;
  &::after {
    content: "";
    width: 80rem;
    height: 4rem;
    background: var(--brand);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12rem;
  }
}
.esg-group2 {
  padding-top: 140px;
}

.esg-pillar {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.esg-photo-lg {
  width: clamp(260rem, 26vw, 420rem);
  border-radius: 4rem;
  overflow: hidden;
  aspect-ratio: 137/120;
  margin: 0;
  block-size: var(--media-h);
}
.esg-photo-lg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.esg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20rem, 3vw, 36rem);
  list-style: none;
  padding: 0;
  margin: clamp(24rem, 4vw, 40rem) 0;
}
@media (max-width: 1024px) {
  .esg-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .esg-steps {
    grid-template-columns: 1fr;
  }
}

.esg-stepcard {
  text-align: center;
  display: grid;
  justify-items: center;
}
.esg-stepbadge {
  display: flex;
  height: 52px;
  padding: 12px 24px;
  align-items: center;
  gap: 21px;
  border-radius: 999px;
  border: 2px solid #bc2529;
  background: #fff;
  color: #bc2529;
  font-size: 18px;
  font-weight: 600;
}
.esg-dotline,
.esg-dotline-top {
  width: 2rem;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--brand) 0 6rem,
    transparent 6rem 12rem
  );
}
.esg-dotline {
  height: clamp(44rem, 6vw, 66rem);
  margin: 24px 0;
}
.esg-dotline-top {
  height: 30px;
  margin: 18px 0;
}

.esg-steptitle {
  text-align: center;
  color: var(--brand);
  font-weight: 700;
  font-size: clamp(20rem, 2.2vw, 24px);
  line-height: 170%;
}
.esg-steplist {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20rem 0 0;
  max-width: 520rem;
  font-size: clamp(14rem, 1.2vw, 18rem);
  font-weight: 400;
  line-height: 160%;
  color: rgba(0, 0, 0, 0.87);
  gap: 12px;
}

.esg-cta {
  display: flex;
  justify-content: center;
  padding-inline: 12rem;
  margin: clamp(16rem, 4vw, 100rem) 0;
}
.btn-pill.-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(10rem, 1.2vw, 14rem);
  padding-inline: clamp(16rem, 2.4vw, 28rem);
  border-radius: 999rem;
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  font-size: clamp(14rem, calc(13rem + 0.5vw), 18rem);
  font-weight: 400;
  line-height: 170%;
  max-inline-size: 860rem;
  min-block-size: 44px;
}
.esg-pillar::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: calc(var(--media-h) + var(--gap-after-media));
  bottom: 0;
  background: url(/assets/images/sub/bg-about.png) no-repeat 50% / cover,
    linear-gradient(#fff, #fff);
  background-blend-mode: luminosity;
  z-index: -1;
  pointer-events: none;
  height: 657px;
}
@media (max-width: 900px) {
  .esg-steps {
    grid-template-columns: 1fr;
  }
}

/* ===== Inquiry ===== */
.inquiry {
  --brand: #a12024;
}

/* contacts row */
.inq-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16rem, 3vw, 28rem);
  align-items: start;
  margin-block: clamp(12rem, 3vw, 24rem) clamp(20rem, 5vw, 40rem);
  list-style: none;
  padding: 0;
  align-items: center;
}
@media (max-width: 900px) {
  .inq-contacts {
    grid-template-columns: 1fr;
  }
}

.inq-contact {
  text-align: center;
}
.inq-ct-title {
  margin: 0 0 8rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  font-size: 24px;
  font-weight: 700;
  line-height: 170%;
}
.inq-ct-note {
  margin: 0;
  color: rgba(0, 0, 0, 0.56);
}
.inq-ct-line {
  margin: 6rem 0 0;
  display: flex;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.72);
}
.inq-ct-line a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
}
.inq-ct-line a:hover {
  color: var(--brand);
}
.inq-ic {
  width: 18rem;
  height: 18rem;
  flex: 0 0 18rem;
}

/* separator */
.inq-sep {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: clamp(16rem, 4vw, 100px) 0;
}

/* form */
.inq-fieldset {
  border: 0;
  padding: 0;
}
.inq-legend {
  margin: 9px 0 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.64);
}

.inq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12rem 14rem;
}
@media (max-width: 980px) {
  .inq-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .inq-grid {
    grid-template-columns: 1fr;
  }
}

.inq-field {
  position: relative;
  display: grid;
  gap: 6rem;
}
.active {
  position: relative;
}
.inq-col-3 {
  grid-column: 1/-1;
}

.inq-label {
  font-size: 13rem;
  color: rgba(0, 0, 0, 0.56);
}

.inq-field input[type="text"],
.inq-field input[type="password"],
.inq-field input[type="tel"],
.inq-field input[type="email"],
.inq-field input[type="file"],
.inq-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 3px;
  padding: 12rem 14rem;
  font: inherit;
  color: #111;
  background: #fff;
  outline: 0;
}
.inq-field textarea {
  min-height: 220rem;
  resize: vertical;
}
.inq-field input:focus,
.inq-field textarea:focus {
  border-color: var(--brand);
}

.inq-actions {
  display: flex;
  gap: 10rem;
  justify-content: flex-end;
  margin-top: 10px;
}

.btn-pill {
  padding: 8px 16px;
  cursor: pointer;
  line-height: 1;
}
.btn-pill.-brand {
  background: #f4f4f4;
  color: #555555;
}
.btn-pill.-brand:hover {
  filter: brightness(0.95);
}
.btn-pill.-ghost {
  background: #f4f4f4;
  color: #555555;
  border: 1px solid #dedede;
}
.btn-pill.-ghost:hover {
  border-color: #c7c7c7;
}
.inq-fileRow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 15rem;
  margin: 6rem 0;
  border: 1px solid #dedede;
  border-radius: 3px;
}

.inq-fileIcon {
  width: 100%;
  height: auto;
  background: #efefef;
  display: grid;
  place-items: center;
  flex: 0 0 30rem;
}
.inq-fileIcon svg,
.inq-fileIcon img {
  width: 100%;
  height: auto;
}

.inq-fileNative {
  flex: 1 1 auto;
  width: 100%;
  appearance: auto;
  -webkit-appearance: auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.inq-field input[type="file"] {
  border: 0;
  padding: 0;
  background: transparent;
}

/* EFFECT */
.sub-page [data-se] {
  --se-dur: 600ms;
  --se-delay: 0ms;
  --se-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform, filter, clip-path;
}

.sub-page [data-se]:not(.se-visible) {
  opacity: 0;
}

.sub-page .se-visible[data-se] {
  opacity: 1;
  transition: opacity var(--se-dur) var(--se-ease) var(--se-delay),
    transform var(--se-dur) var(--se-ease) var(--se-delay),
    filter var(--se-dur) var(--se-ease) var(--se-delay),
    clip-path var(--se-dur) var(--se-ease) var(--se-delay);
}

/* VARIAN */
.sub-page [data-se="fade-in"] {
  transform: none;
}
.sub-page [data-se="fade-up"] {
  transform: translateY(24px);
}
.sub-page .se-visible[data-se="fade-up"] {
  transform: translateY(0);
}
.sub-page [data-se="zoom-in"] {
  transform: scale(0.96);
  filter: blur(2px);
}
.sub-page .se-visible[data-se="zoom-in"] {
  transform: scale(1);
  filter: blur(0);
}

.sub-page .se-wrapper {
  overflow: hidden;
}
.sub-page [data-se="clip-up"] {
  clip-path: inset(100% 0 0 0);
}
.sub-page .se-visible[data-se="clip-up"] {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .sub-page .se-visible[data-se] {
    transition: none;
  }
}

.cards-grid .media {
  cursor: pointer;
}

.lb {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 99999;
}
.lb.is-open {
  opacity: 1;
  visibility: visible;
}

.lb__imgwrap {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
}
.lb__img {
  display: block;
  width: 380px;
  height: auto;
  transform: scale(0.98);
  transition: transform 0.25s ease;
}
.lb.is-open .lb__img {
  transform: scale(1.5);
}

.lb__cap {
  margin-top: 10px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.lb__btn {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
}