/* HHH v54 interaction refinements. The approved layouts remain intact. */

.ambient-atmosphere__video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #000;
  pointer-events: none;
}

.ambient-atmosphere canvas.ambient-atmosphere__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  opacity: 0;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none;
  transition: opacity .18s ease;
}

.ambient-atmosphere canvas.ambient-atmosphere__canvas[data-hhh-ambient="ready"] {
  opacity: 1;
}

.portfolite-contact,
.portfolite-kicker,
.portfolite-hero h1 span,
.portfolite-intro,
.portfolite-actions,
.discipline-marquee {
  animation: none !important;
  transform-origin: center center;
}

html.is-hhh-opening .portfolite-contact,
html.is-hhh-opening .portfolite-kicker,
html.is-hhh-opening .portfolite-hero h1 span,
html.is-hhh-opening .portfolite-intro,
html.is-hhh-opening .portfolite-actions,
html.is-hhh-opening .discipline-marquee {
  opacity: .08;
  transform: scaleY(.05);
}

.ambient-atmosphere {
  background: #000 !important;
}

.ambient-atmosphere__mesh {
  opacity: 0 !important;
}

.ambient-atmosphere__vignette {
  opacity: .1;
}

.ambient-atmosphere::after {
  opacity: .07 !important;
  background-image: radial-gradient(circle, rgba(218, 214, 204, .72) 0 .45px, transparent .76px) !important;
  background-size: 3px 3px !important;
  mix-blend-mode: screen !important;
}

.portfolite-actions--single {
  justify-content: center;
}

.portfolite-actions--single a {
  min-width: 172px;
}

.fuel-about__ticker-track.is-hhh-js-ticker,
.fuel-about__ticker:hover .fuel-about__ticker-track.is-hhh-js-ticker {
  animation: none !important;
  transform: translate3d(var(--hhh-ticker-x, 0px), 0, 0) !important;
  will-change: transform;
}

.particle-label {
  isolation: isolate;
}

.particle-label canvas {
  max-width: none !important;
  max-height: none !important;
  overflow: visible;
}

.operation-showcase__track {
  will-change: transform;
  transition: transform .56s cubic-bezier(.18, .84, .18, 1) !important;
}

.operation-showcase__track.is-jumping {
  transition: none !important;
}

.operation-showcase__track.is-wheel-scrolling {
  transition: none !important;
}

/* Keep the rotated green tag inside the text-reveal mask's paint box. */
.operation-showcase__lockup {
  padding-bottom: 10px;
  margin-bottom: -10px;
}

@media (min-width: 901px) {
  .operation-showcase__frame {
    grid-template-columns: minmax(0, 1.82fr) minmax(300px, .78fr);
  }
}

.featured-project-card__link {
  --hhh-project-focus-scale: 1;
  transform: scale(var(--hhh-project-focus-scale)) rotate(var(--project-angle));
  transition: transform .62s cubic-bezier(.18, .78, .18, 1);
}

.featured-project-card__link.is-hhh-settled {
  --project-angle: 0deg !important;
}

@media (hover: hover) and (pointer: fine) {
  .featured-projects.is-hhh-project-focus .featured-project-card__link {
    --hhh-project-focus-scale: .9;
  }

  .featured-projects.is-hhh-project-focus .featured-project-card__link.is-hhh-project-active {
    --hhh-project-focus-scale: 1.075;
  }

  .featured-project-card.is-hhh-project-active {
    z-index: 40 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-project-card__link {
    transition-duration: .01ms;
  }
}

.featured-project-card__view {
  will-change: left, top, transform, opacity;
}

/* Keep the motion field legible: six cards on desktop, four on mobile. */
.motion-reel__item {
  display: none;
}

.motion-reel__item:nth-child(1),
.motion-reel__item:nth-child(3),
.motion-reel__item:nth-child(4),
.motion-reel__item:nth-child(6),
.motion-reel__item:nth-child(7),
.motion-reel__item:nth-child(10) {
  display: block;
}

.motion-reel > .motion-reel__item.is-hhh-motion-source {
  display: none !important;
}

.motion-reel__item.hhh-motion-stream__item {
  display: block !important;
  top: var(--hhh-lane-y) !important;
  animation: none !important;
  transform: translate3d(var(--hhh-motion-x, 0), 0, 0);
  will-change: transform;
}

.hhh-motion-stream__item .motion-reel__float {
  animation-name: hhh-motion-stream-float !important;
}

@keyframes hhh-motion-stream-float {
  0% {
    transform: translateY(-6px);
  }

  52% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(7px);
  }
}

