.brand-philosophy-hero,
.brand-philosophy-values,
.brand-strategy {
  --philosophy-unit: min(1px,calc(100vw / 1920));
  color: #000;
  background: #fffcf5;
}

.brand-philosophy-mobile-only,
.brand-strategy-progress {
  display: none;
}

.brand-strategy-item {
  display: contents;
}

.brand-value-image picture,
.brand-strategy-image picture,
.pioneer-main picture {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-philosophy-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: #fff;
}

.brand-philosophy-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-philosophy-copy {
  position: absolute;
  inset: 0;
  width: min(1920px,100%);
  margin: 0 auto;
}

.brand-philosophy-heading {
  position: absolute;
  top: 50%;
  left: max(20px,calc(38 * var(--philosophy-unit)));
}

.brand-philosophy-heading p {
  margin: 0;
  font-size: clamp(24px,calc(36 * var(--philosophy-unit)),36px);
  font-weight: 500;
  line-height: 1.44445;
}

.brand-philosophy-heading h1 {
  margin: 0;
  font-size: clamp(18px,calc(24 * var(--philosophy-unit)),24px);
  font-weight: 700;
  line-height: 1.45834;
  letter-spacing: 0;
  text-shadow: none;
}

.brand-philosophy-intro {
  position: absolute;
  top: calc(50% + 8 * var(--philosophy-unit));
  left: calc(50% + 54 * var(--philosophy-unit));
  width: min(336px,calc(50% - 92 * var(--philosophy-unit)));
}

.brand-philosophy-intro h2 {
  margin: 0;
  font-size: clamp(18px,calc(22 * var(--philosophy-unit)),22px);
  font-weight: 500;
  line-height: 1.27273;
}

.brand-philosophy-intro p {
  margin: calc(15 * var(--philosophy-unit)) 0 0;
  font-size: clamp(14px,calc(16 * var(--philosophy-unit)),16px);
  font-weight: 500;
  line-height: 1.375;
}

.brand-philosophy-intro p span {
  display: block;
}

.brand-philosophy-values {
  position: relative;
}

.brand-values-stage {
  display: grid;
  gap: 38px;
  padding: clamp(24px,calc(38 * var(--philosophy-unit)),38px) var(--site-content-edge);
}

.brand-value-slide {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: calc(10 * var(--philosophy-unit));
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1844 / 1000;
}

.brand-value-image,
.brand-value-copy {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--philosophy-unit));
}

.brand-value-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-value-slide[data-value="aesthetic"] .brand-value-image img {
  object-position: 74% center;
}

.brand-value-copy {
  display: flex;
  align-items: center;
  padding: max(24px,calc(50 * var(--philosophy-unit)));
  background: #fef3bf;
}

.brand-value-copy > div {
  width: min(100%,calc(640 * var(--philosophy-unit)));
}

.brand-value-slide--blue .brand-value-copy {
  background: #bfd6f7;
}

.brand-value-slide--reverse .brand-value-image {
  grid-column: 2;
  grid-row: 1;
}

.brand-value-slide--reverse .brand-value-copy {
  grid-column: 1;
  grid-row: 1;
}

.brand-philosophy-values h2 {
  margin: 0;
  font-size: clamp(20px,calc(36 * var(--philosophy-unit)),36px);
  font-weight: 500;
  line-height: 1.44445;
}

.brand-philosophy-values p {
  margin: calc(13 * var(--philosophy-unit)) 0 0;
  color: rgba(0,0,0,.6);
  font-size: clamp(16px,calc(28 * var(--philosophy-unit)),28px);
  font-weight: 500;
  line-height: 1.21429;
}

.brand-strategy {
  padding: calc(199 * var(--philosophy-unit)) 0 calc(262 * var(--philosophy-unit));
}

.brand-strategy-heading {
  margin: 0 20px calc(129 * var(--philosophy-unit));
  text-align: center;
}

.brand-strategy-heading p,
.brand-strategy-heading h2 {
  margin: 0;
  font-size: clamp(26px,calc(36 * var(--philosophy-unit)),36px);
  font-weight: 700;
  line-height: 1.36112;
}

