/* Shared page hero */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(48rem, 40vw, 78rem);
  padding: calc(var(--header-height) + 5rem) 0 clamp(6rem, 7vw, 13rem);
  overflow: clip;
  background: var(--surface-gradient);
}

.page-hero--dark {
  color: var(--white);
  background: var(--footer);
}

.page-hero--red {
  color: var(--white);
  background: var(--red-gradient);
}

.page-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(24rem, .8fr);
  align-items: end;
  gap: clamp(4rem, 8vw, 15rem);
}

.page-hero__copy {
  display: grid;
  gap: 2rem;
}

.page-hero__copy h1 {
  max-width: 14ch;
  font-size: var(--major-heading);
}

.page-hero__copy p {
  max-width: 58ch;
  color: var(--gray-600);
  font-size: var(--lead);
}

.page-hero--dark .page-hero__copy p,
.page-hero--red .page-hero__copy p {
  color: rgb(255 255 255 / .72);
}

.page-hero__visual {
  position: relative;
  min-height: 28rem;
}

.page-hero__orb {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: clamp(25rem, 30vw, 55rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .95), rgb(222 39 31 / .12) 30%, rgb(222 39 31 / .7) 70%, rgb(111 20 16 / .9));
  box-shadow: inset -3rem -3rem 9rem rgb(34 37 43 / .18), 0 4rem 12rem rgb(222 39 31 / .2);
}

.page-hero__ring {
  position: absolute;
  right: 22%;
  bottom: 28%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgb(222 39 31 / .4);
  border-radius: 50%;
}

.page-hero--dark .page-hero__ring,
.page-hero--red .page-hero__ring {
  border-color: rgb(255 255 255 / .3);
}

/* Home hero */
.home-hero {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  color: var(--white);
  background: var(--ink);
}

.hero-carousel,
.hero-carousel__track,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-carousel__track {
  isolation: isolate;
}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease-standard), visibility .6s;
}

.hero-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.hero-slide picture,
.hero-slide img {
  width: 100%;
  height: 100%;
}

.hero-slide img {
  object-fit: cover;
}

.hero-slide::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(34 37 43 / .25) 0%, rgb(34 37 43 / .02) 42%, rgb(34 37 43 / .72) 100%);
  content: '';
}

.hero-slide[data-theme='light']::after {
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .1) 45%, rgb(255 255 255 / .8));
}

.hero-slide__content {
  position: absolute;
  right: var(--page-gutter);
  bottom: clamp(7rem, 8vw, 14rem);
  left: var(--page-gutter);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem);
  align-items: end;
  gap: 4rem;
}

.hero-slide[data-theme='light'] {
  color: var(--ink);
}

.hero-slide__title {
  max-width: 12ch;
  font-size: var(--hero);
  line-height: 1.08;
}

.hero-slide__aside {
  display: grid;
  justify-items: start;
  gap: 2rem;
}

.hero-slide__aside p {
  color: rgb(255 255 255 / .76);
  font-size: var(--lead);
}

.hero-slide[data-theme='light'] .hero-slide__aside p {
  color: var(--gray-600);
}

.hero-nav {
  position: absolute;
  right: var(--page-gutter);
  bottom: 2.6rem;
  z-index: 4;
  display: flex;
  gap: .8rem;
}

.hero-nav__button {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border: 1px solid rgb(255 255 255 / .45);
  border-radius: 50%;
  color: var(--white);
  background: rgb(34 37 43 / .12);
  font-size: 1.1rem;
  backdrop-filter: blur(10px);
  transition: color .2s var(--ease-standard), background .2s var(--ease-standard), border-color .2s var(--ease-standard), transform .2s var(--ease-out);
}

.hero-nav__button:hover,
.hero-nav__button[aria-current='true'] {
  color: var(--red);
  border-color: var(--white);
  background: var(--white);
  transform: scale(1.06);
}

.hero-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: .3rem;
  background: rgb(255 255 255 / .16);
}

.hero-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
}

.hero-progress.is-running span {
  animation: hero-progress 4s linear forwards;
}

@keyframes hero-progress {
  to { width: 100%; }
}

/* Product story */
.product-story {
  overflow: clip;
  background: var(--gray-200);
}

.product-story__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(4rem, 8vw, 15rem);
  min-height: 90rem;
}

.product-story__copy {
  display: grid;
  align-content: center;
  gap: 2rem;
}

.product-story__copy h2 {
  max-width: 12ch;
  font-size: var(--major-heading);
}

