.brand-page {
  --ac-blue: #1853ff;
  --ac-navy: #0b1930;
  --ac-ice: #dcecff;
  overflow-x: clip;
  color: #0b0b0b;
  background: var(--ac-ice);
}

.brand-page main {
  font-family: "Patagonia Sans", Helvetica, Arial, sans-serif;
}

.brand-page main a {
  color: inherit;
  text-decoration: none;
}

.ape-brand-main {
  overflow: clip;
  background: var(--ac-ice);
}

.ac-pill {
  display: inline-flex;
  min-width: 156px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 999px;
  color: #0b0b0b;
  background: rgb(255 255 255 / 26%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 240ms ease, background 240ms ease, transform 240ms ease;
}

.ac-pill:hover,
.ac-pill:focus-visible {
  color: #fff !important;
  background: #0b0b0b;
  transform: translateY(-2px);
}

.brand-page main .ac-pill--light {
  border-color: rgb(255 255 255 / 55%);
  color: #0b0b0b;
  background: #fff;
}

.brand-page main .ac-pill--blue {
  border-color: var(--ac-blue);
  color: #fff;
  background: var(--ac-blue);
}

.brand-page main .ac-pill:hover,
.brand-page main .ac-pill:focus-visible {
  color: #fff;
  background: #0b0b0b;
}

.ac-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ac-text-link span {
  font-size: 16px;
  transition: transform 220ms ease;
}

.ac-text-link:hover span,
.ac-text-link:focus-visible span {
  transform: translate(3px, -3px);
}

/* 01 — homepage hero */
.ac-hero {
  --hero-color: #697b87;
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 0 32px 44px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  overflow: hidden;
  color: #fff;
  background: var(--hero-color);
  transition: background-color 700ms ease;
}

.ac-hero__slides,
.ac-hero__slide,
.ac-hero__wash {
  position: absolute;
  inset: 0;
}

.ac-hero__slide {
  margin: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 650ms ease, transform 7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ac-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.ac-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ac-hero__wash {
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 10%) 0%, transparent 38%),
    linear-gradient(0deg, rgb(5 14 23 / 76%) 0%, transparent 62%),
    linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 65%);
  pointer-events: none;
}

.ac-hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 12px 24px;
}

