.ai-portfolio{border:1px solid #ffffff12;border-radius:28px;margin-top:24px;margin-bottom:50px;scroll-margin-top:30px}
.ai-portfolio .ai-portfolio-title{font-size:clamp(42px,6vw,80px);line-height:1.2;margin:24px 0 40px;border:0;background:linear-gradient(110deg,#bdeff4,#a6a3de 55%,#ed77cd);background-clip:text;color:transparent}
.ai-portfolio .portfolio-nav a{min-height:78px;border-radius:16px}
.ai-portfolio .portfolio-category h3{font-size:26px;margin:24px 0}
.ai-portfolio .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ai-portfolio .portfolio-item{box-shadow:0 10px 32px #0002}
.ai-portfolio .portfolio-item img,.ai-portfolio .portfolio-item video{display:block;width:100%;height:380px;object-fit:contain;background:#0c1019;margin:0}
.ai-portfolio .ai-image-open{display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in}
.ai-portfolio .ai-image-open:focus-visible{outline:3px solid #65e2e9;outline-offset:-4px}
.ai-work-caption{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;color:#b8c4d5;font-size:13px;background:linear-gradient(135deg,#10121c,#1d1423)}
.ai-gallery-viewer{width:min(1100px,94vw);max-width:94vw;max-height:94dvh;padding:18px;border:1px solid #69e6ec66;border-radius:20px;background:#0c1019;color:#fff;overflow:auto}
.ai-gallery-viewer::backdrop{background:#02040ceF;backdrop-filter:blur(6px)}
.ai-viewer-close{display:block;margin:0 0 14px auto;padding:10px 20px;border:1px solid #ffffff40;border-radius:30px;background:#192135;color:#fff;cursor:pointer}
.ai-viewer-content img,.ai-viewer-content video{display:block;width:100%;height:auto;max-height:75dvh;object-fit:contain;margin:0 auto}
.ai-viewer-content p{text-align:center;margin:14px 0 0;color:#b8c4d5}
@media(max-width:1000px){.ai-portfolio .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ai-portfolio{border-radius:20px;padding:28px 16px!important}.ai-portfolio .ai-portfolio-title{font-size:44px;margin-bottom:26px}.ai-portfolio .portfolio-nav a{min-height:68px;font-size:14px}.ai-portfolio .portfolio-grid{grid-template-columns:1fr}.ai-portfolio .portfolio-item img{height:auto;max-height:560px;min-height:180px}.ai-portfolio .portfolio-item video{height:460px}.ai-portfolio .portfolio-category h3{font-size:23px}.ai-work-caption{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ai-portfolio *{scroll-behavior:auto!important;transition:none!important}}

/* Gentle depth for AI character cards, including keyboard focus. */
:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-grid{perspective:1100px;isolation:isolate}
:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-item{position:relative;transform-origin:center;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;backface-visibility:hidden}
@media(hover:hover) and (pointer:fine){
:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-item:hover{z-index:2;transform:translate3d(0,-9px,20px) rotateX(2deg) rotateY(-2deg) scale(1.025);border-color:#69e6ec99;box-shadow:0 24px 45px #0008,0 8px 20px #62deef20}
}
:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-item:focus-within{z-index:2;transform:translateY(-6px) scale(1.02);border-color:#69e6ec99;box-shadow:0 20px 40px #0007}
@media(prefers-reduced-motion:reduce){:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-item:hover,:is(#ai-category-1,#ai-category-2,#ai-category-3,#ai-category-5) .portfolio-item:focus-within{transform:none;transition:none}}

/* Apply the requested upside-down orientation in cards and the full-size viewer. */
.ai-portfolio img.ai-media-inverted,.ai-gallery-viewer img.ai-media-inverted{transform:rotate(180deg)}

.ai-enlarge-work,.ai-viewer-zoom button{min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #69e6ec77;border-radius:12px;background:#172638;color:#fff;font:inherit;cursor:pointer}
.ai-enlarge-work:focus-visible,.ai-viewer-zoom button:focus-visible{outline:3px solid #ee86cf;outline-offset:3px}
#ai-category-3 .ai-work-caption{align-items:center;flex-wrap:wrap}
.ai-viewer-zoom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.ai-viewer-zoom[hidden]{display:none}
.ai-viewer-zoom button:disabled{opacity:.45;cursor:default}
.ai-viewer-zoom output{min-width:50px;text-align:center;direction:ltr}
.ai-viewer-content{max-height:75dvh;overflow:auto;overscroll-behavior:contain}

/* A quiet, readable introduction and a separate invitation to get in touch. */
.ai-memorial-story{max-width:820px;margin:0 0 36px;padding:32px 36px;border:1px solid #b5c4e033;border-inline-start:3px solid #c2b2e4;border-radius:20px;background:linear-gradient(135deg,#192637aa,#231c32aa)}
.ai-memorial-story .ai-memorial-eyebrow{margin:0 0 8px;color:#d6caee;font-size:15px;letter-spacing:1px}
.ai-memorial-story h4{font-size:clamp(30px,4vw,44px);line-height:1.3;color:#f7f2ff;margin:0 0 22px;font-weight:600}
.ai-memorial-story p:not(.ai-memorial-eyebrow){font-size:18px;line-height:1.95;color:#e0e5ee;margin:0 0 18px;max-width:68ch}
.ai-memorial-story p:last-child{margin-bottom:0}
.ai-memorial-contact{margin-top:36px;padding:30px 32px;border:1px solid #b5c4e033;border-radius:20px;background:#101b29}
.ai-memorial-contact h4{font-size:clamp(23px,3vw,30px);line-height:1.5;color:#f4f5fc;margin:0 0 12px}
.ai-memorial-contact p{max-width:65ch;font-size:17px;line-height:1.9;color:#d4dce9;margin:0 0 22px}
.ai-memorial-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;box-sizing:border-box;padding:12px 22px;border:1px solid #c7b6e8;border-radius:12px;color:#fbf6ff;background:#332944;font-size:16px;font-weight:600;text-decoration:none;text-align:center}
.ai-memorial-contact-link:hover{background:#45365d;border-color:#e2d3ff}
.ai-memorial-contact-link:focus-visible{outline:3px solid #82dfed;outline-offset:4px}
@media(max-width:700px){.ai-memorial-story{padding:24px 20px}.ai-memorial-story p:not(.ai-memorial-eyebrow){font-size:16px;line-height:1.9}.ai-memorial-contact{padding:24px 20px}.ai-memorial-contact p{font-size:16px}.ai-memorial-contact-link{width:100%}}