.product-story__copy p {
  max-width: 50ch;
  color: var(--gray-600);
  font-size: var(--lead);
}

.product-story__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64rem;
  transform: translateY(calc((.5 - var(--progress, .5)) * 8rem));
}

.product-story__backdrop {
  position: absolute;
  width: min(45vw, 75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red-gradient);
  transform: scale(calc(.82 + var(--progress, .5) * .18)) rotate(calc((var(--progress, .5) - .5) * 8deg));
}

.product-story__image {
  position: relative;
  z-index: 2;
  width: min(42vw, 70rem);
  filter: drop-shadow(0 4rem 5rem rgb(34 37 43 / .25));
  transform: translate3d(0, calc((.5 - var(--progress, .5)) * 5rem), 0) rotate(calc((.5 - var(--progress, .5)) * 3deg)) scale(calc(.92 + var(--progress, .5) * .08));
}

.story-candy {
  position: absolute;
  z-index: 3;
  width: clamp(3rem, 4vw, 7rem);
  aspect-ratio: 1;
  border-radius: 42% 58% 68% 32% / 45% 38% 62% 55%;
  background: linear-gradient(135deg, #fff, #ff8f88 38%, var(--red));
  box-shadow: inset -.8rem -.8rem 1.8rem rgb(111 20 16 / .22), 0 1rem 3rem rgb(34 37 43 / .15);
}

.story-candy--1 {
  top: 15%;
  left: 8%;
  transform: translateY(calc((.5 - var(--progress, .5)) * 12rem)) rotate(calc(var(--progress, .5) * 120deg));
}

.story-candy--2 {
  right: 6%;
  bottom: 18%;
  transform: translateY(calc((var(--progress, .5) - .5) * 16rem)) rotate(calc(var(--progress, .5) * -150deg));
}

.story-candy--3 {
  top: 26%;
  right: 4%;
  width: clamp(1.8rem, 2.2vw, 4rem);
  background: var(--white);
  transform: scale(calc(.7 + var(--progress, .5) * .3));
}

/* Countries / feature rail */
.countries-section {
  overflow: clip;
  background: var(--white);
}

.countries-section__intro {
  display: grid;
  justify-items: center;
  gap: 2rem;
  text-align: center;
}

.countries-section__intro h2 {
  max-width: 15ch;
  font-size: var(--major-heading);
}

.countries-section__intro p {
  max-width: 62ch;
  color: var(--gray-600);
  font-size: var(--lead);
}

.feature-rail-wrap {
  margin-top: clamp(6rem, 8vw, 14rem);
  overflow: hidden;
}

.feature-rail {
  display: grid;
  grid-auto-columns: minmax(30rem, 31vw);
  grid-auto-flow: column;
  gap: 2rem;
  width: max-content;
  transform: translateX(calc(var(--progress, 0) * -24vw));
}

/* Brands preview */
.brands-preview {
  overflow: clip;
  background: var(--gray-200);
}

.brands-preview__intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: 6rem;
  margin-bottom: 7rem;
  opacity: calc(1 - var(--progress, 0) * 1.4);
  transform: translateY(calc(var(--progress, 0) * -4rem));
}

.brands-preview__wordmark {
  display: grid;
  gap: 1.4rem;
}

.brands-preview__wordmark h2 {
  font-size: var(--major-heading);
}

.brands-preview__intro p {
  max-width: 50ch;
  color: var(--gray-600);
  font-size: var(--lead);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.4rem;
  opacity: calc(.2 + var(--progress, 0) * .8);
  transform: translateY(calc((1 - var(--progress, 0)) * 5rem));
}

/* Corporate film */
.corporate-film-section {
  min-height: 170vh;
  padding: 0;
  background: var(--footer);
}

.corporate-film-sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100dvh;
  overflow: clip;
}

.corporate-film {
  position: relative;
  width: calc(93vw + var(--progress, 0) * 7vw);
  height: calc(70vh + var(--progress, 0) * 30vh);
  overflow: hidden;
  border-radius: calc((1 - var(--progress, 0)) * 2.4rem);
  background: var(--ink);
}

.corporate-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.corporate-film::after {
  position: absolute;
  inset: 0;
  background: rgb(34 37 43 / var(--overlay-opacity, .46));
  content: '';
  transition: background .35s var(--ease-standard);
}

.corporate-film.is-playing {
  --overlay-opacity: .08;
}

.corporate-film__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  padding: var(--page-gutter);
  color: var(--white);
  text-align: center;
  transition: opacity .35s var(--ease-standard);
}