.emoji-surprise__particle {
  pointer-events: none;
  transition: opacity .25s linear;
}

/* Font-design cover flow: centered front card with receding side cards. */
.font-design__reel {
  width: calc(100% - clamp(24px, 2.5vw, 48px)) !important;
  max-width: none;
  min-height: clamp(700px, 82svh, 900px) !important;
  margin-inline: auto;
  isolation: isolate;
  perspective: 1350px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden;
  cursor: grab;
  box-shadow: none !important;
}

.font-design__reel.is-dragging {
  cursor: grabbing;
}

.font-design__reel::before,
.font-design__reel::after {
  z-index: 30 !important;
  width: clamp(64px, 11vw, 180px) !important;
  top: 0 !important;
  bottom: 0 !important;
  pointer-events: none;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
}

.font-design__reel::before {
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 30%, rgba(0, 0, 0, .2) 76%, transparent 100%) !important;
}

.font-design__reel::after {
  background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 30%, rgba(0, 0, 0, .2) 76%, transparent 100%) !important;
}

.font-design__track,
.font-design__group {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-style: preserve-3d !important;
}

.font-design__card {
  --hhh-font-enter-x: 0px;
  --hhh-font-enter-y: 0px;
  --hhh-font-enter-z: 0px;
  --hhh-font-enter-rotate-y: 0deg;
  --hhh-font-enter-scale: 1;
  --hhh-font-enter-opacity: 1;
  --hhh-font-enter-blur: 0px;
  top: 0 !important;
  left: 0 !important;
  width: clamp(210px, 14.2vw, 286px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: clamp(18px, 1.5vw, 27px) !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden;
  transition: box-shadow .35s ease !important;
  will-change: transform, opacity, filter !important;
}

.font-design__card img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.font-design__card:hover {
  box-shadow: 0 30px 84px rgba(0, 0, 0, .86);
}

.font-design__badge strong {
  font-weight: 500 !important;
}

.font-design__badge > i,
.font-design__badge > span {
  position: absolute !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #dceeff !important;
  box-shadow: 0 0 12px #69adff, 0 0 26px #7258ff !important;
  transform: translateY(-50%) !important;
}

.font-design__badge > i {
  left: clamp(16px, 1.35vw, 20px) !important;
}

.font-design__badge > span {
  right: clamp(16px, 1.35vw, 20px) !important;
}

/* Layout and poster work: three independently drifting vertical columns. */
.layout-design {
  position: relative;
  min-height: max(980px, 112svh);
  padding: clamp(100px, 11svh, 132px) 0 clamp(118px, 14svh, 168px);
  background: #000;
  overflow: hidden;
}

.layout-design__intro {
  position: relative;
  z-index: 4;
}

.layout-design__drift {
  isolation: isolate;
  position: relative;
  width: min(1240px, 78vw);
  height: clamp(1140px, 132svh, 1420px);
  margin: clamp(52px, 7svh, 78px) auto 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  outline: 0;
}

.layout-design__drift.is-dragging {
  cursor: grabbing;
}

.layout-design__drift::before,
.layout-design__drift::after {
  content: "";
  z-index: 6;
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(92px, 14%, 142px);
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.layout-design__drift::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .88) 32%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .88) 32%, transparent 100%);
}

.layout-design__drift::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .88) 32%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .88) 32%, transparent 100%);
}

.layout-design__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  height: 100%;
  padding-inline: clamp(0px, 1vw, 12px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.layout-design__column {
  position: relative;
  min-width: 0;
  height: 100%;
}

.layout-design__track {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.25vw, 18px);
  will-change: transform;
}

