/* Originals are the default for touch, reduced motion, loading and failed assets. */
#projects .projects__image:has(.portfolio-scene){height:auto;aspect-ratio:1504/1046;transform:none!important;transition:none}
#projects .projects__image .portfolio-scene{display:block;position:relative;inset:auto;aspect-ratio:1504/1046;width:100%;height:auto;padding:0;margin:0;border:0;overflow:hidden;border-radius:inherit;transform:none;isolation:isolate;background:#ec8268;--layer-x:0;--layer-y:0;--layer-rx:0deg;--layer-ry:0deg}
#projects .portfolio-scene .portfolio-original{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important;opacity:1;transition:none;z-index:0}
#projects .projects__image .portfolio-layer-stack{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:none;opacity:0;transition:opacity .2s ease;pointer-events:none;transform:perspective(1400px) rotateX(var(--layer-rx)) rotateY(var(--layer-ry))}
.portfolio-layer-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate(var(--base-x,0px),var(--base-y,0px)) scale(1.02)}
#projects .projects__image .portfolio-layer-object{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:none;transform:translate(var(--object-x,0px),var(--object-y,0px)) rotate(var(--object-r,0deg));pointer-events:none}
#projects .projects__image .portfolio-scene[data-layered-cover="slogi"] .portfolio-layer-object,#projects .projects__image .portfolio-scene[data-layered-cover="case-9"] .portfolio-layer-object{height:auto}
.portfolio-layer-object img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
#projects .image-button .portfolio-layer-base{transform:translate(var(--base-x,0px),var(--base-y,0px)) scale(1.02)}
#projects .image-button .portfolio-layer-object img{transform:none}
#projects .portfolio-layer-base,#projects .portfolio-layer-object img{transition:none}
#projects .projects__image:has(.portfolio-scene)::after{content:none}
#projects .projects__image .portfolio-scene.is-layer-active .portfolio-layer-stack{opacity:1}
@media(prefers-reduced-motion:reduce){#projects .projects__image .portfolio-layer-stack{display:none}.portfolio-scene .portfolio-original{opacity:1!important;transition:none!important}.portfolio-scene,.portfolio-layer-base,.portfolio-layer-object{transform:none!important}}
#projects .projects__item.portfolio-page-hidden{display:none}
#projects [data-portfolio-more]{display:flex}
#projects [data-portfolio-more][hidden]{display:none!important}
@media(max-width:767px){#projects .projects__item.portfolio-mobile-hidden{display:none}}
@media(hover:none),(pointer:coarse){#projects .portfolio-layer-stack{transition:opacity 1.2s ease}}
/* Keep the information beneath each cover compact and readable. */
#portfolio-project-grid .projects__item{padding-bottom:16px}
#portfolio-project-grid .projects__type{margin-top:12px;padding:5px 10px;font-size:10px;line-height:1.3}
#portfolio-project-grid .projects__label{margin-top:8px;font-size:clamp(24px,1.7vw,32px);line-height:1.15}
#portfolio-project-grid .projects__description{margin:8px 0 14px;font-size:14px;line-height:1.45}
#portfolio-project-grid .projects__actions{gap:8px}
#portfolio-project-grid .projects__actions .projects__button{min-height:44px;padding:10px 12px;font-size:12px;line-height:1.4}
@media(max-width:420px){#portfolio-project-grid .projects__actions{flex-direction:row}#portfolio-project-grid .projects__actions .projects__button{padding:10px 6px;font-size:11px}}

/* Shared Grast placeholder for design and advertising covers, including no-JS. */
#marketing .projects__image .marketing-cover-scene{display:block;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;padding:0;margin:0;border:0;border-radius:inherit;overflow:hidden;isolation:isolate}
#marketing .marketing-cover-scene .marketing-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:0}
:is(#projects .projects__image .portfolio-scene,#marketing .projects__image .marketing-cover-scene){background:#1b1d20 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22142%22%20height%3D%2242%22%20viewBox%3D%220%200%20142%2042%22%3E%3Cg%20transform%3D%22translate%280%208%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.95877%2017.96H14.3685L12.0183%2022.0873H5.58719L0%2012.2635L6.96526%200H21.1629L23.5024%204.12735H9.35828L4.73257%2012.2744L7.95877%2017.96Z%22%20fill%3D%22%23DBFE01%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M28%2012.0485L20.6501%2025H15.9176L22.6692%2013.1125H8.7214L11.0716%208.9747H26.2586L28%2012.0485Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2239%22%20y%3D%2229%22%20fill%3D%22%23f4f5f2%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2223%22%20font-weight%3D%22700%22%20letter-spacing%3D%22-.6%22%3EGRAST.%3C%2Ftext%3E%3C%2Fsvg%3E") center/142px 42px no-repeat}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene)::before{content:'';position:absolute;left:calc(50% - 30px);top:calc(50% + 32px);width:60px;height:2px;border-radius:2px;background:#dbfe01;opacity:.35;z-index:-1;pointer-events:none;transform:scaleX(.55);transition:opacity .35s ease}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene).is-cover-loading::before{animation:grast-cover-loading 1.3s ease-in-out infinite alternate}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene)[data-cover-loaded="true"]::before{opacity:0;animation:none}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene) :is(.portfolio-original,.marketing-cover){color:transparent;font-size:0;transition:opacity .35s ease}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene).is-cover-loading :is(.portfolio-original,.marketing-cover),:is(#projects .portfolio-scene,#marketing .marketing-cover-scene).is-cover-error :is(.portfolio-original,.marketing-cover){opacity:0}
:is(#projects .portfolio-scene,#marketing .marketing-cover-scene).is-cover-error::before{animation:none;opacity:.2}
@keyframes grast-cover-loading{from{opacity:.25;transform:scaleX(.55)}to{opacity:.8;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){:is(#projects .portfolio-scene,#marketing .marketing-cover-scene)::before{animation:none!important;transition:none}:is(#projects .portfolio-scene,#marketing .marketing-cover-scene) :is(.portfolio-original,.marketing-cover){transition:none}}


/* Poster case cards: artwork and information share one responsive frame. */
#portfolio-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;align-items:stretch}
#portfolio-project-grid .projects__item{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);grid-template-rows:minmax(0,1fr) auto auto;column-gap:12px;row-gap:0;aspect-ratio:3/2;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:22px;overflow:hidden;background:#182123;box-shadow:none!important}
#portfolio-project-grid .projects__item::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(180deg,transparent 43%,rgba(13,23,24,.08) 56%,rgba(13,23,24,.76) 77%,rgba(13,23,24,.96) 100%);pointer-events:none}
#portfolio-project-grid .projects__image{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:inherit;overflow:hidden;z-index:0}
#portfolio-project-grid .projects__image:has(.portfolio-scene){aspect-ratio:auto}
#portfolio-project-grid .projects__image .portfolio-scene{position:absolute;left:0;top:50%;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1504/1046;transform:translateY(-50%)!important}
#portfolio-project-grid .projects__image .portfolio-scene[data-layered-cover="slogi"]{aspect-ratio:3/2}
/* Align baked-in headings with the neighboring poster; retain edge coverage. */
#portfolio-project-grid .projects__image .portfolio-scene:is([data-layered-cover="wownet"],[data-layered-cover="vipperson"]){transform:translateY(-50%) scale(1.02)!important;transform-origin:left center}
#portfolio-project-grid .projects__image .portfolio-scene[data-layered-cover="wownet"]{top:48.5%}
#portfolio-project-grid .projects__image .portfolio-scene[data-layered-cover="vipperson"]{top:47.35%}
#portfolio-project-grid .projects__image .projects__cover:not(.portfolio-original),#portfolio-project-grid .projects__image .projects__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#portfolio-project-grid .projects__label{position:relative;z-index:2;grid-column:1/-1;grid-row:2;align-self:end;min-width:0;margin:0 20px 3px;padding:0;font-size:clamp(21px,1.7vw,29px);font-weight:500;line-height:1.15;letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere;text-shadow:0 1px 8px #07101055;pointer-events:none}
#portfolio-project-grid .projects__description{display:none}
#portfolio-project-grid .projects__type{position:relative;z-index:2;grid-column:2;grid-row:3;display:block;align-self:center;justify-self:end;max-width:145px;margin:0 20px 9px 0;padding:0;border:0;border-radius:0;background:none;color:#c3cfca;font-size:12px;font-weight:400;line-height:1.35;letter-spacing:.02em;text-align:right;text-transform:none;pointer-events:none}
#portfolio-project-grid .projects__type::before{content:none}
#portfolio-project-grid .projects__actions{position:relative;z-index:2;grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:0 15px;min-width:0;margin:0 0 9px 20px;padding:0;border:0}
#portfolio-project-grid .projects__actions .projects__button,#portfolio-project-grid .projects__actions .projects__button:first-child{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start;width:auto;min-width:0;min-height:44px;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;color:#fff;box-shadow:none;font-size:12px;font-weight:500;line-height:1.3;text-transform:none;transition:color .2s ease}
#portfolio-project-grid .projects__actions .projects__button p{display:flex;align-items:center;gap:7px;width:auto;margin:0;line-height:inherit}
#portfolio-project-grid .projects__actions .projects__button span{display:grid;place-items:center;width:auto;height:auto;border:0;border-radius:0;background:none;color:#dbfe01;font-size:17px;line-height:1;transition:transform .2s ease}
#portfolio-project-grid .projects__actions .projects__button:hover{background:none;color:#dbfe01}
#portfolio-project-grid .projects__actions .projects__button:hover span{transform:translate(2px,-1px)}
#portfolio-project-grid .projects__actions .projects__button:focus-visible{outline:2px solid #dbfe01;outline-offset:3px;border-radius:3px}
#portfolio-project-grid .projects__item:focus-within{outline:2px solid #dbfe01;outline-offset:4px}
@media(max-width:1100px){#portfolio-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px}}
@media(max-width:767px){#portfolio-project-grid{grid-template-columns:minmax(0,1fr);gap:22px}#portfolio-project-grid .projects__item{border-radius:18px}#portfolio-project-grid .projects__label{font-size:24px;margin-inline:18px}#portfolio-project-grid .projects__actions{margin-left:18px;gap:0 12px}#portfolio-project-grid .projects__type{margin-right:18px;max-width:130px;font-size:12px}}
@media(max-width:359px){#portfolio-project-grid .projects__label{font-size:21px}#portfolio-project-grid .projects__type{max-width:112px}#portfolio-project-grid .projects__actions{gap:0 8px}#portfolio-project-grid .projects__actions .projects__button{font-size:12px}}
@media(prefers-reduced-motion:reduce){#portfolio-project-grid .projects__actions .projects__button,#portfolio-project-grid .projects__actions .projects__button span{transition:none}#portfolio-project-grid .projects__actions .projects__button:hover span{transform:none}}

/* Preserve the native Slogi scene ratio in the approval viewer too. */
#projects .projects__image .portfolio-scene[data-layered-cover="slogi"]{aspect-ratio:3/2}

/* The same quiet Grast mark used by the case-cover placeholders. */
.hero-video{background:#1b1d20}
.hero-video .hero-video__player{opacity:0;transition:opacity .25s ease}
.hero-video.is-video-ready .hero-video__player{opacity:1}
.hero-video .hero-video-loader{display:grid;position:absolute;inset:0;width:100%;height:100%;place-items:center;z-index:2;margin:0;border-radius:inherit;background:#1b1d20;opacity:1;animation:none;transform:none;pointer-events:none}
.hero-video .hero-video-loader[hidden]{display:none}
.hero-video-loader__mark{display:block;width:142px;height:42px;background-position:center;background-repeat:no-repeat;background-size:contain}
@media(prefers-reduced-motion:reduce){.hero-video .hero-video__player{transition:none}}

.hero-video-loader__mark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22142%22%20height%3D%2242%22%20viewBox%3D%220%200%20142%2042%22%3E%3Cg%20transform%3D%22translate%280%208%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.95877%2017.96H14.3685L12.0183%2022.0873H5.58719L0%2012.2635L6.96526%200H21.1629L23.5024%204.12735H9.35828L4.73257%2012.2744L7.95877%2017.96Z%22%20fill%3D%22%23DBFE01%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M28%2012.0485L20.6501%2025H15.9176L22.6692%2013.1125H8.7214L11.0716%208.9747H26.2586L28%2012.0485Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2239%22%20y%3D%2229%22%20fill%3D%22%23f4f5f2%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2223%22%20font-weight%3D%22700%22%20letter-spacing%3D%22-.6%22%3EGRAST.%3C%2Ftext%3E%3C%2Fsvg%3E")}