.corporate-film.is-playing .corporate-film__content {
  opacity: 0;
  pointer-events: none;
}

.corporate-film__content h2 {
  max-width: 14ch;
  font-size: var(--major-heading);
}

.corporate-film__content p {
  max-width: 54ch;
  color: rgb(255 255 255 / .75);
}

.play-button {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 50%;
  color: var(--white);
  background: rgb(255 255 255 / .08);
  font-size: 2.2rem;
  backdrop-filter: blur(12px);
  transition: transform .25s var(--ease-out), background .25s var(--ease-standard);
}

.play-button:hover {
  background: var(--red);
  transform: scale(1.08);
}

/* About */
.about-intro {
  position: relative;
  min-height: 120vh;
  color: var(--white);
  background: var(--ink);
}

.about-intro__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: clip;
}

.about-intro__media {
  position: absolute;
  inset: calc((1 - var(--progress, 0)) * 8vw);
  overflow: hidden;
  border-radius: calc((1 - var(--progress, 0)) * 3rem);
}

.about-intro__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(34 37 43 / .28), rgb(34 37 43 / .74));
  content: '';
}

.about-intro__copy {
  position: absolute;
  right: var(--page-gutter);
  bottom: clamp(6rem, 8vw, 14rem);
  left: var(--page-gutter);
  z-index: 2;
  display: grid;
  gap: 2rem;
}

.about-intro__copy h1 {
  max-width: 13ch;
  font-size: var(--major-heading);
}

.about-intro__copy p {
  max-width: 58ch;
  color: rgb(255 255 255 / .75);
  font-size: var(--lead);
}

.value-card {
  min-height: 32rem;
  padding: 3rem;
  border-top: 1px solid var(--gray-400);
}

.value-card__number {
  color: var(--red);
  font-size: 1.2rem;
}

.value-card h3 {
  margin-top: 10rem;
  font-size: var(--section-label);
}

.value-card p {
  margin-top: 1.6rem;
  color: var(--gray-600);
}

.stats-rail {
  display: grid;
  grid-auto-columns: minmax(24rem, 1fr);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.stats-rail::-webkit-scrollbar {
  display: none;
}

.stat-card {
  min-height: 32rem;
  padding: 3rem;
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--red-gradient);
  scroll-snap-align: start;
}

.stat-card strong {
  display: block;
  font-size: clamp(5rem, 6vw, 10rem);
  font-weight: 200;
  letter-spacing: -.06em;
}

.stat-card span {
  display: block;
  margin-top: 8rem;
  font-size: var(--card-title);
}

.achievement-row {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: 3rem;
  padding-block: 3rem;
  border-bottom: 1px solid var(--gray-300);
}

.achievement-row__year {
  color: var(--red);
  font-size: var(--card-title);
}

.achievement-row h3 {
  font-size: var(--card-title);
}

.achievement-row p {
  color: var(--gray-600);
}

/* History */
.history-layout {
  display: grid;
  grid-template-columns: 32rem minmax(0, 1fr);
  gap: clamp(4rem, 8vw, 14rem);
}

.history-years {
  position: sticky;
  top: calc(var(--header-height) + 4rem);
  align-self: start;
  display: grid;
  gap: .8rem;
}

.history-year-button {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  color: var(--gray-400);
  text-align: left;
  font-family: 'Display Year', 'Brand Sans', Arial, sans-serif;
  font-size: clamp(3rem, 3vw, 5.6rem);
  line-height: 1;
  transition: color .25s var(--ease-standard), transform .25s var(--ease-out);
}

.history-year-button::before {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--red);
  border-radius: 50%;
  content: '';
}

.history-year-button:hover,
.history-year-button.is-active {
  color: var(--red);
  transform: translateX(.8rem);
}

.history-year-button.is-active::before {
  background: var(--red);
}

.history-entry {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 4rem;
  min-height: 70rem;
  padding-block: 4rem;
  border-bottom: 1px solid var(--gray-300);
}

.history-entry__year {
  color: var(--red);
  font-family: 'Display Year', 'Brand Sans', Arial, sans-serif;
  font-size: clamp(5rem, 7vw, 12rem);
  line-height: .9;
}

.history-entry__copy {
  display: grid;
  align-content: start;
  gap: 1.6rem;
}

.history-entry__copy h2 {
  font-size: var(--section-heading);
}

.history-entry__copy p {
  color: var(--gray-600);
  font-size: var(--lead);
}

