/* Shared subpage layout. */
html,
body.bbf-page {
  max-width: 100%;
  overflow-x: clip;
}

:root {
  --content-max: 1520px;
  --content-gutter: clamp(20px, 6vw, 200px);
  --header-max: 1700px;
  --header-gutter: clamp(20px, 3.125vw, 60px);
}

html {
  scrollbar-gutter: stable;
}

/* Shared header and footer chrome slots. */
header[data-shared-header] { position: absolute; top: 0; left: 0; width: 100%; min-height: min(5.208vw, 99.9936px); z-index: 100; }
footer[data-shared-footer] { display: block; min-height: min(33.594vw, 645.0048px); background: #111; }
[data-shared-header] a, [data-shared-header] button, [data-shared-footer] a { display: inline-flex; align-items: center; justify-content: center; }

/* Shared pill button. */
.btn-pill { text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: clamp(0.75rem, 1.167vw, 1.4rem) clamp(1.5rem, 2.667vw, 3.2rem); border: 0; border-radius: 100px; appearance: none; font-family: var(--font-latin, "Poppins", "Pretendard", sans-serif); font-weight: 600; font-size: clamp(15px, min(0.94vw, 18.048px), 18px); line-height: 1.3; text-decoration: none; text-transform: capitalize; cursor: pointer; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; }
.btn-pill--dark { background: #111; color: #fff; }
.btn-pill--light { background: #fff; color: #111; }
.btn-pill--outline { background: transparent; color: #111; box-shadow: inset 0 0 0 1px currentColor; }
.btn-pill:hover, .btn-pill:focus-visible { transform: translateY(-2px); }
.btn-pill--dark:hover, .btn-pill--dark:focus-visible { background: #222; }
.btn-pill--light:hover, .btn-pill--light:focus-visible { background: #f5f5f5; }
.btn-pill:focus-visible { outline: 2px solid #db0000; outline-offset: 3px; }
.btn-pill:disabled, .btn-pill[aria-disabled="true"] { cursor: wait; opacity: 0.55; transform: none; }
.btn-pill__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .btn-pill { transition: none; }
}

.bi-items__title,
.hi-history__title,
.ct-cert__title,
.cg-items__title,
.nw-board__title,
.fq-faq__title,
.bi-list,
.cg-grid,
.nw-board__bar,
.nw-list,
.nv-grid,
.fq-list {
  width: calc(100% - var(--content-gutter) - var(--content-gutter));
  max-width: var(--content-max);
  margin-inline: auto;
}

body .footer-inner,
body .mobile-menu__nav,
body .mobile-menu__bottom,
body .subnav,
body .item-head,
body .store-sec,
body .ov-hero,
body .bi-hero,
body .hi-hero,
body .ct-hero,
body .cg-hero,
body .nw-hero,
body .fq-hero,
body .ov-craft,
body .ov-trad__title,
body .ov-cards,
body .hi-timeline,
body .ct-slider,
body .dv-top,
body .dv-points {
  width: calc(100% - var(--content-gutter) - var(--content-gutter));
  max-width: var(--content-max);
  margin-inline: auto;
}

body .site-header__inner {
  width: calc(100% - var(--header-gutter) - var(--header-gutter));
  max-width: var(--header-max);
  margin-inline: auto;
}

/* Shared subpage hero and visual band. */
.bi-page { --subpage-gutter: var(--bi-gutter); }
.hi-page { --subpage-gutter: var(--hi-gutter); }
.ct-page { --subpage-gutter: var(--ct-gutter); }
.cg-page { --subpage-gutter: var(--cg-gutter); }
.nw-page { --subpage-gutter: var(--nw-gutter); }
.fq-page { --subpage-gutter: var(--fq-gutter); }

.bi-hero,
.hi-hero,
.ct-hero,
.cg-hero,
.nw-hero,
.fq-hero {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: min(25.833vw, 495.9936px);
  padding-top: min(13.542vw, 260.0064px);
}

.bi-crumb,
.hi-crumb,
.ct-crumb,
.cg-crumb,
.nw-crumb,
.fq-crumb {
  position: static;
  display: flex;
  align-items: center;
  gap: 20px;
  color: rgba(17, 17, 17, 1);
  font-family: var(--font-latin, "Poppins", "Pretendard", sans-serif);
  font-size: clamp(13px, min(0.833vw, 15.9936px), 16px);
  font-weight: 500;
  text-transform: capitalize;
}

.bi-crumb__dot,
.hi-crumb__dot,
.ct-crumb__dot,
.cg-crumb__dot,
.nw-crumb__dot,
.fq-crumb__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e23333;
}

.bi-crumb__item--now,
.hi-crumb__item--now,
.ct-crumb__item--now,
.cg-crumb__item--now,
.nw-crumb__item--now,
.fq-crumb__item--now {
  color: #e23333;
}

.bi-title,
.hi-title,
.ct-title,
.cg-title,
.nw-title,
.fq-title {
  position: static;
  margin: min(1.042vw, 20.0064px) 0 0;
  color: #111;
  font-family: var(--font-latin, "Poppins", "Pretendard", sans-serif);
  font-size: clamp(44px, min(5.208vw, 99.9936px), 100px);
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.bi-band,
.hi-band,
.ct-band,
.cg-band,
.nw-band,
.fq-band {
  position: relative;
  height: min(min(32.292vw, 620.0064px), 620px);
  overflow: visible;
}

.bi-band__photo,
.hi-band__photo,
.ct-band__photo,
.cg-band__photo,
.nw-band__photo,
.fq-band__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
}

.bi-band__photo,
.cg-band__photo {
  object-position: center 67.5%;
}

.bi-band__ring,
.hi-band__ring,
.ct-band__ring,
.cg-band__ring,
.nw-band__ring,
.fq-band__ring {
  position: absolute;
  left: auto;
  right: min(10.417vw, 200.0064px);
  top: min(min(16.719vw, 321.0048px), 321px);
  z-index: 0;
  width: min(31.406vw, 602.9952px);
  height: min(31.406vw, 602.9952px);
  pointer-events: none;
}

@media (max-width: 1024px) {
  :root {
    --content-gutter: clamp(20px, 2vw, 200px);
    --header-gutter: 30px;
    --fs-r-hero: 54px;
    --fs-r-mega: 54px;
    --fs-r-display: 48px;
    --fs-r-section: 32px;
    --fs-r-card-title: 27px;
    --fs-r-title: 23px;
    --fs-r-body: 16px;
    --fs-r-small: 14px;
  }

  .btn-pill { font-size: var(--fs-r-body); }
  

  .bi-hero,
  .hi-hero,
  .ct-hero,
  .cg-hero,
  .nw-hero,
  .fq-hero {
    min-height: min(52vw, 400px);
    padding-top: min(36vw, 199.68px);
    padding-bottom: 1.4rem;
  }

  .bi-title,
  .hi-title,
  .ct-title,
  .cg-title,
  .nw-title,
  .fq-title {
    font-size: var(--fs-r-hero);
  }

  .bi-crumb,
  .hi-crumb,
  .ct-crumb,
  .cg-crumb,
  .nw-crumb,
  .fq-crumb {
    font-size: var(--fs-r-small);
  }

  .bi-band,
  .hi-band,
  .ct-band,
  .cg-band,
  .nw-band,
  .fq-band {
    height: min(60vw, 460.8px);
  }

  .bi-band__ring,
  .hi-band__ring,
  .ct-band__ring,
  .cg-band__ring,
  .nw-band__ring,
  .fq-band__ring {
    left: auto;
    right: max(-5vw, -96px);
    top: min(36vw, 276.48px);
    width: min(50vw, 384px);
    height: min(50vw, 384px);
  }
}

@media (max-width: 768px) {
  :root {
    --fs-r-hero: 48px;
    --fs-r-mega: 48px;
    --fs-r-display: 44px;
    --fs-r-section: 30px;
    --fs-r-card-title: 25px;
    --fs-r-title: 22px;
    --fs-r-body: 15px;
    --fs-r-small: 13px;
  }
}

@media (max-width: 500px) {
  :root {
    --content-gutter: 15px;
    --header-gutter: 15px;
    --fs-r-hero: 42px;
    --fs-r-mega: 42px;
    --fs-r-display: 38px;
    --fs-r-section: 27px;
    --fs-r-card-title: 23px;
    --fs-r-title: 18px;
    --fs-r-body: 14px;
    --fs-r-small: 12px;
  }
}