.layout-design__poster {
  flex: none;
  aspect-ratio: 1273 / 1800;
  margin: 0;
  border-radius: clamp(8px, .75vw, 12px);
  background: #090909;
  overflow: hidden;
  transition: filter .35s ease;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.layout-design__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.layout-design__poster:hover {
  z-index: 2;
  filter: brightness(1.04);
}

.selected-year {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 48svh, 500px);
  padding: clamp(60px, 8svh, 88px) 24px;
  background: #000;
  overflow: hidden;
  touch-action: pan-y;
}

.selected-year__title {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
  margin: 0;
  color: #f4f4f2;
  font-size: clamp(48px, 6.8vw, 108px);
  font-weight: 500;
  line-height: .9;
  text-align: center;
  letter-spacing: 0;
  user-select: none;
}

.selected-year__line {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.selected-year__word {
  display: inline-block;
  flex: none;
  margin-inline: .085em;
  transform: translate3d(0, 0, 0);
  transition: transform .42s cubic-bezier(.2, .78, .18, 1);
  will-change: transform;
}

.selected-year__title:hover .selected-year__word,
.selected-year__title:focus-visible .selected-year__word,
.selected-year__title.is-selected-year-active .selected-year__word {
  animation: selected-year-gather 1.15s ease-in-out var(--gather-delay) infinite alternate;
}

.selected-year__title:focus-visible {
  outline: 0;
}

@keyframes selected-year-gather {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  100% {
    transform: translate3d(var(--gather-x), var(--gather-y), 0) rotate(var(--gather-rotate)) scale(.992);
  }
}

.portfolio-end {
  display: flex;
  align-items: flex-end;
  min-height: 116px;
  padding: 16px clamp(32px, 6.2vw, 100px);
  border-top: 1px solid rgba(255, 255, 255, .055);
  background: #000;
  color: rgba(255, 255, 255, .46);
}

.portfolio-end__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  align-items: end;
  gap: clamp(34px, 5vw, 90px);
  width: 100%;
}

.portfolio-end__identity {
  display: flex;
  align-items: center;
  gap: clamp(44px, 7.6vw, 122px);
}

.portfolio-end__identity img {
  width: 43px;
  height: 43px;
  border: 0;
  object-fit: cover;
}

.portfolio-end__identity strong,
.portfolio-end__identity a {
  display: block;
  letter-spacing: 0;
}

.portfolio-end__identity strong {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .36);
  font-size: 15px;
  font-weight: 420;
}

.portfolio-end__identity a,
.portfolio-end__wechat,
.portfolio-end__email {
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
  font-weight: 400;
}

.portfolio-end__wechat {
  margin: 0;
  text-align: center;
}

.portfolio-end__wechat span,
.portfolio-end__wechat b {
  font-weight: 400;
}

.portfolio-end__email {
  text-align: right;
}

.portfolio-end__home {
  position: absolute;
  right: 0;
  bottom: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 104px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
  font-weight: 400;
  transition: color .24s ease, border-color .24s ease, background .24s ease;
}

.portfolio-end__home b {
  font-size: 13px;
  font-weight: 400;
}

.portfolio-end__home:hover,
.portfolio-end__home:focus-visible {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .82);
  outline: 0;
}

.portfolio-end__swatches {
  position: absolute;
  right: 116px;
  bottom: 34px;
  display: flex;
  gap: 8px;
}

.portfolio-end__swatches i {
  width: 17px;
  height: 17px;
}