.history-entry__image-button {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.history-entry__image-button img {
  aspect-ratio: 16 / 8;
  object-fit: cover;
  transition: transform .45s var(--ease-out);
}

.history-entry__image-button:hover img {
  transform: scale(1.03);
}

.history-controls {
  display: none;
}

/* Brands */
.brand-list-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.4rem;
}

.brand-detail-hero {
  position: relative;
  min-height: 100dvh;
  padding: calc(var(--header-height) + 6rem) 0 8rem;
  overflow: clip;
  background: var(--surface-gradient);
}

.brand-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 6rem;
  min-height: calc(100dvh - var(--header-height) - 14rem);
}

.brand-detail-hero__copy {
  display: grid;
  gap: 2rem;
}

.brand-detail-hero__copy h1 {
  font-size: var(--major-heading);
}

.brand-detail-hero__copy p {
  color: var(--gray-600);
  font-size: var(--lead);
}

.brand-detail-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 60rem;
}

.brand-detail-hero__disc {
  position: absolute;
  width: min(48vw, 76rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-accent, var(--red));
  box-shadow: inset -4rem -4rem 12rem rgb(34 37 43 / .24);
}

.brand-detail-hero__product {
  position: relative;
  z-index: 2;
  width: min(42vw, 66rem);
  filter: drop-shadow(0 4rem 6rem rgb(34 37 43 / .25));
}

.brand-leaf {
  position: absolute;
  z-index: 3;
  width: 10rem;
  height: 18rem;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #dfe7d2, #6f8653);
  transform: rotate(28deg);
}

.brand-leaf--1 { top: 12%; left: 7%; }
.brand-leaf--2 { right: 6%; bottom: 10%; transform: rotate(-30deg) scale(.75); }

.other-brands-dock {
  display: grid;
  grid-auto-columns: minmax(18rem, 1fr);
  grid-auto-flow: column;
  gap: 1.2rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}

.other-brands-dock .brand-card {
  min-height: 16rem;
  scroll-snap-align: start;
}

/* Global */
.global-stage {
  position: relative;
  min-height: 78rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 40%, #454a54, #22252b 58%, #17191d);
}

.global-stage canvas,
.global-stage__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.global-stage__fallback {
  display: none;
  place-items: center;
  padding: 5rem;
}

.global-stage__fallback svg {
  width: min(100%, 80rem);
}

.global-stage__info {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  left: 3rem;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  color: var(--white);
  pointer-events: none;
}

.global-stage__copy {
  max-width: 36rem;
  padding: 2rem;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 1.6rem;
  background: rgb(34 37 43 / .4);
  backdrop-filter: blur(14px);
}

.global-stage__copy h3 {
  font-size: var(--card-title);
}

.global-stage__copy p {
  margin-top: .8rem;
  color: rgb(255 255 255 / .65);
}

.global-controls {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.global-controls .filter-pill {
  border-color: rgb(255 255 255 / .25);
  color: var(--white);
  background: rgb(34 37 43 / .35);
  backdrop-filter: blur(12px);
}

/* Sustainability */
.sustain-hero {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  color: var(--white);
  background: var(--ink);
}

.sustain-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sustain-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(34 37 43 / .15), rgb(34 37 43 / .76));
  content: '';
}

.sustain-hero__copy {
  position: absolute;
  right: var(--page-gutter);
  bottom: 8rem;
  left: var(--page-gutter);
  z-index: 2;
  display: grid;
  gap: 2rem;
}

.sustain-hero__copy h1 {
  max-width: 13ch;
  font-size: var(--major-heading);
}

.sustain-hero__copy p {
  max-width: 62ch;
  color: rgb(255 255 255 / .72);
  font-size: var(--lead);
}

.sustain-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4rem, 9vw, 16rem);
  min-height: 80rem;
}

.sustain-block:nth-child(even) .sustain-block__media {
  order: 2;
}

.sustain-block__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.sustain-block__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: translateY(calc((.5 - var(--progress, .5)) * 8%)) scale(1.08);
}

.sustain-block__copy {
  display: grid;
  gap: 2rem;
}

.sustain-block__copy h2 {
  max-width: 12ch;
  font-size: var(--section-heading);
}

.sustain-block__copy p {
  color: var(--gray-600);
  font-size: var(--lead);
}

.outline-marquee {
  overflow: hidden;
  padding-block: 2rem;
  border-block: 1px solid var(--gray-300);
  white-space: nowrap;
}

.outline-marquee__track {
  display: inline-flex;
  gap: 4rem;
  animation: marquee 22s linear infinite;
}