.brand-strategy-viewport {
  width: calc(100% - 76px);
  max-width: var(--site-content-width);
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.brand-strategy-viewport::-webkit-scrollbar {
  display: none;
}

.brand-strategy-viewport:focus-visible {
  outline: 2px solid #718bb0;
  outline-offset: 6px;
}

.brand-strategy-track,
.brand-strategy-group {
  display: flex;
  align-items: stretch;
  width: max-content;
}

.brand-strategy-group {
  flex: none;
  gap: calc(10 * var(--philosophy-unit));
  padding-right: calc(10 * var(--philosophy-unit));
}

.brand-strategy-group[hidden] {
  display: none;
}

.brand-strategy-card {
  flex: none;
  height: clamp(310px,calc(429 * var(--philosophy-unit)),429px);
  margin: 0;
  overflow: hidden;
  border-radius: max(18px,calc(30 * var(--philosophy-unit)));
}

.brand-strategy-image {
  position: relative;
  width: clamp(380px,calc(586 * var(--philosophy-unit)),586px);
}

.brand-strategy-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--strategy-image-position,center);
}

.brand-strategy-image--shaded::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--strategy-image-shade,.1));
  pointer-events: none;
}

.brand-strategy-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(290px,calc(402 * var(--philosophy-unit)),402px);
  padding: max(26px,calc(36 * var(--philosophy-unit))) max(26px,calc(38 * var(--philosophy-unit)));
}

.brand-strategy-copy--blue {
  background: #bfd6f7;
}

.brand-strategy-copy--yellow {
  background: #fef3bf;
}

.brand-strategy-copy > div > span {
  display: block;
  margin-bottom: calc(7 * var(--philosophy-unit));
  color: rgba(0,0,0,.4);
  font-size: clamp(11px,calc(12 * var(--philosophy-unit)),12px);
  font-weight: 500;
  line-height: 1.41667;
}

.brand-strategy-copy p {
  width: min(100%,calc(var(--strategy-copy-width,310) * var(--philosophy-unit)));
  margin: 0;
  font-size: clamp(14px,calc(16 * var(--philosophy-unit)),16px);
  font-weight: 500;
  line-height: 1.25;
}

.brand-strategy-copy p > span {
  color: rgba(0,0,0,.5);
}

.brand-strategy-copy h3 {
  margin: 24px 0 0;
  font-size: clamp(19px,calc(22 * var(--philosophy-unit)),22px);
  font-weight: 700;
  line-height: 1.27273;
}

.brand-philosophy-values.brand-values-pinned {
  height: calc(var(--values-stage-height,100vh) + var(--values-scroll-range));
  opacity: 1;
}

.brand-values-pinned .brand-values-stage {
  position: sticky;
  top: 0;
  height: var(--values-stage-height,100vh);
  grid-template-rows: minmax(0,1fr);
  gap: 0;
  overflow: hidden;
  isolation: isolate;
}

.brand-values-pinned .brand-value-slide {
  grid-area: 1 / 1;
  align-self: center;
  max-height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: none;
  clip-path: var(--value-clip,inset(0));
  pointer-events: none;
  transition: none;
  will-change: clip-path;
}

.brand-values-pinned .brand-value-slide.is-visible {
  opacity: 1;
  visibility: visible;
}

.brand-values-pinned .brand-value-slide.is-active {
  pointer-events: auto;
}


html.brand-pioneer-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
  padding-right: var(--pioneer-lock-padding,0px);
}

@media (min-width: 761px) {
  .brand-page .pioneer-scroll.pioneer-auto {
    height: 100vh;
    min-height: 0;
    opacity: 1;
  }

  .pioneer-content {
    --pioneer-end-unit: min(1px,calc(100vw / 1920));
    --pioneer-end-height-unit: calc(100vh / 1080);
    right: max(38px,calc((100% - var(--site-content-width)) / 2));
    left: max(38px,calc((100% - var(--site-content-width)) / 2));
  }

  .pioneer-kicker {
    top: calc(59 * var(--pioneer-end-height-unit));
    left: 0;
    max-width: 100%;
    color: rgba(255,255,255,.6);
    font-size: clamp(12px,calc(16 * var(--pioneer-end-unit)),16px);
    line-height: 1.75;
    font-weight: 500;
  }

  .pioneer-description {
    top: calc(101 * var(--pioneer-end-height-unit));
    left: 0;
    width: calc(733 * var(--pioneer-end-unit));
    max-width: 100%;
    color: rgba(255,255,255,.5);
    font-size: clamp(16px,calc(22 * var(--pioneer-end-unit)),22px);
    line-height: 1.272727;
    font-weight: 500;
  }

  .pioneer-description strong {
    color: #fff;
    font-weight: 500;
  }

  .pioneer-principles {
    right: 0;
    bottom: max(52px,calc(75 * var(--pioneer-end-height-unit)));
    left: 0;
  }

  .brand-page .site-return-top {
    bottom: clamp(4px,calc(6.944444vh - 48px),20px);
  }

  .pioneer-principles div {
    height: calc(47 * var(--pioneer-end-height-unit));
    padding-top: calc(11 * var(--pioneer-end-height-unit));
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    color: #fff;
    font-size: clamp(12px,calc(16 * var(--pioneer-end-unit)),16px);
    line-height: 1.4375;
    font-weight: 500;
  }

  .pioneer-principles div:nth-child(3) {
    padding-top: calc(12 * var(--pioneer-end-height-unit));
  }

  .pioneer-principles div:last-child {
    height: calc(45 * var(--pioneer-end-height-unit));
  }

  .pioneer-principles em {
    justify-self: end;
    color: rgba(255,255,255,.6);
  }

  .pioneer-principles::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: scaleX(var(--line-progress));
    transform-origin: left center;
    will-change: transform;
  }

  .pioneer-principles::before,
  .pioneer-principles div::after {
    height: .5px;
    background: rgba(255,255,255,.5);
  }
}