.ac-hero__eyebrow {
  display: flex;
  grid-column: 2 / span 6;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ac-hero__eyebrow > span:first-child {
  color: #ff794d;
  font-size: 20px;
}

.ac-hero__eyebrow strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.ac-hero__title-window,
.ac-hero__copy-window {
  overflow: hidden;
}

.ac-hero__title-window {
  grid-column: 2 / span 6;
}

.ac-hero h1 {
  margin: 0;
  font-size: min(clamp(79.2px, 7.51vw, 111.6px), var(--site-title-cap));
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-transform: uppercase;
}

.ac-hero__intro {
  display: flex;
  grid-column: 2 / span 6;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.ac-hero__intro p {
  max-width: 340px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ac-hero__index {
  display: flex;
  grid-column: 8 / span 4;
  grid-row: 1 / span 3;
  align-self: end;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.ac-hero__thumbs {
  display: flex;
  gap: 8px;
}

.ac-hero__thumbs button {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #07111b;
  box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
  cursor: pointer;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.ac-hero__thumbs button.is-active {
  border-color: #fff;
  box-shadow: 0 0 24px rgb(255 255 255 / 70%);
}

.ac-hero__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ac-hero__thumbs i {
  position: absolute;
  right: 6px;
  bottom: 4px;
  left: 6px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.ac-hero__thumbs button.is-active i {
  animation: ac-progress 7s linear forwards;
}

.ac-hero__controls {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(-50%);
}

.ac-hero__controls button {
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: rgb(0 0 0 / 12%);
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.ac-hero__controls button:hover,
.ac-hero__controls button:focus-visible {
  color: #0b0b0b;
  background: #fff;
  transform: scale(1.06);
}

.ac-hero__controls svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.ac-hero.is-changing .ac-hero__eyebrow,
.ac-hero.is-changing .ac-hero__title-window,
.ac-hero.is-changing .ac-hero__copy-window {
  animation: ac-copy-swap 400ms ease both;
}

@keyframes ac-progress {
  to { transform: scaleX(1); }
}

@keyframes ac-copy-swap {
  0% { opacity: 1; transform: translateY(0); }
  45% { opacity: 0; transform: translateY(-18px); }
  55% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 02 — spotlight */
.ac-spotlight {
  position: relative;
  min-height: calc(100svh + 192px);
  padding: 96px 32px;
  overflow: hidden;
  background: linear-gradient(145deg, #d7ecff 0%, #dfe7ff 48%, #bfddff 100%);
}

.ac-spotlight::before {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 75% 30%, rgb(68 126 255 / 36%), transparent 30%),
    radial-gradient(circle at 30% 70%, rgb(113 210 255 / 25%), transparent 31%);
  content: "";
  filter: blur(40px);
}

.ac-spotlight__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  perspective: 1000px;
  pointer-events: none;
}

.ac-spotlight__background figure {
  position: absolute;
  width: clamp(150px, 18vw, 280px);
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  opacity: 0.22;
  box-shadow: 0 26px 70px rgb(16 71 140 / 20%);
  transform: translate3d(var(--float-x, 0), var(--float-y, 0), var(--float-z, 0)) rotate(var(--float-r, 0deg));
  will-change: transform;
}

.ac-spotlight__background figure:nth-child(1) { top: 10%; left: -5%; --base-r: -11deg; }
.ac-spotlight__background figure:nth-child(2) { top: 4%; right: 17%; --base-r: 9deg; }
.ac-spotlight__background figure:nth-child(3) { right: -4%; bottom: 8%; --base-r: -13deg; }
.ac-spotlight__background figure:nth-child(4) { bottom: -10%; left: 36%; --base-r: 7deg; }

.ac-spotlight__background img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ac-spotlight__grid {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
}

.ac-spotlight__story {
  display: flex;
  grid-column: 2 / span 6;
  max-width: 760px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ac-spotlight__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ac-spotlight__mark strong {
  padding: 5px 8px 4px;
  color: #fff;
  background: var(--ac-blue);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.ac-spotlight h2 {
  max-width: 760px;
  margin: 0;
  font-size: min(clamp(79.2px, 7.51vw, 108px), var(--site-title-cap));
  font-weight: 800;
  letter-spacing: -0.068em;
  line-height: 0.82;
  text-transform: uppercase;
}

.ac-spotlight__story p {
  width: min(90%, 680px);
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.ac-spotlight__actions {
  display: flex;
  gap: 24px;
  margin-top: 4px;
}

.ac-spotlight__feature {
  position: relative;
  grid-column: 9 / span 4;
  min-height: 520px;
  color: #fff;
  perspective: 800px;
}

.ac-spotlight__feature-media {
  position: absolute;
  inset: 0 -10% 0 2%;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 60%);
  border-radius: 16px;
  background: linear-gradient(45deg, #708cff, #8cdfff);
  box-shadow: 0 32px 80px rgb(23 74 138 / 32%);
  transform: rotate(5deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 120ms linear;
}

.ac-spotlight__feature-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(7 23 44 / 88%) 100%);
  content: "";
}

.ac-spotlight__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ac-spotlight__feature-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 16px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ac-spotlight__feature h3 {
  margin: 0;
  font-size: min(clamp(34.2px, 3.02vw, 45px), var(--site-title-cap));
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
}

.ac-spotlight__feature p {
  max-width: 305px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* 03 — draggable card strip */
.ac-carousel {
  position: relative;
  display: grid;
  height: 830px;
  padding: 96px 32px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: 32px 24px;
  overflow: hidden;
  background: #f4f6f2;
}

.ac-carousel__header {
  display: flex;
  grid-column: 1 / -1;
  align-items: end;
  justify-content: space-between;
}

.ac-carousel h2 {
  margin: 0;
  font-size: min(32px, var(--site-title-cap));
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.ac-carousel__viewport {
  grid-column: 1 / -1;
  width: calc(100% + 64px);
  margin-left: -32px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ac-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.ac-carousel__track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 0 32px;
  transform: translate3d(var(--carousel-x, 0px), 0, 0);
  will-change: transform;
}

.ac-product-card {
  position: relative;
  display: grid;
  width: 304px;
  height: 570px;
  flex: 0 0 304px;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  color: #0a0a0a;
  background: #fff;
}

.ac-product-card::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 0 solid #0a0a0a;
  content: "";
  pointer-events: none;
  transition: border-width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ac-product-card:hover::after,
.ac-product-card:focus-visible::after {
  border-width: 10px;
}

.ac-product-card__category {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 30px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ac-product-card__media {
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
}

.ac-product-card__media--green { background: #adcdb3; }
.ac-product-card__media--sand { background: #dfcbb0; }
.ac-product-card__media--blue { background: #a8c7de; }
.ac-product-card__media--rose { background: #dfb9b2; }
.ac-product-card__media--ink { background: #aab1b2; }
.ac-product-card__media--mint { background: #b7d6ca; }

.ac-product-card__media img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgb(0 0 0 / 13%));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ac-product-card:hover .ac-product-card__media img,
.ac-product-card:focus-visible .ac-product-card__media img {
  transform: scale(1.06) rotate(-2deg);
}

.ac-product-card__body {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  gap: 12px;
  padding: 28px 30px 30px;
}

.ac-product-card__body strong {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-transform: uppercase;
}

.ac-product-card__body small {
  font-size: 14px;
  line-height: 1.35;
}

.ac-carousel__hint {
  position: absolute;
  right: 32px;
  bottom: 34px;
  margin: 0;
  color: rgb(0 0 0 / 52%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 04 — discovery marquee */
.ac-discover {
  position: relative;
  display: flex;
  min-height: 720px;
  padding: 96px 0;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  color: var(--ac-navy);
  background:
    radial-gradient(circle at 50% 0%, rgb(255 255 255 / 85%), transparent 32%),
    linear-gradient(180deg, #d7eaff 0%, #cee3ff 100%);
}

.ac-marquee {
  display: flex;
  overflow: hidden;
}

.ac-marquee__track {
  display: flex;
  width: max-content;
  animation: ac-marquee-forward 34s linear infinite;
  will-change: transform;
}

.ac-marquee--reverse .ac-marquee__track {
  animation-name: ac-marquee-reverse;
  animation-duration: 38s;
}

.ac-marquee__group {
  display: flex;
  flex: none;
  align-items: baseline;
}

.ac-marquee a {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 16px;
  margin-right: 48px;
}

.ac-marquee a span {
  position: relative;
  display: block;
  overflow: hidden;
  font-size: clamp(78px, 8.8vw, 132px);
  font-weight: 800;
  letter-spacing: -0.062em;
  line-height: 0.83;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms ease;
}

.ac-marquee a:hover span,
.ac-marquee a:focus-visible span {
  color: var(--ac-blue);
}

.ac-marquee img {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 16px;
  object-fit: cover;
  background: var(--ac-blue);
  transition: border-radius 300ms ease, transform 300ms ease;
}

.ac-marquee a:hover img,
.ac-marquee a:focus-visible img {
  border-radius: 50%;
  transform: rotate(5deg) scale(1.05);
}

.ac-discover__cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

@keyframes ac-marquee-forward {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ac-marquee-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 1023px) {
  .ac-hero {
    min-height: 100svh;
    padding: 0 24px 44px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .ac-hero__content {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .ac-hero__eyebrow,
  .ac-hero__title-window,
  .ac-hero__intro {
    grid-column: 1 / -1;
  }

  .ac-hero__eyebrow {
    justify-content: center;
  }

  .ac-hero__eyebrow strong {
    font-size: 24px;
  }

  .ac-hero h1 {
    font-size: min(clamp(52.2px, 15.3vw, 73.8px), var(--site-title-cap));
    line-height: 0.86;
    text-align: center;
  }

  .ac-hero__intro {
    align-items: center;
    text-align: center;
  }

  .ac-hero__intro p {
    max-width: 300px;
  }

  .ac-hero__index {
    grid-column: 1 / -1;
    grid-row: auto;
    align-items: center;
    margin-top: 36px;
  }

  .ac-hero__thumbs,
  .ac-hero__controls {
    display: none;
  }

  .ac-spotlight {
    min-height: calc(100svh + 192px);
    padding: 96px 24px;
  }

  .ac-spotlight__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: center;
    gap: 30px 8px;
  }

  .ac-spotlight__story {
    grid-column: 1 / -1;
    gap: 12px;
  }

  .ac-spotlight h2 {
    font-size: min(clamp(48.6px, 13.5vw, 66.6px), var(--site-title-cap));
  }

  .ac-spotlight__story p {
    width: 100%;
    font-size: 14px;
  }

  .ac-spotlight__actions {
    gap: 10px;
  }

  .ac-spotlight__actions .ac-pill {
    min-width: 0;
  }

  .ac-spotlight__feature {
    grid-column: 3 / span 4;
    min-height: 360px;
  }

  .ac-spotlight__feature-media {
    inset: 0 -50% 0 8%;
  }

  .ac-spotlight__feature-copy {
    bottom: 8px;
  }

  .ac-spotlight__feature h3 {
    font-size: min(36px, var(--site-title-cap));
  }

  .ac-spotlight__feature p {
    max-width: 180px;
    font-size: 10px;
  }

  .ac-spotlight__background figure {
    width: 150px;
    opacity: 0.12;
  }

  .ac-carousel {
    height: 460px;
    padding: 96px 24px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px 8px;
  }

  .ac-carousel h2 {
    font-size: min(24px, var(--site-title-cap));
  }

  .ac-carousel__header .ac-text-link {
    font-size: 9px;
  }

  .ac-carousel__viewport {
    width: calc(100% + 48px);
    margin-left: -24px;
  }

  .ac-carousel__track {
    gap: 12px;
    padding: 0 24px;
  }

  .ac-product-card {
    width: 154px;
    height: 236px;
    flex-basis: 154px;
  }

  .ac-product-card::after {
    display: none;
  }

  .ac-product-card__category {
    top: 14px;
    left: 14px;
    font-size: 7px;
    letter-spacing: 0.13em;
  }

  .ac-product-card__media {
    min-height: 142px;
  }

  .ac-product-card__body {
    min-height: 94px;
    gap: 6px;
    padding: 14px;
  }

  .ac-product-card__body strong {
    font-size: 21px;
  }

  .ac-product-card__body small {
    display: none;
  }

  .ac-carousel__hint {
    display: none;
  }

  .ac-discover {
    min-height: 558px;
    padding: 96px 0;
    gap: 18px;
  }

  .ac-marquee {
    overflow: visible;
  }

  .ac-marquee__track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .ac-marquee--reverse .ac-marquee__track {
    animation: none;
    transform: none;
  }

  .ac-marquee__group {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .ac-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .ac-marquee a {
    margin: 0;
  }

  .ac-marquee a span {
    font-size: clamp(38px, 12vw, 52px);
    line-height: 0.85;
    text-align: center;
  }

  .ac-marquee img {
    display: none;
  }

  .ac-discover__cta {
    margin-top: 22px;
  }
}

@media (max-width: 520px) {
  .ac-hero__slide img {
    object-position: 64% center;
  }

  .ac-hero__slide:nth-child(2) img {
    object-position: 54% center;
  }

  .ac-hero__slide:nth-child(3) img {
    object-position: 55% center;
  }

  .ac-hero__eyebrow > span:first-child {
    font-size: 16px;
  }

  .ac-hero__eyebrow strong {
    font-size: 21px;
  }

  .ac-hero__eyebrow > span:last-child {
    font-size: 10px;
  }

  .ac-pill {
    min-width: 150px;
    min-height: 46px;
  }

  .ac-spotlight {
    min-height: 1036px;
  }

  .ac-spotlight__grid {
    min-height: 844px;
  }

  .ac-spotlight__story p:nth-of-type(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-hero__slide,
  .ac-hero__thumbs i,
  .ac-marquee__track,
  .ac-spotlight__feature-media {
    animation: none !important;
    transition: none !important;
  }
}

/* Original brand-page sections — retained below the ApeChain-inspired additions. */
.brand-page {
  --type-section-title: clamp(38px, 4vw, 65px);
  --type-card-title: clamp(24px, 2.15vw, 36px);
  --type-description: clamp(15px, 1.12vw, 18px);
  --type-card-description: clamp(13px, 0.95vw, 16px);
  --type-subtitle: clamp(12px, 0.9vw, 15px);
}

.brand-shell,
.iper-header {
  width: 100%;
}

.brand-shell {
  padding-inline: 2.778vw;
}

.iper-header {
  display: flex;
  flex-direction: column;
  gap: 0.833vw;
}

.iper-header__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 2.778vw;
}

.iper-header h1,
.iper-header h2,
.brand-work__copy h2,
.brand-journal__card strong {
  margin: 0;
  font-weight: 800;
}

.iper-header h1,
.iper-header h2 {
  max-width: 46vw;
  font-size: min(var(--type-section-title), var(--site-title-cap));
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.iper-header__top > p {
  max-width: 39vw;
  margin: 0;
  font-size: var(--type-description);
  line-height: 1.45;
}

.iper-header__side-link {
  justify-self: end;
  padding-bottom: 0.35vw;
  border-bottom: 1px solid currentColor;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.iper-header__rule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  border-top: 6px solid currentColor;
}

.iper-header__rule > span {
  padding-top: 0.833vw;
  font-size: var(--type-subtitle);
  font-weight: 800;
  line-height: 1.4;
}

.iper-header__rule > :nth-child(2) {
  grid-column: 2;
}

.iper-header__rule .iper-gradient-button {
  grid-column: 4;
  justify-self: end;
  margin-top: 0.85vw;
}

.iper-header--dark {
  color: #fff;
}

.brand-page main .iper-gradient-button {
  display: inline-flex;
  min-height: 4vw;
  align-items: center;
  justify-content: center;
  padding: 1.111vw 1.389vw 0.833vw;
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 0.833vw;
  color: #f6efed;
  background: linear-gradient(90deg, #fa315c, #ff6507);
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%), 0 4px 12px rgb(0 0 0 / 10%), 0 6px 30px rgb(0 0 0 / 10%);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.brand-page main .iper-gradient-button:hover,
.brand-page main .iper-gradient-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 16%), 0 12px 34px rgb(0 0 0 / 12%);
}

.brand-ooa-hero {
  position: relative;
  display: flex;
  min-height: max(620px, calc(100svh - 112px));
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  color: #efeeee;
  background: #101319;
}

.brand-ooa-hero__media,
.brand-ooa-hero__shade {
  position: absolute;
  inset: 0;
}

.brand-ooa-hero__media {
  z-index: -2;
  background: #101319;
  overflow: hidden;
}

.brand-ooa-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-ooa-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.778vh);
  height: max(100%, 56.25vw);
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.brand-ooa-hero__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(8 11 15 / 24%) 0%, rgb(8 11 15 / 7%) 38%, rgb(8 11 15 / 58%) 100%),
    linear-gradient(90deg, rgb(8 11 15 / 16%) 0%, transparent 56%);
}

.brand-ooa-hero__layout {
  position: relative;
  z-index: 2;
  display: flex;
  width: calc(100% - 5.556vw);
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  margin: 0 auto 48px;
}

.brand-ooa-hero__copy {
  min-width: 0;
}

.brand-ooa-hero__eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: var(--type-subtitle);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.brand-ooa-hero__eyebrow::after {
  width: 100%;
  height: 5px;
  background: #efeeee;
  content: "";
}

.brand-ooa-hero h1 {
  max-width: 10ch;
  margin: 0;
  font-size: min(var(--type-section-title), var(--site-title-cap));
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 0.98;
  text-wrap: balance;
}

.brand-ooa-hero__stories {
  display: flex;
  width: 100%;
  max-width: 352px;
  flex: 0 0 352px;
  flex-direction: column;
  gap: 12px;
}

.brand-page main .brand-ooa-card {
  display: flex;
  min-height: 116px;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  color: #efeeee;
  background: rgb(239 238 238 / 25%);
  backdrop-filter: blur(10px);
  transition: background-color 200ms ease, transform 200ms ease;
}

.brand-page main .brand-ooa-card:hover,
.brand-page main .brand-ooa-card:focus-visible {
  background: rgb(239 238 238 / 40%);
  transform: translateY(-2px);
}

.brand-ooa-card > img {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  border-radius: 2px;
  object-fit: cover;
}

.brand-ooa-card__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 4px 6px 0;
  font-size: 14px;
  line-height: 1.2;
}

.brand-ooa-card__content strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.brand-ooa-card__content > span {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.brand-ooa-card__content b {
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
  transition: transform 200ms ease;
}

.brand-ooa-card:hover .brand-ooa-card__content b,
.brand-ooa-card:focus-visible .brand-ooa-card__content b {
  transform: translate(2px, -2px);
}

.brand-work,
.brand-collaborators,
.brand-journal {
  scroll-margin-top: var(--header-height);
}

.brand-work {
  --brand-image-pan: 0vw;
  position: relative;
  z-index: 1;
  height: 200vw;
  padding-top: 5.556vw;
  padding-bottom: 1.389vw;
  color: #fff;
  background: #141414;
}

.brand-work__sticky {
  position: sticky;
  top: var(--header-height);
  display: flex;
  height: calc(100vh - var(--header-height));
  flex-direction: column;
  gap: 1.111vw;
  overflow: hidden;
}

.brand-work .iper-header {
  padding-inline: 2.778vw;
}

.brand-work .iper-header__top {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
}

.brand-work .iper-header h1 {
  max-width: none;
}

.brand-work__viewport {
  min-height: 0;
  overflow: visible;
}

.brand-work__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  gap: 1.389vw;
  padding-inline: 2.778vw;
  will-change: transform;
}

.brand-work__card {
  display: flex;
  min-width: 0;
  flex: 0 0 55vw;
  flex-direction: column;
  gap: 1vw;
  opacity: 0.92;
  transition: opacity 220ms ease;
}

.brand-work__card:hover {
  opacity: 1;
}

.brand-work__media {
  display: flex;
  height: 50vh;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.389vw;
}

.brand-work__media img {
  display: block;
  width: 140%;
  min-width: 140%;
  height: 100%;
  flex: 0 0 auto;
  object-fit: cover;
  transform: translate3d(var(--brand-image-pan), 0, 0);
  will-change: transform;
}

.brand-work__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 2.222vw;
}

.brand-work__copy h2 {
  font-size: min(var(--type-card-title), var(--site-title-cap));
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.brand-work__copy p {
  margin: 0;
  color: #fff;
  font-size: var(--type-card-description);
  line-height: 1.45;
}

.brand-collaborators,
.brand-journal {
  color: #141414;
  background: #f6efed;
}

.brand-collaborators {
  padding-block: 5.556vw;
}

.brand-collaborators .brand-shell,
.brand-journal .brand-shell {
  display: flex;
  flex-direction: column;
  gap: 2.778vw;
}

.brand-journal__card > span {
  display: flex;
  flex-direction: column;
  gap: 0.45vw;
}

.brand-journal__card small {
  color: rgb(20 20 20 / 48%);
  font-size: var(--ones-type-body) !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.brand-proof__label {
  color: rgb(20 20 20 / 55%);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-proof {
  display: grid;
  gap: 1.389vw;
}

.brand-proof__filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand-proof__stage {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.32fr);
  overflow: hidden;
  border-radius: 1.389vw;
  color: #f6efed;
  background: #10100f;
  box-shadow: 0 20px 60px rgb(20 20 20 / 14%);
}

.brand-proof__intro {
  display: flex;
  min-height: 31vw;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.778vw;
  border-right: 1px solid rgb(255 255 255 / 16%);
}

.brand-proof__intro small,
.brand-proof__badges figcaption small {
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-proof__intro h3 {
  max-width: 10ch;
  margin-block: auto 1.8vw;
  font-size: min(clamp(2.16rem, 4.05vw, 5.04rem), var(--site-title-cap));
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.brand-proof__intro p {
  max-width: 34rem;
  margin: 0;
  color: rgb(246 239 237 / 54%);
  font-size: var(--type-card-description);
  line-height: 1.45;
}

.brand-proof__logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.brand-proof__logo {
  position: relative;
  display: grid;
  min-height: 15.5vw;
  padding: 2.2vw;
  border-right: 1px solid rgb(255 255 255 / 16%);
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  place-items: center;
  background: #10100f;
  transition: color 240ms ease, background 240ms ease;
}

.brand-proof__logo:nth-child(2n) {
  border-right: 0;
}

.brand-proof__logo:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.brand-proof__logo::after {
  position: absolute;
  right: 1vw;
  bottom: 0.8vw;
  color: rgb(255 255 255 / 28%);
  content: "↗︎";
  font-family:Arial,Helvetica,sans-serif;
  font-variant-emoji:text;
  font-size: var(--type-card-description);
  transition: color 240ms ease, transform 240ms ease;
}

.brand-proof__logo:hover,
.brand-proof__logo:focus-visible {
  background: #272725;
}

.brand-proof__logo:hover::after,
.brand-proof__logo:focus-visible::after {
  color: #fff;
  transform: translate(2px, -2px);
}

.brand-proof__logo img {
  display: block;
  width: auto;
  max-width: 68%;
  max-height: 4.5vw;
  object-fit: contain;
  filter: grayscale(1) invert(1) brightness(1.2);
  opacity: 0.76;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
}

.brand-proof__logo--golfwrx img {
  filter: url("#brand-proof-alpha-boost") grayscale(1) brightness(1.2);
}

.brand-proof__logo--mygolfspy img {
  max-width: 72%;
}

.brand-proof__logo:hover img,
.brand-proof__logo:focus-visible img {
  opacity: 1;
  transform: scale(1.035);
}

.brand-proof__disclosure {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8vw 1vw;
  color: rgb(246 239 237 / 38%);
  font-size: clamp(9px, 0.7vw, 12px);
  letter-spacing: 0.02em;
  text-align: right;
}

.brand-proof__badges {
  position: relative;
  display: grid;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgb(20 20 20 / 14%);
  border-radius: 1.389vw;
  background: #f5f0e9;
}

.brand-proof__badges img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
}

.brand-proof__badges figcaption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2vw;
  padding: 1.2vw 1.5vw 1.5vw;
  border-top: 1px solid rgb(20 20 20 / 14%);
}

.brand-proof__badges figcaption p {
  max-width: 44rem;
  margin: 0;
  color: rgb(20 20 20 / 56%);
  font-size: var(--type-card-description);
  line-height: 1.4;
  text-align: right;
}

.brand-journal {
  padding: 2.778vw 0 6.944vw;
}

.brand-journal .iper-header__top {
  align-items: start;
}

.brand-journal__all-stories {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff !important;
  background: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform 200ms ease;
}

.brand-journal__all-stories:hover,
.brand-journal__all-stories:focus-visible {
  color: #fff !important;
  background: #000;
  transform: translateY(-2px);
}

.brand-journal .iper-gradient-button {
  justify-self: end;
}

.brand-journal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.389vw;
}

.brand-journal__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.389vw;
}

.brand-journal__card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1.389vw;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
}

.brand-journal__card:hover > img {
  filter: saturate(1.08);
  transform: scale(0.99);
}

.brand-journal__card strong {
  max-width: 86%;
  font-size: var(--type-card-title);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.brand-journal__card small {
  max-width: 72%;
}

@media (max-width: 767px) {
  .brand-shell {
    padding-inline: 14px;
  }

  .iper-header {
    gap: 16px;
  }

  .iper-header__top,
  .brand-work .iper-header__top {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }

  .iper-header h1,
  .iper-header h2,
  .iper-header__top > p {
    max-width: none;
  }

  .iper-header__side-link,
  .brand-journal .iper-gradient-button,
  .brand-journal__all-stories {
    justify-self: start;
  }

  .iper-header__rule {
    grid-template-columns: 48px 1fr auto;
    border-top-width: 4px;
  }

  .iper-header__rule > span {
    padding-top: 10px;
  }

  .iper-header__rule > :nth-child(2) {
    grid-column: 2;
  }

  .iper-header__rule .iper-gradient-button {
    grid-column: 3;
    margin-top: 10px;
  }

  .brand-page main .iper-gradient-button {
    min-height: 48px;
    padding: 14px 18px;
    border-radius: 10px;
  }

  .brand-ooa-hero {
    min-height: max(680px, calc(100svh - 100px));
  }

  .brand-ooa-hero__layout {
    width: calc(100% - 28px);
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-bottom: 24px;
  }

  .brand-ooa-hero__eyebrow {
    margin-bottom: 18px;
    font-size: var(--type-subtitle);
  }

  .brand-ooa-hero h1 {
    width: 100%;
    max-width: none;
    font-size: min(var(--type-section-title), var(--site-title-cap));
    line-height: 0.98;
  }

  .brand-ooa-hero__stories {
    max-width: none;
    flex: auto;
    gap: 8px;
  }

  .brand-page main .brand-ooa-card {
    min-height: 88px;
    padding: 6px;
  }

  .brand-ooa-card > img {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  .brand-ooa-card__content {
    padding: 3px 4px 3px 0;
  }

  .brand-ooa-card__content strong {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }

  .brand-work {
    height: auto;
    padding: 72px 0 24px;
  }

  .brand-work__sticky {
    position: relative;
    top: auto;
    height: auto;
    gap: 28px;
    overflow: visible;
  }

  .brand-work .iper-header {
    padding-inline: 14px;
  }

  .brand-work__viewport {
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .brand-work__viewport::-webkit-scrollbar {
    display: none;
  }

  .brand-work__track {
    gap: 16px;
    padding-inline: 24px;
    transform: none !important;
  }

  .brand-work__card {
    flex-basis: calc(100vw - 64px);
    gap: 14px;
    opacity: 1;
    scroll-snap-align: start;
  }

  .brand-work__media {
    height: 52vh;
    min-height: 390px;
    border-radius: 14px;
  }

  .brand-work__media img {
    width: 100%;
    min-width: 100%;
    transform: none !important;
  }

  .brand-work__copy {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .brand-collaborators {
    padding-block: 72px;
  }

  .brand-collaborators .brand-shell,
  .brand-journal .brand-shell {
    gap: 40px;
  }

  .brand-collaborators .iper-header__rule {
    grid-template-columns: 1fr;
  }

  .brand-proof__label {
    white-space: nowrap;
  }

  .brand-journal__grid {
    grid-template-columns: 1fr;
  }

  .brand-journal__card > img {
    border-radius: 14px;
  }

  .brand-proof {
    gap: 14px;
  }

  .brand-proof__stage {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .brand-proof__intro {
    min-height: 430px;
    padding: 28px 14px;
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 16%);
  }

  .brand-proof__intro h3 {
    width: 100%;
    max-width: none;
    margin-block: auto 24px;
    font-size: min(clamp(2.7rem, 11.7vw, 4.14rem), var(--site-title-cap));
    text-wrap: wrap;
  }

  .brand-proof__logo {
    min-height: 150px;
    padding: 24px 16px;
  }

  .brand-proof__logo::after {
    right: 12px;
    bottom: 10px;
  }

  .brand-proof__logo img {
    max-width: 76%;
    max-height: 46px;
  }

  .brand-proof__disclosure {
    padding: 12px 14px;
    font-size: 9px;
    line-height: 1.35;
  }

  .brand-proof__badges {
    border-radius: 14px;
  }

  .brand-proof__badges img {
    width: 100%;
    max-width: none;
    transform: none;
  }

  .brand-proof__badges figcaption {
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
  }

  .brand-proof__badges figcaption p {
    text-align: left;
  }

  .brand-journal {
    padding: 24px 0 84px;
  }

  .brand-journal__grid {
    gap: 42px;
  }

  .brand-journal__card {
    gap: 16px;
  }

  .brand-journal__card strong,
  .brand-journal__card small {
    max-width: none;
  }

}

/* Keep the product-system eyebrow and title as one compact heading group. */
.brand-proof__intro {
  justify-content: flex-start;
}
.brand-proof__intro h3 {
  margin: clamp(18px, 1.6vw, 28px) 0 clamp(20px, 1.8vw, 28px);
}
@media (min-width: 721px) {
  .brand-proof__intro h3 {
    width: 100%;
    max-width: 34rem;
  }
}

@media (max-width: 720px) {
  .brand-proof__stage {
    height: min(760px, 100svh);
    min-height: 0;
    grid-template-rows: clamp(310px, 38svh, 330px) minmax(0, 1fr);
  }
  .brand-proof__intro {
    min-height: 0;
  }
  .brand-proof__logos {
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .brand-proof__logo {
    min-height: 0;
    height: auto;
  }
  .brand-proof__logo img {
    max-height: 56px;
  }
}

@media (max-width: 360px) {
  .brand-proof__intro {
    padding: 16px 14px;
  }
  .brand-proof__intro h3 {
    margin: 12px 0 14px;
    font-size: min(clamp(2.35rem, 11.7vw, 4.14rem), var(--site-title-cap));
  }
}

/* Keep the brand page on the same four-level type scale used site-wide. */
.brand-ooa-hero h1,
.brand-work .iper-header h1,
.brand-collaborators .iper-header h2,
.brand-proof__intro h3,
.brand-journal .iper-header h2 {
  font-size:min(var(--ones-type-heading), var(--site-title-cap));
}