.outline-marquee span {
  color: transparent;
  font-size: clamp(6rem, 10vw, 18rem);
  font-weight: 600;
  letter-spacing: -.05em;
  -webkit-text-stroke: 1px var(--red);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* News */
.news-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
}

.news-search {
  width: min(100%, 32rem);
  height: 4.4rem;
  padding-inline: 1.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
}

.news-detail-hero {
  padding: calc(var(--header-height) + 6rem) 0 7rem;
  background: var(--gray-200);
}

.news-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 2rem;
  color: var(--gray-600);
  font-size: 1.3rem;
}

.news-detail-hero h1 {
  max-width: 18ch;
  font-size: var(--major-heading);
}

.news-detail-image {
  margin-top: 5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.news-detail-image img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* Careers */
.career-video-rail {
  display: grid;
  grid-auto-columns: minmax(36rem, 46vw);
  grid-auto-flow: column;
  gap: 2rem;
  overflow-x: auto;
  padding-bottom: 1.6rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.career-video-card {
  position: relative;
  min-height: 58rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink);
  scroll-snap-align: start;
}

.career-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-video-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgb(34 37 43 / .7));
  content: '';
  pointer-events: none;
}

.career-video-card__content {
  position: absolute;
  right: 2.4rem;
  bottom: 2.4rem;
  left: 2.4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--white);
}

.career-video-card__content h3 {
  font-size: var(--section-label);
}

.role-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 2rem;
  min-height: 9rem;
  border-bottom: 1px solid var(--gray-300);
}

.role-row h3 {
  font-size: var(--card-title);
}

.role-row span {
  color: var(--gray-600);
  font-size: 1.3rem;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(5rem, 8vw, 14rem);
}

.location-panel {
  display: grid;
  gap: 2rem;
}

.location-map {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gray-200);
}

.location-map img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.location-details {
  display: grid;
  gap: .8rem;
}

.location-details h2 {
  font-size: var(--section-label);
}

.location-details a,
.location-details p {
  color: var(--gray-600);
}

/* FAQ and investor */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(24rem, .7fr) minmax(0, 1.3fr);
  gap: clamp(4rem, 10vw, 18rem);
}

.faq-aside {
  position: sticky;
  top: calc(var(--header-height) + 3rem);
  align-self: start;
}

.investor-layout {
  display: grid;
  grid-template-columns: 28rem minmax(0, 1fr);
  gap: clamp(4rem, 8vw, 14rem);
}

.investor-nav {
  position: sticky;
  top: calc(var(--header-height) + 3rem);
  align-self: start;
  display: grid;
  gap: .6rem;
}

.investor-nav a,
.investor-nav button {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  color: var(--gray-600);
  text-align: left;
}

.investor-nav a::before,
.investor-nav button::before {
  width: .8rem;
  height: .8rem;
  border: 1px solid var(--red);
  border-radius: 50%;
  content: '';
}

.investor-nav a:hover,
.investor-nav a.is-active,
.investor-nav button:hover {
  color: var(--red);
  background: var(--gray-100);
}

.investor-nav a.is-active::before {
  background: var(--red);
}

.investor-mobile-trigger {
  display: none;
}

.investor-section {
  min-height: 50rem;
  padding-block: 4rem 8rem;
  border-bottom: 1px solid var(--gray-300);
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.investor-section h2 {
  max-width: 15ch;
  font-size: var(--section-heading);
}

.investor-section p {
  max-width: 64ch;
  margin-top: 2rem;
  color: var(--gray-600);
  font-size: var(--lead);
}

/* Services / solutions / pricing */
.service-group {
  display: grid;
  grid-template-columns: minmax(20rem, .45fr) minmax(0, 1.55fr);
  gap: clamp(3rem, 7vw, 12rem);
  padding-block: 5rem;
  border-top: 1px solid var(--gray-300);
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.service-group__title {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
  font-size: var(--section-label);
}

.service-group__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.solution-card {
  min-height: 44rem;
  padding: 3rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
}

.solution-card h2 {
  margin-top: 10rem;
  font-size: var(--section-heading);
}

.solution-card p {
  margin-top: 1.5rem;
  color: var(--gray-600);
}

.solution-card ul {
  display: grid;
  gap: .8rem;
  margin-top: 3rem;
}

.solution-card li {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.solution-card li::before {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--red);
  content: '';
}

.pricing-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 1.1vw, 2rem);
}

