.hero {
  --hero-title-size: clamp(5rem, 8vw, 7.5rem);
  --hero-bear-size: clamp(380px, 44vw, 620px);
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: #000;
}
.hero__field {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__field::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 46%;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
}
.hero__field img {
  position: absolute;
  width: calc(100% + 32px);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  left: -16px;
  bottom: 0;
  transform-origin: left bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__field img { animation: hero-field-wave 16s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
}
@keyframes hero-field-wave {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}
.hero__layout {
  min-height: max(0px, calc(100svh - var(--hero-top-offset, 96px)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: var(--space-xxl);
  padding-block: 24px 32px;
}
.hero__bear {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  position: relative;
  width: min(var(--hero-bear-size), max(240px, calc(100svh - var(--hero-top-offset, 96px) - 56px)));
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--bear-tilt-x, 0deg)) rotateY(var(--bear-tilt-y, 0deg));
  transition: transform var(--duration-content) var(--ease-out);
}
.hero__video, .hero__dots {
  mask-image: radial-gradient(ellipse closest-side, #000 68%, transparent 100%);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity var(--duration-content) var(--ease-out);
}
.hero__dots {
  position: absolute; inset: 0; opacity: 0;
}
.hero__bear.has-dots .hero__dots { opacity: 1; }

.hero__bear:focus-visible { outline-offset: -32px; }
.hero__content { grid-column: 1; grid-row: 1; padding-top: 40px; }
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0;
  font-size: var(--hero-title-size);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: .8;
  white-space: nowrap;
  margin-bottom: 32px;
}
.hero__cu { color: var(--color-brand); font-family: 'Chakra Petch', var(--font-sans); font-weight: 600; }
.hero__xr {
  align-self: start;
  margin-left: .72em;
  margin-top: -.025em;
  color: var(--color-text);
  font-family: var(--font-pixel);
  font-size: 1.35em;
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .88;
  display: flex;
}
.hero__description {
  --hero-copy-register: color-mix(in srgb, var(--color-brand) 62%, transparent);
  max-width: 30ch;
  color: var(--color-text);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 450;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: pretty;
}
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 24px;
  font-size: 1rem;
  transition: color var(--duration-fast) var(--ease-out);
}
.hero__link::after { content: '→'; font-size: .875em; transition: transform var(--duration-fast) var(--ease-out); }
.hero__link:hover { color: var(--color-accent); }
.hero__link:hover::after { transform: translateX(2px); }
.hero__mask { display: block; }
.hero__glyph {
  --slice-direction: 1;
  --slice-delay: 0ms;
  position: relative;
  display: block;
}
.hero__xr .hero__glyph { --slice-direction: -1; --slice-delay: 80ms; }
.hero__xr .hero__mask:last-child .hero__glyph { --slice-delay: 160ms; }
.hero__slice { display: none; }
.hero-copy { --copy-delay: 460ms; position: relative; display: inline-block; }
.hero-copy__text { text-shadow: 1.5px 0 var(--hero-copy-register); }
.hero-copy__slice { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Swap the temporary slices for intact type after registration, avoiding resting seams. */
  .hero__letter {
    animation: hero-letter-resolve 600ms var(--slice-delay) steps(1, end) backwards;
  }
  .hero__slice {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    animation: hero-slice-register 600ms var(--slice-delay) var(--ease-out) backwards;
  }
  .hero__slice--top { --slice-offset: -.6em; clip-path: inset(-20% -100% 66%); }
  .hero__slice--middle { --slice-offset: .45em; clip-path: inset(34% -100% 33%); }
  .hero__slice--bottom { --slice-offset: -.25em; clip-path: inset(67% -100% -20%); }
  .hero__bear { animation: hero-bear-enter var(--duration-hero) var(--ease-spring) backwards; }
  .hero-copy__text {
    animation: hero-letter-resolve calc(var(--duration-fast) * 2) var(--copy-delay) steps(1, end) backwards;
  }
  .hero-copy__slice {
    --slice-direction: 1;
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    animation: hero-slice-register calc(var(--duration-fast) * 2) var(--copy-delay) var(--ease-out) backwards;
  }
  .hero-copy__slice--top { --slice-offset: -.3em; clip-path: inset(0 -50% 50%); }
  .hero-copy__slice--bottom { --slice-offset: .3em; clip-path: inset(50% -50% 0); }
  .hero__link::after { animation: hero-arrow-enter calc(var(--duration-fast) * 2) 540ms var(--ease-out) backwards; }
  .hero__link:focus-visible .hero-copy__text,
  .hero__link:focus-visible .hero-copy__slice,
  .hero__link:focus-visible::after { animation: none; }
}
@keyframes hero-letter-resolve {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-slice-register {
  0% { opacity: 0; transform: translateX(calc(var(--slice-offset) * var(--slice-direction))); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: translateX(calc(var(--slice-offset) * var(--slice-direction) * -.025)); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes hero-bear-enter {
  from { opacity: 0; scale: .96; }
  to { opacity: 1; scale: 1; }
}
@keyframes hero-arrow-enter {
  from { opacity: 0; translate: -8px 0; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 900px) {
  .hero__layout { column-gap: 16px; }
  .hero__content { padding-top: 32px; }
  .hero__title { font-size: clamp(5rem, 9vw, 7rem); }
}
@media (max-width: 600px) {
  .hero { --hero-title-size: clamp(6rem, 32vw, 10rem); --hero-bear-size: min(440px, 100vw); }
  .hero__layout { grid-template-columns: minmax(0, 1fr); align-content: start; padding-block: 0 24px; row-gap: 0; }
  .hero__bear { grid-column: 1; grid-row: 1; width: var(--hero-bear-size); justify-self: center; margin-bottom: -40px; }
  .hero__content { grid-row: 2; padding-top: 0; }
  .hero__title { font-size: var(--hero-title-size); margin-bottom: 24px; }
  .hero__xr { align-self: start; margin-left: .8em; font-size: 1.2em; }
  .hero__description { max-width: 100%; font-size: 1.25rem; line-height: 1.3; }
  .hero__link { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bear, .hero__xr { transform: none; }
  .hero__bear, .hero__video, .hero__dots, .hero__link, .hero__link::after { transition: none; }
}
.featured { padding-top: 96px; }
.featured__intro { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.featured__intro h2 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.045em; }
.featured__panel { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 32px; }
.featured__media { position: relative; display: grid; place-items: center; min-width: 0; height: 300px; }
.featured__media-art { display: grid; place-items: center; width: min(38%, 300px); }
.featured__media img { width: min(38%, 300px); height: auto; max-height: 340px; object-fit: contain; }
.featured__media-art img { width: 100%; }
.featured__body { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.featured__story { min-height: 0; max-width: 900px; }
.featured__meta { color: var(--color-muted); font: .8125rem/1.5 var(--font-mono); }
.featured__story h3 { font-size: clamp(2.5rem, 4.5vw, 4.25rem); font-weight: 450; line-height: 1.02; letter-spacing: -.055em; margin-block: 12px 16px; }
.featured__story p { max-width: 50ch; margin-inline: auto; color: var(--color-muted); font-size: 1.125rem; }
.featured__project-link { margin-top: 16px; }
.featured__progress { width: 160px; height: 1px; margin-top: 20px; background: var(--color-border); }
.featured__progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-accent); }
.featured__neighbor { position: absolute; top: 50%; transform: translateY(-50%); width: 26%; padding: 8px; border: 0; background: transparent; opacity: .8; transition: opacity 180ms var(--ease-out); }
.featured__neighbor:hover, .featured__neighbor:focus-visible { opacity: 1; }
.featured__neighbor--previous { left: 2%; }
.featured__neighbor--next { right: 2%; }
.featured__neighbor img { width: 100%; max-height: 210px; object-fit: contain; }
@keyframes featured-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes featured-drift { from { transform: translateY(32px); } to { transform: translateY(-32px); } }
@media (prefers-reduced-motion: no-preference) { .featured__media img, .featured__story { animation: featured-enter 500ms var(--ease-spring) both; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .featured__media-art { animation: featured-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } }
}
@media(max-width: 700px) {
  .featured { padding-top: 64px; }
  .featured__intro { align-items: center; }
  .featured__panel { padding-top: 24px; }
  .featured__media { height: 220px; }
  .featured__media-art { width: 48%; }
  .featured__media-art img { max-height: 210px; }
  .featured__neighbor { width: 26%; padding: 0; }
  .featured__neighbor--previous { left: 1%; }
  .featured__neighbor--next { right: 1%; }
  .featured__neighbor img { max-height: 120px; }
}
.home-team.section { border-top: 1px solid var(--color-border); padding-bottom: 64px; }
.home-team-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 80px; }
.home-team-intro h2 { font-size: 1.25rem; line-height: 1.5; letter-spacing: -.02em; }
.home-team-intro .lede { max-width: 30ch; font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.3; letter-spacing: -.035em; color: var(--color-text); }
.home-team-intro .text-link { margin-top: 24px; }
.home-team-photo { margin: 0; }
.home-team-photo img { width: 100%; max-height: 580px; object-fit: cover; object-position: center 40%; border-radius: 0; }
.home-team-photo figcaption { display: flex; justify-content: space-between; gap: 16px; color: var(--color-muted); font: .75rem/1.5 var(--font-mono); margin-top: 16px; }
.company-strip { margin-top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.company-strip > p { font-size: .875rem; color: var(--color-muted); }
.company-strip ul { display: flex; width: min(100%, 1250px); flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 40px; margin: 0 auto; padding: 0; list-style: none; }
.company-strip ul.is-balanced { row-gap: 0; }
.company-strip li { display: flex; flex: none; min-width: 0; align-items: center; justify-content: center; min-height: 54px; }
.company-strip li.company-strip-break { flex-basis: 100%; height: 28px; min-height: 0; }
.company-strip img { display: block; max-width: min(100%, 202px); height: auto; }
.company-strip img[src$="avantos.svg"] { filter: brightness(0) invert(1); }
.home-industry { border-top: 1px solid var(--color-border); padding-block: var(--space-xxl); }
.home-industry-inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-xxl); align-items: baseline; }
.home-industry h2 { font-size: 1.25rem; line-height: 1.5; letter-spacing: -.02em; }
.industry-company { white-space: nowrap; color: var(--color-text); }
.industry-company img { display: inline-block; margin-right: var(--space-sm); vertical-align: middle; }
.home-next.section { border-top: 1px solid var(--color-border); padding-block: var(--space-xxl); }
.home-next-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xxl); align-items: center; }
.home-next .lede { max-width: 48ch; }
.home-next-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
@media(max-width: 1000px) {
  .home-next-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}
@media(max-width: 760px) {
  .home-team-intro, .home-next-inner, .home-industry-inner { grid-template-columns: 1fr; gap: 16px; }
  .home-team-photo img { min-height: 260px; }
  .home-team.section { padding-bottom: 48px; }
  .company-strip { margin-top: 64px; }
  .company-strip ul { column-gap: 20px; }
  .company-strip li:not(.company-strip-break) { max-width: 120px; }
  .company-strip img { max-width: min(100%, 120px); }
  .home-next-inner { gap: 32px; }
}