@media (max-width: 760px) {
  .brand-page {
    --brand-mobile-unit: calc(100vw / 750);
    background: #fffcf3;
  }

  .brand-philosophy-desktop-only { display: none; }
  .brand-philosophy-mobile-only { display: inline; }

  .brand-philosophy-hero {
    height: calc(1580 * var(--brand-mobile-unit));
  }

  .brand-philosophy-copy { inset: 0; width: 100%; }

  .brand-philosophy-heading {
    top: calc(232 * var(--brand-mobile-unit));
    left: calc(44 * var(--brand-mobile-unit));
  }

  .brand-philosophy-heading p {
    font-size: calc(48 * var(--brand-mobile-unit));
    line-height: calc(64 * var(--brand-mobile-unit));
  }

  .brand-philosophy-heading h1 {
    margin: 0 0 0 calc(3 * var(--brand-mobile-unit));
    font-size: calc(32 * var(--brand-mobile-unit));
    line-height: calc(47 * var(--brand-mobile-unit));
  }

  .brand-philosophy-intro {
    top: calc(1311 * var(--brand-mobile-unit));
    left: calc(48 * var(--brand-mobile-unit));
    width: calc(604 * var(--brand-mobile-unit));
    margin: 0;
  }

  .brand-philosophy-intro h2 {
    font-size: calc(32 * var(--brand-mobile-unit));
    line-height: calc(32 * var(--brand-mobile-unit));
  }

  .brand-philosophy-intro p {
    margin-top: calc(27 * var(--brand-mobile-unit));
    font-size: calc(22 * var(--brand-mobile-unit));
    line-height: calc(32 * var(--brand-mobile-unit));
  }

  .brand-page .pioneer-scroll {
    height: calc(100svh + 180svh);
    min-height: 0;
    background: #fffcf3;
    opacity: 1;
  }

  .brand-page .pioneer-scroll.pioneer-auto {
    height: 100svh;
  }

  .brand-page .pioneer-sticky {
    height: 100svh;
    min-height: 0;
    background: #fffcf3;
  }

  .brand-page .pioneer-title {
    top: 52.6%;
    font-size: calc(78 * var(--brand-mobile-unit));
    line-height: 1.45;
    letter-spacing: 0;
  }

  .brand-page .pioneer-card { border-radius: calc(30 * var(--brand-mobile-unit)); }
  .brand-page .card-a { left: -16.93%; top: 12.15%; width: 39.2vw; height: 12.22%; }
  .brand-page .card-b { left: 15.33%; top: 21.77%; width: 22.13vw; height: 8.42%; }
  .brand-page .card-c { left: 62%; top: 33.16%; width: 22.13vw; height: 8.1%; }
  .brand-page .card-d { left: 84.13%; top: 3.04%; width: 26.53vw; height: 8.29%; }
  .brand-page .card-e { display: none; }
  .brand-page .card-f { left: 84.13%; top: 62.03%; width: 35.6vw; height: 18.67%; }
  .brand-page .card-g { left: 69.07%; top: 75.44%; width: 25.47vw; height: 12.97%; }
  .brand-page .card-h { left: 2.67%; top: 63.23%; width: 33.33vw; height: 12.22%; }
  .brand-page .card-i { left: 12.13%; top: 88.42%; width: 28.4vw; height: 10.82%; }

  .brand-page .pioneer-kicker {
    top: max(7%,68px);
    right: calc(48 * var(--brand-mobile-unit));
    left: calc(48 * var(--brand-mobile-unit));
    font-size: calc(22 * var(--brand-mobile-unit));
    line-height: 1.45;
  }

  .brand-page .pioneer-description {
    top: max(13%,calc(68px + 64 * var(--brand-mobile-unit)));
    right: calc(48 * var(--brand-mobile-unit));
    left: calc(48 * var(--brand-mobile-unit));
    font-size: calc(26 * var(--brand-mobile-unit));
    line-height: 1.45;
  }

  .brand-page .pioneer-principles {
    right: calc(48 * var(--brand-mobile-unit));
    left: calc(48 * var(--brand-mobile-unit));
    bottom: 5.5%;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand-page .pioneer-principles div {
    height: calc(68 * var(--brand-mobile-unit));
    font-size: calc(22 * var(--brand-mobile-unit));
    grid-template-columns: 1fr auto;
  }

  .brand-page .pioneer-principles em { display: block; }

  .brand-philosophy-values {
    --values-stage-height: 100svh;
    background: #fffcf3;
  }

  .brand-values-stage {
    gap: 0;
    padding: max(10px,calc(20 * var(--brand-mobile-unit)));
  }

  .brand-value-slide {
    height: min(calc(1528 * var(--brand-mobile-unit)),100%);
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) minmax(0,1fr);
    gap: calc(10 * var(--brand-mobile-unit));
    aspect-ratio: auto;
  }

  .brand-values-pinned .brand-value-slide { clip-path: none; will-change: auto; }

  .brand-value-slide .brand-value-image,
  .brand-value-slide .brand-value-copy {
    grid-column: auto;
    grid-row: auto;
    border-radius: calc(30 * var(--brand-mobile-unit));
    clip-path: var(--value-clip,inset(0));
    will-change: clip-path;
  }

  .brand-value-image { aspect-ratio: auto; }

  .brand-value-slide[data-value] .brand-value-image img {
    position: static;
    width: 100%;
    height: 100%;
    object-position: center;
  }

  .brand-value-copy {
    justify-content: center;
    min-height: 0;
    padding: calc(40 * var(--brand-mobile-unit));
    text-align: center;
  }

  .brand-value-copy > div { width: calc(566 * var(--brand-mobile-unit)); max-width: 100%; }

  .brand-philosophy-values h2 {
    font-size: calc(40 * var(--brand-mobile-unit));
    line-height: calc(58 * var(--brand-mobile-unit));
    font-weight: 700;
  }

  .brand-philosophy-values p {
    margin-top: calc(29 * var(--brand-mobile-unit));
    color: rgba(0,0,0,.5);
    font-size: calc(28 * var(--brand-mobile-unit));
    line-height: calc(38 * var(--brand-mobile-unit));
  }

  .brand-strategy {
    padding: calc(138 * var(--brand-mobile-unit)) 0 calc(176 * var(--brand-mobile-unit));
    background: #fffcf3;
  }

  .brand-strategy-heading {
    margin: 0 calc(48 * var(--brand-mobile-unit)) calc(74 * var(--brand-mobile-unit));
    text-align: left;
  }

  .brand-strategy-heading p {
    font-size: calc(48 * var(--brand-mobile-unit));
    line-height: calc(64 * var(--brand-mobile-unit));
    font-weight: 500;
  }

  .brand-strategy-heading h2 {
    font-size: calc(32 * var(--brand-mobile-unit));
    line-height: calc(46 * var(--brand-mobile-unit));
  }

  .brand-strategy-viewport { width: calc(100% - max(20px,calc(40 * var(--brand-mobile-unit)))); }
  .brand-strategy-group { gap: calc(16 * var(--brand-mobile-unit)); padding-right: 0; }

  .brand-strategy-item {
    display: flex;
    flex: none;
    flex-direction: column;
    width: calc(608 * var(--brand-mobile-unit));
  }

  .brand-strategy-item.brand-philosophy-desktop-only { display: none; }

  .brand-strategy-card {
    width: 100%;
    border-radius: calc(30 * var(--brand-mobile-unit));
  }

  .brand-strategy-image {
    z-index: 1;
    width: 100%;
    height: calc(474 * var(--brand-mobile-unit));
  }

  .brand-strategy-image img { object-position: center; }
  .brand-strategy-image--shaded::after { content: none; }

  .brand-strategy-copy {
    height: calc(537 * var(--brand-mobile-unit));
    margin-top: calc(-92 * var(--brand-mobile-unit));
    padding: calc(136 * var(--brand-mobile-unit)) calc(29 * var(--brand-mobile-unit)) calc(49 * var(--brand-mobile-unit));
  }

  .brand-strategy-copy > div > span { display: none; }

  .brand-strategy-copy p {
    width: calc(442 * var(--brand-mobile-unit));
    max-width: 100%;
    font-size: calc(22 * var(--brand-mobile-unit));
    line-height: calc(30 * var(--brand-mobile-unit));
  }

  .brand-strategy-copy h3 {
    margin: calc(24 * var(--brand-mobile-unit)) 0 0;
    font-size: calc(28 * var(--brand-mobile-unit));
    line-height: calc(34 * var(--brand-mobile-unit));
  }

  .brand-strategy-item > .brand-strategy-image:only-child { height: calc(919 * var(--brand-mobile-unit)); }

  .brand-strategy-progress {
    --strategy-scrollbar-height: max(2px,calc(4 * var(--brand-mobile-unit)));
    position: relative;
    display: block;
    width: calc(655 * var(--brand-mobile-unit));
    height: var(--strategy-scrollbar-height);
    margin: calc(57 * var(--brand-mobile-unit)) auto 0;
  }

  .brand-strategy-scrollbar {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    transform: translateY(-50%);
  }

  .brand-strategy-scrollbar::-webkit-slider-runnable-track {
    height: var(--strategy-scrollbar-height);
    border: 0;
    border-radius: 50px;
    background: rgba(0,0,0,.1);
  }

  .brand-strategy-scrollbar::-moz-range-track {
    height: var(--strategy-scrollbar-height);
    border: 0;
    border-radius: 50px;
    background: rgba(0,0,0,.1);
  }

  .brand-strategy-scrollbar::-webkit-slider-thumb {
    width: var(--strategy-thumb-width,25%);
    height: var(--strategy-scrollbar-height);
    border: 0;
    border-radius: 50px;
    appearance: none;
    -webkit-appearance: none;
    background: #000;
  }

  .brand-strategy-scrollbar::-moz-range-thumb {
    width: var(--strategy-thumb-width,25%);
    height: var(--strategy-scrollbar-height);
    border: 0;
    border-radius: 50px;
    background: #000;
  }

  .brand-strategy-scrollbar:focus-visible {
    border-radius: 6px;
    outline: 2px solid #718bb0;
    outline-offset: 4px;
  }
}