.pricing-category-nav {
  position: sticky;
  top: calc(var(--header-offset) + var(--header-bar-height) + var(--sticky-stack-gap));
  z-index: 22;
  display: flex;
  gap: .7rem;
  width: min(calc(100% - (var(--page-gutter) * 2)), calc(var(--content-max) - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: .8rem;
  overflow-x: auto;
  border: 1px solid rgb(34 37 43 / .10);
  border-radius: 999px;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 1.2rem 3.6rem rgb(34 37 43 / .08);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.pricing-category-nav::-webkit-scrollbar { display: none; }

.pricing-category-nav .filter-pill {
  flex: 0 0 auto;
  min-height: 4.6rem;
  border-color: transparent;
  background: var(--gray-100);
}

.pricing-category-nav .filter-pill:hover,
.pricing-category-nav .filter-pill.is-active,
.pricing-category-nav .filter-pill[aria-current='true'] {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

.pricing-category-section {
  position: relative;
  padding-block: clamp(7rem, 7vw, 12rem);
  border-bottom: 1px solid var(--gray-300);
  scroll-margin-top: calc(var(--header-height) + 8rem);
}

.pricing-category-section::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(222 39 31 / .28), transparent);
  content: '';
}

.pricing-category-section__head {
  display: grid;
  grid-template-columns: clamp(7rem, 6vw, 11rem) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.6rem, 2vw, 3.6rem);
  margin-bottom: clamp(3.4rem, 4vw, 6rem);
}

.pricing-category-section__index {
  color: var(--red);
  font-size: var(--section-label);
  font-weight: 500;
  line-height: 1;
}

.pricing-category-section h2 {
  max-width: 18ch;
  font-size: var(--section-heading);
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1.2rem, 1.1vw, 2rem);
}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(48rem, 34vw, 58rem);
  padding: clamp(2.4rem, 2vw, 3.4rem);
  overflow: hidden;
  border: 1px solid rgb(112 112 112 / .22);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-050) 100%);
  box-shadow: 0 1.2rem 4rem rgb(34 37 43 / .035);
  transition: transform .35s var(--ease-out), border-color .3s var(--ease-standard), box-shadow .35s var(--ease-out);
}

.package-card::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: .35rem;
  opacity: 0;
  background: var(--red-gradient);
  content: '';
  transition: opacity .3s var(--ease-standard);
}

.package-card:hover {
  z-index: 2;
  border-color: rgb(222 39 31 / .55);
  box-shadow: 0 2.4rem 7rem rgb(34 37 43 / .10);
  transform: translateY(-.6rem);
}

.package-card:hover::after,
.package-card.is-popular::after {
  opacity: 1;
}

.package-card.is-popular {
  border-color: var(--red);
  background: linear-gradient(180deg, rgb(222 39 31 / .035), var(--white) 26%);
  box-shadow: 0 2rem 7rem rgb(222 39 31 / .11);
}

.package-card h3 {
  max-width: 18ch;
  padding-right: 8rem;
  font-size: var(--card-title);
  line-height: 1.08;
}

.package-card__starting {
  margin-top: 1.8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-300);
  color: var(--gray-600);
}

.package-card ul {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0 3rem;
  color: var(--gray-600);
}

.package-card li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.package-card li::before {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  margin-top: .8rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 .4rem rgb(222 39 31 / .08);
  content: '';
}

.package-card .cta-pill {
  width: 100%;
  height: 5.6rem;
  margin-top: auto;
}

.combined-packages {
  background: var(--gray-200);
}

.combined-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 1.1vw, 2rem);
  margin-top: 5rem;
}

.combined-package {
  position: relative;
  min-height: 44rem;
  padding: 2.8rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 1rem 3rem rgb(34 37 43 / .035);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s var(--ease-standard);
}

.combined-package:hover {
  border-color: rgb(222 39 31 / .45);
  box-shadow: 0 2rem 6rem rgb(34 37 43 / .09);
  transform: translateY(-.5rem);
}

.combined-package.is-pro {
  color: var(--white);
  border-color: transparent;
  background: var(--red-gradient);
}

.combined-package__badge {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  color: var(--red);
  background: var(--white);
  font-size: 1rem;
  font-weight: 600;
}

.combined-package h3 {
  margin-top: 6rem;
  font-size: var(--section-label);
}

.combined-package p {
  margin-top: 1rem;
  color: var(--gray-600);
}

.combined-package.is-pro p {
  color: rgb(255 255 255 / .72);
}