.portfolio-end__swatches i:nth-child(1) { background: #ff65bb; }
.portfolio-end__swatches i:nth-child(2) { background: #a8ff43; }
.portfolio-end__swatches i:nth-child(3) { background: #086cf0; }

@media (min-width: 701px) {
  /* Keep spacing changes in document flow so every later section follows. */
  .portfolite-hero__content {
    padding: 126px 0 !important;
  }

  .fuel-about {
    min-height: calc(100svh + 62px);
  }

  .fuel-about__ticker {
    margin-top: clamp(152px, 11vw, 176px);
  }

  .selected-work > .campaign-title-panel {
    min-height: clamp(430px, 46svh, 520px);
    padding-block: clamp(64px, 7svh, 78px);
  }

  #brand-packaging .campaign-title-panel {
    min-height: clamp(560px, 66svh, 700px);
  }

  .brand-orbit {
    min-height: clamp(720px, 82svh, 850px);
    padding-bottom: clamp(44px, 5vh, 62px);
  }

  .font-design {
    min-height: auto;
    padding: clamp(52px, 7svh, 64px) 0 clamp(40px, 5svh, 48px);
  }

  .font-design .font-design__intro {
    min-height: clamp(160px, 18svh, 176px);
  }

  .font-design > .font-design__intro > .font-design__badge,
  .layout-design > .layout-design__intro > .font-design__badge {
    width: clamp(320px, 31vw, 472px);
    height: clamp(66px, 6vw, 92px);
    min-height: 0;
  }

  .font-design .font-design__reel {
    min-height: clamp(600px, 68svh, 680px) !important;
  }

  .layout-design {
    padding-top: clamp(64px, 7svh, 76px);
  }

  .layout-design .layout-design__intro {
    min-height: clamp(178px, 28svh, 268px);
  }
}

/* Keep the approved brand-case presentation; only improve the zoom affordance. */
.brand-case-gallery__viewport,
.operations-canvas__viewport {
  overscroll-behavior: auto !important;
}

.brand-case-gallery__viewport.is-hhh-dragging,
.operations-canvas__viewport.is-hhh-dragging {
  cursor: grabbing !important;
}

.operations-canvas__stage {
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  overflow: visible !important;
  transform-origin: 0 0;
  will-change: transform;
}

.operations-canvas__viewport {
  background: #000 !important;
  touch-action: none !important;
}

.operations-canvas__column {
  position: absolute;
  top: 0;
  height: 1px;
}

.operations-canvas__card {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  flex: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

.operations-canvas__card:hover {
  border-color: transparent !important;
  filter: none !important;
}

.operations-canvas__card img,
.operations-canvas__card:hover img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  transform: none !important;
}

.operations-canvas__controls output {
  min-width: 42px;
  color: rgba(255, 255, 255, .7);
  font-size: 9px;
  text-align: center;
}

/* The brand-system detail pages keep the v54 four-column canvas. */
.brand-case-page .brand-case-gallery__viewport {
  height: clamp(680px, 82svh, 1040px) !important;
}

.brand-case-page .brand-case-gallery__grid {
  grid-auto-flow: row;
  align-content: start;
  align-items: start;
}

.brand-case-page .brand-case-gallery__grid figure,
.brand-case-page .brand-case-gallery__grid img {
  min-width: 0;
}

@media (max-width: 700px) {
  .font-design > .font-design__intro > .font-design__badge,
  .layout-design > .layout-design__intro > .font-design__badge {
    width: min(300px, calc(100% - 36px));
    height: 60px;
    min-height: 0;
  }

  .font-design__reel {
    width: calc(100% - 12px) !important;
    min-height: 650px !important;
  }

  .font-design__card {
    width: clamp(154px, 45vw, 220px) !important;
  }

  .layout-design {
    min-height: 900px;
    padding: 88px 0 112px;
  }

  .layout-design__drift {
    width: calc(100% - 20px);
    height: clamp(620px, 78svh, 760px);
    margin-top: 46px;
  }

  .layout-design__columns {
    gap: 8px;
  }

  .layout-design__track {
    gap: 9px;
  }

  .layout-design__poster {
    border-radius: 6px;
  }

  .selected-year {
    min-height: 310px;
    padding: 64px 10px;
  }

  .selected-year__title {
    font-size: clamp(29px, 8.4vw, 38px);
    line-height: .94;
  }

  .portfolio-end {
    min-height: 280px;
    padding: 48px 24px 26px;
    background: #000;
  }

  .portfolio-end__inner {
    grid-template-columns: 1fr;
    align-items: end;
    gap: 22px;
  }

  .portfolio-end__identity {
    align-items: center;
    gap: 20px;
  }

  .portfolio-end__identity img {
    width: 68px;
    height: 68px;
  }

  .portfolio-end__identity strong {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .portfolio-end__wechat,
  .portfolio-end__email {
    text-align: left;
  }

  .portfolio-end__swatches {
    top: 40px;
    bottom: auto;
  }

  .portfolio-end__home {
    top: 0;
    bottom: auto;
  }

  .portfolio-end__swatches i {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .font-design__card {
    transition: none !important;
  }

  .layout-design__poster {
    transition: none !important;
  }
}

/* Detail work is presented as an open, borderless infinite canvas. */
.hhh-canvas-page,
.hhh-canvas-page .brand-case-gallery,
.hhh-canvas-page .project-document {
  background: #000 !important;
}

.hhh-canvas-page .brand-case-gallery,
.project-document--zoomable {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.hhh-canvas-page .brand-case-gallery__viewport,
.project-document--zoomable .brand-case-gallery__viewport {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--hhh-viewport-height, max(780px, 92svh)) !important;
  min-height: max(640px, 78svh) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  touch-action: pan-y pinch-zoom;
  cursor: grab !important;
}

.hhh-canvas-page .brand-case-gallery__viewport::before,
.hhh-canvas-page .brand-case-gallery__viewport::after {
  content: none !important;
  display: none !important;
}

.hhh-infinite-canvas__stage {
  display: grid !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  align-items: start !important;
  gap: var(--hhh-gap, 30px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  will-change: transform;
}

/* Brand systems: four balanced, sequential columns. Reading order is top to
   bottom in one column, then continues at the top of the next column. */
.hhh-brand-canvas__stage {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, var(--hhh-column-width, 430px))) !important;
  gap: var(--hhh-gap, 34px) !important;
  align-items: start !important;
}

.hhh-brand-column {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: var(--hhh-gap, 34px) !important;
}

.hhh-brand-column figure {
  flex: none !important;
}

.brand-case-page .hhh-brand-canvas__stage {
  will-change: auto !important;
}

.brand-case-page .hhh-brand-canvas__stage img {
  image-rendering: auto !important;
}

.brand-case-page img[src*="/brand-cases/buddy/page-13.jpg"],
.brand-case-page img[src*="/brand-cases/buddy/page-14.jpg"] {
  filter: contrast(.88) brightness(1.08) !important;
}

/* Static operation projects: one complete page per row, never cropped. */
.hhh-linear-canvas__stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--hhh-gap, 18px) !important;
  align-content: start !important;
  align-items: start !important;
}

.hhh-linear-canvas__stage figure,
.hhh-linear-canvas__stage img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

/* The Shankaka artwork is deliberately separated from the pure-black page by
   a restrained charcoal artwork field. */
.hhh-shankaka-canvas .hhh-brand-canvas__stage {
  box-sizing: content-box !important;
  padding: 24px !important;
  background: #111 !important;
}

.hhh-free-canvas__stage {
  display: block !important;
  position: relative !important;
  min-width: 1280px !important;
  min-height: 900px !important;
}

.hhh-infinite-canvas__stage.hhh-free-canvas__stage figure {
  position: absolute !important;
  width: var(--hhh-item-width, 560px) !important;
}

.hhh-infinite-canvas__stage figure {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

.hhh-infinite-canvas__stage img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.hhh-canvas-page .brand-case-gallery__toolbar {
  z-index: 50 !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .68) !important;
  backdrop-filter: blur(12px);
}

.project-document--video .video-player__controls {
  display: none !important;
}

.project-document--video video {
  cursor: auto !important;
}

@media (max-width: 700px) {
  .hhh-canvas-page .brand-case-gallery__viewport,
  .project-document--zoomable .brand-case-gallery__viewport {
    height: var(--hhh-viewport-height, max(660px, 84svh)) !important;
    min-height: max(560px, 72svh) !important;
  }
}

/* Mobile keeps the desktop composition and artwork proportions instead of
   replacing the portfolio with a compact, card-like layout. */
@media (max-width: 700px) {
  html,
  body {
    overflow-x: clip;
  }

  .portfolite-hero__content {
    width: calc(100% - 36px);
  }

  .portfolite-hero h1 {
    font-size: clamp(54px, 15.6vw, 66px);
  }

  .fuel-about {
    min-height: 0;
    padding: 24px 18px 0;
  }

  .fuel-about__body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-areas:
      "portrait rail"
      "main main";
    column-gap: 14px;
    row-gap: 28px;
    width: 100%;
  }

  .fuel-about__portrait {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .fuel-about__rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    gap: 18px;
  }

  .fuel-about__rail a,
  .fuel-about__rail b {
    overflow-wrap: anywhere;
  }

  .fuel-about__main {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .fuel-about__ticker {
    width: calc(100% + 36px);
    margin: 58px -18px 0;
  }

  .campaign-title-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 420px;
    height: 420px;
    padding: 58px 18px;
  }

  .campaign-title-panel__copy {
    width: 100%;
    max-width: none;
    font-size: clamp(31px, 8.7vw, 37px);
  }

  .campaign-title-panel__arrow {
    position: absolute;
    right: 18px;
    bottom: 58px;
    width: 64px;
    height: 64px;
  }

  .featured-projects {
    padding: 54px 0 38px;
  }

  .featured-projects__side-copy {
    display: block;
    pointer-events: none;
  }

  .particle-label {
    font-size: 10px;
    opacity: .82;
    transform: scale(.78);
  }

  .particle-label--top-left {
    left: 14px;
    top: 28px;
    transform-origin: left top;
  }

  .particle-label--bottom-right {
    right: 14px;
    bottom: 28px;
    transform-origin: right bottom;
  }

  .featured-project-card {
    height: auto;
    min-height: 0;
    padding: 10px 0 18px;
  }

  .featured-project-card__link {
    width: calc(100% - 54px);
    height: auto;
  }

  .featured-project-card--left .featured-project-card__link {
    margin-left: 18px;
    margin-right: auto;
  }

  .featured-project-card--right .featured-project-card__link {
    margin-left: auto;
    margin-right: 18px;
  }

  .featured-project-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .motion-transition {
    padding-top: 88px;
  }

  .motion-transition__stage {
    min-height: 820px;
    height: 820px;
  }

  .operation-showcase {
    padding-top: 104px;
  }

  .operation-showcase__copy {
    min-height: 520px;
  }

  .operation-showcase__viewer {
    min-height: 820px;
  }

  .brand-packaging-title,
  .brand-packaging-title .campaign-title-panel {
    height: 420px;
    min-height: 420px;
  }

  .brand-orbit {
    min-height: 760px;
    padding-top: 54px;
    padding-bottom: 66px;
  }

  .brand-orbit__card {
    width: clamp(280px, 78vw, 330px);
  }

  .font-design {
    min-height: 980px;
    padding-top: 88px;
    padding-bottom: 80px;
  }

  .font-design__reel {
    width: calc(100% - 8px) !important;
    min-height: 690px !important;
  }

  .font-design__card {
    width: clamp(220px, 64vw, 278px) !important;
  }

  .layout-design {
    min-height: 1220px;
    padding: 88px 0 104px;
  }

  .layout-design__drift {
    width: calc(100% - 16px);
    height: clamp(860px, 106svh, 960px);
    margin-top: 48px;
  }

  .layout-design__columns {
    gap: 10px;
  }

  .layout-design__track {
    gap: 11px;
  }

  .selected-year {
    min-height: 330px;
    padding: 66px 12px;
  }

  .selected-year__title {
    font-size: clamp(34px, 9.5vw, 42px);
  }

  .portfolio-end {
    min-height: 190px;
    padding: 36px 18px 22px;
  }

  .portfolio-end__inner {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 16px 18px;
  }

  .portfolio-end__identity {
    grid-column: 1 / -1;
    align-items: center;
    gap: 18px;
  }

  .portfolio-end__identity img {
    width: 48px;
    height: 48px;
  }

  .portfolio-end__identity strong {
    margin-bottom: 8px;
    font-size: 16px;
  }

  .portfolio-end__wechat,
  .portfolio-end__email {
    font-size: 10px;
  }

  .portfolio-end__email {
    text-align: right;
  }

  .portfolio-end__home {
    top: 0;
    right: 0;
    bottom: auto;
  }

  .portfolio-end__swatches {
    top: 5px;
    right: 112px;
    bottom: auto;
  }
}

