/* Fixed desktop stage; the same real project links form a native list on mobile. */
:root:has([data-work-collection]) { scroll-padding-top: 0; }
.hb-work { --work-height: 100svh; position: relative; overflow-anchor: none; display: grid; grid-template-columns: minmax(285px,42fr) minmax(0,58fr); gap: 8px; padding: 0 8px; background: var(--hb-color-paper); color: var(--hb-color-ink); }
@supports(height:100dvh) { .hb-work { --work-height: 100dvh; } }
.hb-work__aside { grid-area: 1/1; position: sticky; top: 8px; align-self: start; height: calc(var(--work-height) - 16px); min-height: 580px; margin-top: 8px; overflow: hidden; border-radius: 8px; background: #e1e7d7; isolation: isolate; }
.hb-work__aside::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 72% 31%,#f7f8ef 0,transparent 58%),linear-gradient(145deg,#e4e9dc,#d4ddc7); }
.hb-work__breadcrumb { position: absolute; top: 126px; left: clamp(24px,2.5vw,48px); right: 24px; z-index: 3; }
.hb-work .hb-breadcrumb { font-size: 11px; margin: 0; }
.hb-work__scene { position: absolute; top: 126px; left: -10%; right: 0; height: min(53svh,490px); pointer-events: none; }
.hb-work__scene-light { position: absolute; inset: 10% 4% 4% 24%; border-radius: 50%; background: radial-gradient(ellipse,#f4f6e9b3,transparent 68%); }
.hb-work__mascot { position: relative; display: block; width: min(110%,62svh); max-width: none; height: auto; margin-left: 0; }
.hb-work__greenery { position: absolute; z-index: 1; right: -18%; bottom: -22px; width: min(64%,520px); max-width: none; height: auto; pointer-events: none; user-select: none; }
.hb-work__intro { position: absolute; left: clamp(24px,2.5vw,48px); right: 24px; bottom: 62px; z-index: 2; }
.hb-work__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font: 400 10px/1.5 var(--hb-font-body); letter-spacing: .1em; text-transform: uppercase; }
.hb-work__eyebrow svg { width: 17px; height: 17px; fill: var(--hb-color-orange); }
.hb-work h1 { margin: 0; font: 500 clamp(50px,4.6vw,76px)/.98 var(--hb-font-heading); letter-spacing: -.06em; }
.hb-work h1>span { color: var(--hb-color-orange); }
.hb-work__intro>p:last-child { margin: 18px 0 0; color: #69765f; font: 400 14px/1.6 var(--hb-font-body); }
.hb-work__projects { grid-area: 1/2; min-width: 0; padding: 0; margin: 0; list-style: none; }
.hb-work__slide { position: relative; display: grid; align-items: center; height: var(--work-height); min-height: 580px; scroll-margin-top: 0; }
.hb-work__link { position: relative; display: block; height: calc(var(--work-height) - 16px); min-height: 564px; color: #fff; border-radius: 8px; isolation: isolate; }
.hb-work__visual { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--hb-color-forest); }
.hb-work__visual>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hb-work__shade { position: absolute; inset: 0; background: linear-gradient(180deg,#10211900 30%,#10211912 48%,#1021198c 75%,#102119d9 100%); transition: opacity .5s; }
.hb-work__caption { position: absolute; inset: auto clamp(28px,3.3vw,64px) 124px; text-align: center; z-index: 10; color: var(--hb-color-paper); pointer-events: none; }
.hb-work__caption-copy>p { margin: 0 0 10px; color: #e9ede2d9; font: 400 10px/1.5 var(--hb-font-body); letter-spacing: .11em; text-transform: uppercase; }
.hb-work__caption h2 { margin: 0; font: 500 clamp(28px,2.35vw,36px)/1.1 var(--hb-font-heading); letter-spacing: -.04em; }
.hb-work__discover { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 10px; color: var(--hb-color-paper); font: 500 12px/1.5 var(--hb-font-body); }
.hb-work__discover svg { width: 22px; height: 22px; flex: none; fill: var(--hb-color-orange); }
.hb-work__scroll { display: none; }
.hb-work__scroll-mark { display: grid; place-items: center; animation: hb-work-scroll-cue 1.8s ease-in-out infinite; }
.hb-work__scroll-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; transform: rotate(90deg); }
.hb-work.is-last-project .hb-work__scroll-mark svg { transform: rotate(-90deg); }
@keyframes hb-work-scroll-cue { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.hb-work__cursor { display: none; position: fixed; top: 0; left: 0; z-index: 30; align-items: center; gap: 10px; color: var(--hb-color-paper); font: 500 12px/1.5 var(--hb-font-body); letter-spacing: .025em; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; filter: drop-shadow(0 1px 4px #102119bf); transition: opacity .15s ease,visibility .15s; }
.hb-work__cursor svg { width: 29px; height: 29px; flex: none; fill: var(--hb-color-orange); }
.hb-work a:focus-visible,.hb-work button:focus-visible { outline: 2px solid var(--hb-color-orange); outline-offset: 5px; }
@media (min-width:761px) {
  html:has(.hb-work.is-virtual),body:has(.hb-work.is-virtual) { height: 100%; overflow: hidden; }
  body:has(.hb-work.is-virtual)>.hb-footer { display: none; }
  .hb-work.is-virtual { height: var(--work-height); }
  .hb-work.is-virtual .hb-work__aside { min-height: 0; }
  .hb-work.is-virtual .hb-work__projects { position: relative; height: var(--work-height); overflow: hidden; isolation: isolate; background: var(--hb-color-paper); }
  .hb-work.is-virtual .hb-work__slide { position: absolute; inset: 0; height: var(--work-height); min-height: 0; }
  .hb-work.is-virtual .hb-work__link { position: absolute; inset: 8px 0 auto; min-height: 0; isolation: auto; }
  .hb-work.is-virtual .hb-work__visual { visibility: hidden; transform-origin: center; }
  .hb-work.is-virtual .is-active .hb-work__visual { visibility: visible; }
  .hb-work.is-virtual .hb-work__caption,.hb-work.is-virtual .hb-work__discover { z-index: 10; opacity: 0; }
  .hb-work.is-virtual .is-active .hb-work__caption,.hb-work.is-virtual .is-active .hb-work__discover { opacity: 1; }
  .hb-work.is-virtual .hb-work__slide:not(.is-active) .hb-work__link { pointer-events: none; }
  .hb-work.is-travelling .hb-work__visual { will-change: transform; }
  .hb-work.is-virtual .hb-work__scroll { grid-area: 1/2; position: relative; z-index: 12; align-self: end; justify-self: center; display: flex; align-items: center; gap: 9px; margin-bottom: 32px; color: var(--hb-color-paper); font: 400 10px/1.5 var(--hb-font-body); letter-spacing: .035em; pointer-events: none; transition: opacity .2s; }
  .hb-work.is-travelling .hb-work__scroll { opacity: 0; }
}
@media (min-width:761px) and (hover:hover) and (pointer:fine) {
  .hb-work.is-virtual .hb-work__caption { bottom: clamp(100px,14vh,124px); }
  .hb-work.is-virtual .hb-work__discover { visibility: hidden; }
  .hb-work.is-virtual .hb-work__link:focus-visible .hb-work__discover { visibility: visible; }
  .hb-work.is-virtual .hb-work__link:focus-visible .hb-work__caption { bottom: 124px; }
  .hb-work.is-virtual .hb-work__cursor { display: flex; }
  .hb-work.is-cursor-visible .hb-work__cursor { opacity: 1; visibility: visible; }
  .hb-work.is-cursor-visible .is-active .hb-work__link { cursor: none; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .hb-work__breadcrumb { top: 112px; }
  .hb-work__scene { top: 117px; }
  .hb-work__mascot { width: min(95%,48svh); }
  .hb-work__intro { bottom: 62px; }
  .hb-work__eyebrow { display: none; }
  .hb-work__intro>p:last-child { margin-top: 12px; }
}
@media (min-width:761px) and (max-height:640px) {
  .hb-work__scene { top: 102px; }
  .hb-work__mascot { width: min(82%,36svh); }
  .hb-work h1 { font-size: 45px; }
  .hb-work__intro { bottom: 36px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hb-work__intro { left: 24px; }
  .hb-work h1 { font-size: 45px; }
  .hb-work__caption { inset-inline: 28px; }
}
@media (max-width: 760px) {
  .hb-work { display: block; padding: 0 var(--hb-gutter-mobile) 40px; }
  .hb-work__aside { position: relative; top: 0; min-height: 0; height: 570px; margin: 0 calc(-1 * var(--hb-gutter-mobile)) 24px; border-radius: 0; }
  .hb-work__breadcrumb { top: 107px; left: 20px; }
  .hb-work__scene { top: 118px; left: -9%; height: 280px; }
  .hb-work__mascot { width: 350px; max-width: 100%; }
  .hb-work__intro { left: 20px; right: 20px; bottom: 40px; }
  .hb-work__eyebrow { display: none; }
  .hb-work h1 { font-size: var(--hb-font-size-page-h1); }
  .hb-work h1>br { display: none; }
  .hb-work__intro>p:last-child { margin-top: 12px; font-size: 13px; }
  .hb-work__slide { height: auto; min-height: 0; margin: 0 0 20px; scroll-margin-top: 94px; }
  .hb-work__link { height: 350px; min-height: 0; border-radius: 14px; overflow: hidden; }
  .hb-work__caption { inset: auto 20px 78px; text-align: left; }
  .hb-work__caption-copy>p { color: var(--hb-color-paper); font-size: 10px; margin-bottom: 8px; }
  .hb-work__caption h2 { font: 500 30px/1.06 var(--hb-font-heading); text-wrap: balance; }
  .hb-work__discover { left: 20px; bottom: 20px; transform: none; gap: 8px; padding: 9px 13px; border-radius: 30px; background: var(--hb-color-paper); color: var(--hb-color-ink); font-size: 12px; }
  .hb-work__discover svg { width: 18px; height: 18px; }
  .hb-work__shade { background: linear-gradient(180deg,#10211900 32%,#10211914 48%,#102119a6 72%,#102119ed 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-work *, .hb-work *::after { transition: none !important; animation: none !important; }
}