.combined-package ul {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

/* Reseller */
.reseller-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.reseller-step {
  min-height: 32rem;
  padding: 2.8rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
}

.reseller-step__number {
  color: var(--red);
  font-size: var(--section-label);
}

.reseller-step h3 {
  margin-top: 10rem;
  font-size: var(--card-title);
}

.reseller-step p {
  margin-top: 1rem;
  color: var(--gray-600);
}

/* Developers */
.developer-console {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(4rem, 8vw, 14rem);
  align-items: center;
}

.code-window {
  overflow: hidden;
  border: 1px solid var(--footer-line);
  border-radius: var(--radius-md);
  background: #17191d;
  box-shadow: 0 3rem 10rem rgb(34 37 43 / .2);
}

.code-window__bar {
  display: flex;
  gap: .6rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--footer-line);
}

.code-window__bar span {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--gray-600);
}

.code-window__bar span:first-child { background: var(--red); }

.code-window pre {
  margin: 0;
  padding: clamp(2.4rem, 4vw, 5rem);
  overflow: auto;
  color: #E7E8EB;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.2rem, 1vw, 1.8rem);
  line-height: 1.7;
}

/* Resources and sitemap */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.resource-card {
  min-height: 30rem;
  padding: 2.8rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
}

.resource-card h2 {
  margin-top: 8rem;
  font-size: var(--section-label);
}

.resource-card p {
  margin-top: 1rem;
  color: var(--gray-600);
}

.resource-card .text-link {
  margin-top: 2.4rem;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
}

.sitemap-column h2 {
  margin-bottom: 1.6rem;
  font-size: var(--card-title);
}

.sitemap-column ul {
  display: grid;
  gap: .8rem;
}

.sitemap-column a {
  color: var(--gray-600);
}

.sitemap-column a:hover {
  color: var(--red);
}

/* 404 */
.not-found {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--header-height) + 4rem) var(--page-gutter) 6rem;
  text-align: center;
  background: var(--surface-gradient);
}

.not-found__code {
  color: var(--red);
  font-size: clamp(10rem, 18vw, 32rem);
  font-weight: 200;
  line-height: .8;
  letter-spacing: -.08em;
}

.not-found h1 {
  margin-top: 4rem;
  font-size: var(--major-heading);
}

.not-found p {
  max-width: 50ch;
  margin: 2rem auto 3rem;
  color: var(--gray-600);
}