/* Static operation and brand cases are ordinary full-width documents. */
.brand-case-page > .brand-case-page__heading,
.hhh-linear-document-page > .project-document__heading,
.brand-case-page .brand-case-gallery__toolbar,
.hhh-linear-document-page .brand-case-gallery__toolbar {
  display: none !important;
}

.hhh-linear-document-page,
.brand-case-page {
  width: 100%;
  height: auto !important;
  min-height: 100svh;
  padding: 0 0 clamp(46px, 7svh, 82px) !important;
  background: #000 !important;
  overflow: visible !important;
}

.hhh-linear-document-page .project-document,
.hhh-linear-document-page .brand-case-gallery,
.brand-case-page .brand-case-gallery {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

.hhh-linear-document-page .hhh-linear-document__viewport,
.hhh-linear-document__viewport,
.brand-case-page .brand-case-gallery__viewport {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: visible !important;
  touch-action: auto !important;
  cursor: inherit !important;
}

.hhh-linear-document__stack,
.brand-case-page .brand-case-gallery__grid {
  display: grid !important;
  position: static !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  gap: clamp(10px, 1.05vw, 18px) !important;
  width: var(--hhh-document-width, 100%) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #000 !important;
  transform: none !important;
  transform-origin: initial !important;
}

.hhh-document-zoom-indicator {
  z-index: 80;
  position: fixed;
  right: 20px;
  bottom: 20px;
  min-width: 58px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  background: rgba(8, 8, 8, .78);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hhh-document-zoom-indicator.is-visible {
  opacity: 1;
  transform: none;
}

.brand-case-page .hhh-brand-column {
  display: contents !important;
}

.hhh-linear-document__stack figure,
.brand-case-page .brand-case-gallery__grid figure {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

.hhh-linear-document__stack img,
.brand-case-page .brand-case-gallery__grid img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hhh-document-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin: clamp(44px, 7svh, 72px) 20px 0;
  padding: 12px 3px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .62);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  letter-spacing: .08em;
  transition: gap .3s ease, color .3s ease, border-color .3s ease;
}

.hhh-document-return span {
  font-size: 16px;
}

.hhh-document-return:hover,
.hhh-document-return:focus-visible {
  gap: 15px;
  border-color: #fff;
  color: #fff;
  outline: 0;
}

@media (max-width: 700px) {
  .motion-reel__item {
    display: none !important;
    --travel-duration: 14s !important;
  }

  .motion-reel__item:nth-child(1),
  .motion-reel__item:nth-child(4),
  .motion-reel__item:nth-child(6),
  .motion-reel__item:nth-child(10) {
    display: block !important;
  }

  .fuel-about__ticker-track,
  .fuel-about__ticker:hover .fuel-about__ticker-track {
    animation-duration: 34s !important;
    animation-play-state: running !important;
  }

  .motion-reel__card,
  .motion-reel__card video {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .motion-reel__card video {
    min-width: 100%;
    min-height: 100%;
    transform: translateZ(0) scale(1.01);
  }

  .hhh-motion-stream__item .motion-reel__card {
    height: clamp(78px, 23.6vw, 92px);
  }

  .font-design {
    min-height: 900px;
    padding-top: 78px;
    padding-bottom: 68px;
  }

  .font-design__reel {
    min-height: 620px !important;
  }

  .font-design__card {
    width: clamp(190px, 52vw, 230px) !important;
  }

  .hhh-linear-document-page,
  .brand-case-page {
    padding-bottom: 46px !important;
  }

  .hhh-linear-document__stack,
  .brand-case-page .brand-case-gallery__grid {
    gap: 8px !important;
  }

  .hhh-document-return {
    margin: 40px 16px 0;
    font-size: 13px;
  }
}

@media (hover: none), (pointer: coarse) {
  .fuel-about__ticker:hover .fuel-about__ticker-track {
    animation-play-state: running !important;
  }
}