@media (max-width: 760px) and (max-height: 600px) and (orientation: landscape) {
  .brand-value-copy { padding: 16px; }
  .brand-philosophy-values h2 { font-size: 20px; line-height: 28px; }
  .brand-philosophy-values p { margin-top: 12px; font-size: 14px; line-height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-values-pinned .brand-value-slide {
    transition: none;
    transform: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .brand-page .pioneer-scroll { height: 100svh; }
}

.brand-story-scene { display: none; }
@media (min-width: 0px) {
  .brand-page .brand-strategy { display: none; }
  .brand-story-scene { display: block; position: relative; height: 240svh; background: #646c70; color: #fff; }
  .brand-story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .brand-story-cover, .brand-story-detail { position: absolute; inset: 0; }
  .brand-story-cover { transition: opacity 850ms ease; }
  .brand-story-cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
  .brand-story-cover h2 { position: absolute; top: 6.5741%; left: var(--site-content-edge); margin: 0; font-size: clamp(28px, 2.5vw, 48px); line-height: 1.4583; }
  .brand-story-detail { display: grid; grid-template-columns: 52.8125% 47.1875%; opacity: 0; visibility: hidden; transform: translateY(6%); transition: opacity 850ms ease, transform 850ms ease, visibility 0s 850ms; }
  .brand-story-detail img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
  .brand-story-text { display: flex; flex-direction: column; justify-content: center; padding: 4vh max(20px, 3vw) 4vh 7.5vw; background: rgba(0,0,0,.1); backdrop-filter: blur(60px); overflow: auto; font-size: min(20px, 1.04167vw, 1.85185svh); line-height: 1.6; }
  .brand-story-text h3 { margin: 0 0 1.6em; font-size: inherit; line-height: inherit; }
  .brand-story-text p { margin: 0; }
  .brand-story-scene.is-detail .brand-story-cover { opacity: 0; }
  .brand-story-scene.is-detail .brand-story-detail { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-story-cover, .brand-story-detail { transition: none; transform: none; }
}

.brand-hero-carousel { display: none; }
@media (min-width: 0px) {
  .brand-philosophy-hero > .brand-philosophy-backdrop-picture,
  .brand-philosophy-hero > .brand-philosophy-copy { display: none; }
  .brand-hero-carousel { display: block; position: absolute; inset: 0; }
  .brand-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 800ms ease, visibility 0s 800ms; }
  .brand-hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .brand-hero-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .brand-hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 40%)); pointer-events: none; }
  .brand-hero-caption { position: absolute; inset: 0 var(--site-content-edge); z-index: 1; color: #fff; }
  .brand-hero-title { position: absolute; top: 77.22%; left: 0; width: 27%; }
  .brand-hero-title:has(> p) { top: 74.26%; }
  .brand-hero-title p { margin: 0 0 9px; font-size: clamp(12px, .833333vw, 16px); font-weight: 700; line-height: 1.4375; }
  .brand-hero-title h2 { margin: 0; font-size: clamp(23px, 1.875vw, 36px); line-height: 1.2222; font-weight: 700; }
  .brand-hero-description { position: absolute; top: 77.31%; left: 52.93%; width: min(456px, 38%); margin: 0; font-size: clamp(12px, .833333vw, 16px); line-height: 1.25; font-weight: 500; }
  .brand-hero-controls { position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 14px; border-radius: 40px; background: rgb(15 18 23 / 35%); backdrop-filter: blur(20px); }
  .brand-hero-controls button { border: 0; cursor: pointer; color: #fff; background: transparent; }
  .brand-hero-controls button:focus-visible { outline: 2px solid #bfd6f7; outline-offset: 2px; }
  .brand-hero-playback { min-width: 44px; height: 40px; font: inherit; font-size: 12px; }
  .brand-hero-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 40px; padding: 0; transition: width 250ms ease; }
  .brand-hero-dot > span { position: relative; width: 8px; height: 8px; border-radius: 20px; background: rgb(255 255 255 / 60%); overflow: hidden; }
  .brand-hero-dot.is-active { width: 48px; }
  .brand-hero-dot.is-active > span { width: 40px; background: rgb(255 255 255 / 25%); }
  .brand-hero-dot.is-active > span::after { content: ''; position: absolute; inset: 0; background: #bfd6f7; transform-origin: left; transform: scaleX(var(--progress, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-hero-slide, .brand-hero-dot { transition: none; }
}

@media (max-width: 760px) {
  .brand-hero-caption { inset: 0 calc(48 * var(--brand-mobile-unit)); }
  .brand-hero-title,
  .brand-hero-title:has(> p) { top: calc(246 * var(--brand-mobile-unit)); width: 100%; }
  .brand-hero-title p { font-size: calc(24 * var(--brand-mobile-unit)); line-height: calc(35 * var(--brand-mobile-unit)); margin-bottom: calc(11 * var(--brand-mobile-unit)); }
  .brand-hero-title h2 { font-size: calc(48 * var(--brand-mobile-unit)); line-height: calc(56 * var(--brand-mobile-unit)); }
  .brand-hero-slide:nth-child(-n+2) .brand-hero-title { top: calc(240 * var(--brand-mobile-unit)); }
  .brand-hero-slide:nth-child(2) .brand-hero-title h2 { max-width: calc(600 * var(--brand-mobile-unit)); }
  .brand-hero-slide:nth-child(7) .brand-hero-title { top: calc(200 * var(--brand-mobile-unit)); }
  .brand-hero-description { top: calc(1370 * var(--brand-mobile-unit)); left: 0; width: calc(553 * var(--brand-mobile-unit)); max-width: 100%; font-size: calc(22 * var(--brand-mobile-unit)); line-height: calc(32 * var(--brand-mobile-unit)); }
  .brand-hero-description br { display: none; }
  .brand-hero-slide:first-child .brand-hero-description br { display: initial; }
  .brand-hero-slide:nth-child(n+5) .brand-hero-description { width: calc(601 * var(--brand-mobile-unit)); }
  .brand-hero-slide:nth-child(6) .brand-hero-description { top: calc(1242 * var(--brand-mobile-unit)); }
  .brand-hero-slide:nth-child(6) .brand-hero-description br { display: initial; }
  .brand-hero-slide:nth-child(4) > img { object-position: 46% center; }
  .brand-hero-slide:nth-child(5) > img {
    position: absolute;
    left: calc(-635 * var(--brand-mobile-unit));
    top: calc(-38 * var(--brand-mobile-unit));
    width: calc(2876 * var(--brand-mobile-unit));
    height: calc(1618 * var(--brand-mobile-unit));
    max-width: none;
    object-position: center;
  }
  .brand-hero-slide:nth-child(5)::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 30%), transparent 50.481%, rgb(0 0 0 / 30%));
  }
  .brand-hero-slide:nth-child(7) > img { object-position: 66% center; }
  .brand-hero-controls { bottom: calc(12 * var(--brand-mobile-unit)); gap: 1px; padding: 0 10px; }
  .brand-hero-dot { height: 36px; }
  .brand-hero-playback { height: 36px; }
}