@media (max-width: 1279px) {
  .brand-grid,
  .brand-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-overview,
  .combined-package-grid,
  .reseller-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .page-hero__grid,
  .product-story__grid,
  .brands-preview__intro,
  .brand-detail-hero__grid,
  .contact-grid,
  .developer-console {
    grid-template-columns: 1fr;
  }

  .page-hero__visual {
    min-height: 20rem;
  }

  .hero-slide__content {
    grid-template-columns: 1fr;
  }

  .brand-grid,
  .brand-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .history-layout,
  .faq-layout,
  .investor-layout {
    grid-template-columns: 1fr;
  }

  .history-years,
  .faq-aside,
  .investor-nav {
    position: static;
  }

  .history-years {
    display: flex;
    overflow-x: auto;
  }

  .history-year-button {
    flex: 0 0 auto;
    width: auto;
  }

  .service-group {
    grid-template-columns: 1fr;
  }

  .service-group__title {
    position: static;
  }

  .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-grid,
  .sitemap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 68rem;
    padding-top: calc(var(--header-height) + 3rem);
  }

  .page-hero__grid {
    gap: 2rem;
  }

  .page-hero__visual {
    min-height: 22rem;
  }

  .page-hero__orb {
    right: -7rem;
    bottom: -7rem;
    width: 32rem;
  }

  .hero-slide__content {
    right: var(--page-gutter-mobile);
    bottom: 10rem;
    left: var(--page-gutter-mobile);
    gap: 2rem;
  }

  .hero-slide__title {
    font-size: 5.8rem;
    line-height: 6.4rem;
  }

  .hero-slide__aside {
    gap: 1.4rem;
  }

  .hero-nav {
    right: auto;
    bottom: 2.2rem;
    left: var(--page-gutter-mobile);
  }

  .hero-nav__button {
    width: 4rem;
    height: 4rem;
  }

  .product-story__grid {
    min-height: 0;
  }

  .product-story__visual {
    min-height: 42rem;
    transform: none;
  }

  .product-story__backdrop {
    width: 36rem;
    transform: none;
  }

  .product-story__image {
    width: 34rem;
    transform: none;
  }

  .story-candy {
    transform: none !important;
  }

  .feature-rail-wrap {
    margin-inline: calc(var(--page-gutter-mobile) * -1);
    padding-inline: var(--page-gutter-mobile);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .feature-rail-wrap::-webkit-scrollbar { display: none; }

  .feature-rail {
    grid-auto-columns: 82vw;
    transform: none;
  }

  .feature-rail > * {
    scroll-snap-align: start;
  }

  .brands-preview__intro {
    opacity: 1;
    transform: none;
  }

  .brand-grid,
  .brand-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    opacity: 1;
    transform: none;
  }

  .brand-grid .brand-card,
  .brand-list-grid .brand-card {
    min-height: 16rem;
  }

  .corporate-film-section {
    min-height: 100vh;
  }

  .corporate-film-sticky {
    position: relative;
  }

  .corporate-film {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .about-intro {
    min-height: 100dvh;
  }

  .about-intro__sticky {
    position: relative;
  }

  .about-intro__media {
    inset: 0;
    border-radius: 0;
  }

  .about-intro__copy {
    right: var(--page-gutter-mobile);
    bottom: 6rem;
    left: var(--page-gutter-mobile);
  }

  .achievement-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .history-layout {
    display: block;
  }

  .history-years {
    display: none;
  }

  .history-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

  .history-entry {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 3rem 6rem;
  }

  .history-entry[hidden] {
    display: none !important;
  }

  .history-entry__image-button {
    grid-column: auto;
  }

  .brand-detail-hero__grid {
    min-height: auto;
  }

  .brand-detail-hero__visual {
    min-height: 42rem;
  }

  .brand-detail-hero__disc {
    width: 38rem;
  }

  .brand-detail-hero__product {
    width: 34rem;
  }

  .global-stage {
    min-height: 62rem;
    margin-inline: calc(var(--page-gutter-mobile) * -1);
    border-radius: 0;
  }

  .global-controls {
    top: 1.6rem;
    left: 1.6rem;
  }

  .global-stage__info {
    right: 1.6rem;
    bottom: 1.6rem;
    left: 1.6rem;
  }

  .sustain-block,
  .sustain-block:nth-child(even) {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 3rem;
    padding-block: 5rem;
  }

  .sustain-block:nth-child(even) .sustain-block__media {
    order: 0;
  }

  .sustain-block__media img {
    transform: none;
  }

  .outline-marquee__track {
    animation-duration: 16s;
  }

  .news-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .news-search {
    width: 100%;
  }

  .career-video-rail {
    grid-auto-columns: 88vw;
    margin-inline: calc(var(--page-gutter-mobile) * -1);
    padding-inline: var(--page-gutter-mobile);
  }

  .career-video-card {
    min-height: 48rem;
  }

  .role-row {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding-block: 2rem;
  }

  .role-row span {
    grid-column: 1 / 2;
  }

  .role-row .text-link {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  .investor-mobile-trigger {
    position: sticky;
    bottom: 1.4rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 5.6rem;
    margin-bottom: 2rem;
    padding-inline: 1.8rem;
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
    box-shadow: 0 1.4rem 4rem rgb(34 37 43 / .2);
  }

  .investor-nav {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    left: 1.2rem;
    z-index: 52;
    display: grid;
    max-height: 70dvh;
    padding: 2rem;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    border-radius: 2.4rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transform: translateY(2rem);
    transition: opacity .3s var(--ease-standard), visibility .3s, transform .35s var(--ease-out);
  }

  .investor-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .service-group__grid,
  .solution-grid,
  .pricing-overview,
  .package-grid,
  .combined-package-grid,
  .reseller-steps,
  .resource-grid,
  .sitemap-grid {
    grid-template-columns: 1fr;
  }

  .pricing-category-nav {
    top: calc(var(--header-height) + var(--sticky-stack-gap));
    width: calc(100% - 2rem);
    padding: .6rem;
    border-radius: 2.2rem;
  }

  .pricing-category-nav .filter-pill {
    min-height: 4.2rem;
    padding-inline: 1.4rem;
  }

  .pricing-category-section__head {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .package-card {
    min-height: 0;
    padding: 2.4rem;
  }

  .package-card h3 {
    padding-right: 7.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-story__visual,
  .product-story__backdrop,
  .product-story__image,
  .story-candy,
  .feature-rail,
  .brands-preview__intro,
  .brand-grid,
  .corporate-film,
  .about-intro__media,
  .sustain-block__media img {
    transform: none !important;
  }

  .corporate-film-section,
  .about-intro {
    min-height: auto;
  }

  .corporate-film-sticky,
  .about-intro__sticky {
    position: relative;
  }

  .outline-marquee__track {
    animation: none;
  }
}