/* Project media feathers into the black page; the original Ribbon remains the interaction plane. */
.hero-ribbon .hero-stage{position:relative;background:transparent;isolation:isolate;border:0;outline:0;box-shadow:none;border-radius:0;overflow:visible;contain:layout}
.hero-media-backdrop,.hero-media-wash{position:absolute;inset:-85px auto -110px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;border:0;outline:0;border-radius:0;mask-image:radial-gradient(ellipse 64% 66% at 50% 48%,#000 22%,#000d 47%,transparent 77%);-webkit-mask-image:radial-gradient(ellipse 64% 66% at 50% 48%,#000 22%,#000d 47%,transparent 77%)}
.hero-media-backdrop{z-index:0;background:transparent}
.hero-media-layer{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hero-media-layer.is-active{opacity:1}
.hero-media-layer>img,.hero-media-layer>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;outline:0;box-shadow:none;filter:blur(3px) brightness(.7);transform:scale(1.025)}
.hero-media-layer>img:not([src]){visibility:hidden}
.hero-media-layer>video{opacity:0;transition:opacity .32s cubic-bezier(.16,1,.3,1)}
.hero-media-layer>video.is-playing{opacity:1}
.hero-media-wash{z-index:1;background:linear-gradient(180deg,#000d 0%,#000a 27%,#0004 56%,#000a 84%,#000f 100%)}
.hero-ribbon .ribbon-identity{z-index:5}
.hero-ribbon .ribbon-identity h1{white-space:nowrap;color:#fff}
.hero-ribbon .ribbon-space{z-index:2}
.hero-ribbon .ribbon-controls{z-index:6;justify-content:center;left:25px;right:25px;bottom:23px}
.hero-ribbon .ribbon-drag-note{color:#aaa;font-size:9px;letter-spacing:.025em;text-transform:none}
.hero-ribbon .ribbon-art .hero-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.hero-ribbon .ribbon-piece[aria-pressed=true]:is(:hover,:focus-visible) .hero-preview-image{opacity:1}
.hero-ribbon .ribbon-piece,.hero-ribbon .ribbon-art,.hero-ribbon .ribbon-space{border:0;outline:0}
.hero-ribbon .piece-caption{gap:15px}
.hero-ribbon .hero-project-overview{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,1.6fr) auto;gap:35px;align-items:center;padding:25px 0 29px;min-height:106px;border:0;background:transparent;color:#fff;position:relative;z-index:3}
.hero-project-overview .hero-active{min-width:0;gap:7px}
.hero-project-overview .hero-active-category{color:#999;font-size:8px;line-height:1.3;letter-spacing:.04em}
.hero-project-overview .hero-active-name{font-size:clamp(19px,2.25vw,31px);font-weight:500;letter-spacing:-.04em;line-height:1.1;white-space:normal;overflow:visible;color:#fff;text-overflow:clip}
.hero-project-overview .hero-active-summary{font-size:12px;line-height:1.5;color:#aaa;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:660px;margin:0}
.hero-project-overview .hero-project-cta{font-size:11px;line-height:1.3;gap:25px;align-items:center;justify-self:end;white-space:nowrap;color:#fff;padding:12px 0;max-width:none}
.hero-project-overview .hero-project-cta:focus-visible{background:#222;color:#fff;outline:0}
@media(max-width:900px) and (min-width:681px){.hero-ribbon .hero-project-overview{grid-template-columns:minmax(145px,.8fr) minmax(0,1.2fr) auto;gap:20px}.hero-project-overview .hero-active-summary{font-size:10px}.hero-project-overview .hero-project-cta{font-size:9px;gap:12px}}
@media(max-width:680px){.hero-ribbon .ribbon-controls{bottom:23px}.hero-ribbon .ribbon-drag-note{font-size:8px}.hero-ribbon .hero-project-overview{grid-template-columns:minmax(0,1fr) auto;gap:17px 20px;padding:23px 0 27px}.hero-project-overview .hero-active-name{font-size:24px}.hero-project-overview .hero-active-category{font-size:7px}.hero-project-overview .hero-active-summary{grid-row:2;grid-column:1/-1;font-size:10px;line-height:1.5}.hero-project-overview .hero-project-cta{grid-column:2;grid-row:1;align-self:end;font-size:9px;gap:15px}.hero-media-wash{background:linear-gradient(180deg,#000e 0%,#000b 38%,#0006 64%,#000c 86%,#000f 100%)}.hero-media-backdrop,.hero-media-wash{inset:-55px auto -85px;left:50%;width:100vw;mask-image:radial-gradient(ellipse 86% 67% at 50% 48%,#000 20%,#000c 48%,transparent 77%);-webkit-mask-image:radial-gradient(ellipse 86% 67% at 50% 48%,#000 20%,#000c 48%,transparent 77%)}}

/* A full-bleed backdrop must not turn the preserve-3d gesture plane into an opaque cover. */
.hero-ribbon .ribbon-space{background:transparent!important}