.brand-story-cover > picture, .brand-story-detail > picture { display: block; width: 100%; height: 100%; min-height: 0; }
@media (max-width: 760px) {
  .brand-story-scene { height: 220svh; --story-unit: min(calc(100vw / 750), calc(100svh / 1626)); }
  .brand-story-cover h2 { top: calc(84 * var(--story-unit)); left: calc(47 * var(--brand-mobile-unit)); font-size: calc(48 * var(--brand-mobile-unit)); }
  .brand-story-cover img { object-position: 44.39% center; }
  .brand-story-detail { display: block; }
  .brand-story-detail > picture { position: absolute; inset: 0; }
  .brand-story-detail img { object-position: 65% center; }
  .brand-story-text { position: absolute; inset: 0; overflow: visible; align-items: flex-start; justify-content: center; padding: 0 calc(50 * var(--brand-mobile-unit)) 0 calc(91 * var(--brand-mobile-unit)); font-size: calc(28 * var(--story-unit)); line-height: calc(38 * var(--story-unit)); backdrop-filter: blur(30px); }
  .brand-story-text h3 { margin-bottom: calc(38 * var(--story-unit)); }
}


.pioneer-mobile-belief,
.pioneer-mobile-principles-title { display: none; }

@media (max-width: 760px) {
  .brand-page .pioneer-kicker { display: none; }

  .brand-page .pioneer-description {
    top: 4.98155%;
    left: calc(47 * var(--brand-mobile-unit));
    right: auto;
    width: calc(563 * var(--brand-mobile-unit));
    color: rgba(255,255,255,.5);
    font-size: calc(24 * var(--brand-mobile-unit));
    font-weight: 500;
    line-height: calc(32 * var(--brand-mobile-unit));
  }

  .brand-page .pioneer-description strong { color: #fff; font-weight: 500; }

  .pioneer-mobile-belief {
    display: block;
    margin-top: calc(20 * var(--brand-mobile-unit));
  }

  .brand-page .pioneer-principles {
    left: calc(20 * var(--brand-mobile-unit));
    right: calc(20 * var(--brand-mobile-unit));
    bottom: 6.33456%;
    padding: 0 calc(28 * var(--brand-mobile-unit));
    border-radius: calc(30 * var(--brand-mobile-unit));
    background: rgba(255,252,245,.3);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  .pioneer-mobile-principles-title {
    display: block;
    position: absolute;
    left: calc(27 * var(--brand-mobile-unit));
    bottom: calc(100% + 55 * var(--brand-mobile-unit));
    margin: 0;
    font-size: calc(40 * var(--brand-mobile-unit));
    line-height: calc(28 * var(--brand-mobile-unit));
    font-weight: 700;
  }

  .brand-page .pioneer-principles div {
    height: calc(99.25 * var(--brand-mobile-unit));
    font-size: calc(28 * var(--brand-mobile-unit));
    font-weight: 500;
  }

  .brand-page .pioneer-principles em {
    font-size: calc(20 * var(--brand-mobile-unit));
    color: rgba(255,255,255,.5);
  }

  .brand-page .pioneer-principles div:last-child::after { display: none; }
}


.brand-value-slide[data-value] .brand-value-copy > div {
  width: 100%;
}

.brand-value-slide[data-value] .brand-value-eyebrow {
  position: absolute;
  top: 7%;
  left: 5.35%;
  color: rgba(0,0,0,.5);
  font-size: calc(16 * var(--philosophy-unit));
  line-height: 1.5;
}

@media (min-width: 761px) {
  .brand-value-slide[data-value] h2 {
    position: absolute;
    top: 9.4%;
    left: 5.35%;
    font-weight: 700;
  }

  .brand-value-slide[data-value] .brand-value-copy p {
    position: absolute;
    left: 5.35%;
    bottom: 7.5%;
    width: 68.67%;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .brand-value-slide[data-value] .brand-value-eyebrow {
    top: 8.56%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(22 * var(--brand-mobile-unit));
    line-height: calc(28 * var(--brand-mobile-unit));
  }

  .brand-value-slide[data-value] .brand-value-copy {
    padding-inline: calc(53 * var(--brand-mobile-unit));
  }
}


.brand-hero-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(15,18,23,.35);
  backdrop-filter: blur(20px);
  cursor: pointer;
}
.brand-hero-arrow--previous { left: clamp(32px,2.5vw,48px); }
.brand-hero-arrow--next { right: clamp(32px,2.5vw,48px); }
.brand-hero-arrow img { display: block; width: 16px; height: 16px; }
.brand-hero-arrow--previous img { transform: rotate(-90deg); }
.brand-hero-arrow--next img { transform: rotate(90deg); }
.brand-hero-arrow:hover { background: rgba(15,18,23,.6); }
.brand-hero-arrow:focus-visible { outline: 2px solid #bfd6f7; outline-offset: 3px; }
@media (max-width: 760px) {
  .brand-hero-arrow { width: 44px; height: 44px; }
  .brand-hero-arrow--previous { left: 10px; }
  .brand-hero-arrow--next { right: 10px; }
}


@media (min-width: 761px) {
  .brand-page .pioneer-kicker {
    top: calc(95 * var(--pioneer-end-height-unit));
    width: calc(733 * var(--pioneer-end-unit));
    color: rgba(255,255,255,.5);
    font-size: calc(32 * var(--pioneer-end-unit));
    line-height: calc(40 * var(--pioneer-end-unit));
    font-weight: 900;
  }

  .brand-page .pioneer-kicker strong { color: #fff; font-weight: inherit; }

  .brand-page .pioneer-description {
    top: calc(223 * var(--pioneer-end-height-unit));
  }

  .brand-page .pioneer-mobile-principles-title {
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(100% + 51 * var(--pioneer-end-height-unit));
    margin: 0;
    color: #fff;
    font-size: calc(24 * var(--pioneer-end-unit));
    line-height: calc(28 * var(--pioneer-end-height-unit));
    font-weight: 500;
  }
}

@media (max-width: 760px) {
  .brand-value-desktop-break { display: none; }
}


@media (max-width: 760px) {
  .brand-page .pioneer-kicker {
    display: block;
    top: 3.81304%;
    left: calc(48 * var(--brand-mobile-unit));
    right: calc(48 * var(--brand-mobile-unit));
    width: auto;
    color: rgba(255,255,255,.5);
    font-size: calc(24 * var(--brand-mobile-unit));
    line-height: calc(32 * var(--brand-mobile-unit));
    font-weight: 500;
  }

  .brand-page .pioneer-kicker strong { color: #fff; font-weight: 500; }

  .brand-page .pioneer-description { top: 10.2091%; }
}


.brand-story-signature { display: none; }

@media (max-width: 760px) {
  .brand-story-text {
    justify-content: safe center;
    padding-block: calc(40 * var(--story-unit));
    font-weight: 500;
  }

  .brand-story-text h3 {
    margin: 0;
    font-weight: 500;
  }

  .brand-story-text .brand-story-signature {
    display: block;
    width: calc(300 * var(--story-unit));
    height: calc(75 * var(--story-unit));
    margin-top: calc(179 * var(--story-unit));
    object-fit: contain;
  }
}


@media (min-width: 761px) {
  .brand-story-text {
    --story-desktop-unit: min(1px,calc(100vw / 1920),calc(100svh / 1080));
    justify-content: safe center;
    padding-block: calc(40 * var(--story-desktop-unit));
    font-size: calc(20 * var(--story-desktop-unit));
    line-height: calc(32 * var(--story-desktop-unit));
    font-weight: 500;
  }

  .brand-story-text h3 { margin: 0; font-weight: 500; }

  .brand-story-text .brand-story-signature {
    display: block;
    flex-shrink: 0;
    width: calc(300 * var(--story-desktop-unit));
    height: calc(75 * var(--story-desktop-unit));
    margin-top: calc(98 * var(--story-desktop-unit));
    object-fit: contain;
  }
}