/* Design exploration: applies only to the copied Light Mode page. */
html:not(.game-case-study) .page-grid { max-width:1340px; grid-template-columns:190px minmax(0,900px); gap:0 48px; }
html:not(.game-case-study) .content { max-width:900px; }
html:not(.game-case-study) .toc { counter-reset:chapter; padding-top:3.5rem; }
html:not(.game-case-study) .toc a { display:flex; align-items:baseline; gap:12px; padding:12px 0; border-left:0; border-bottom:1px solid var(--border); border-radius:0; }
html:not(.game-case-study) .toc a::before { counter-increment:chapter; content:counter(chapter,decimal-leading-zero); font:500 11px var(--font-sans); color:var(--text-secondary); flex:none; }
html:not(.game-case-study) .toc a.active { color:var(--green); font-weight:700; border-left:0; background:transparent; }
html:not(.game-case-study) .toc a.active::before { color:var(--green); }
html:not(.game-case-study) .glance { display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; background:transparent; border:0; border-radius:0; padding:28px 0 8px; }
html:not(.game-case-study) .glance-item { background:transparent; padding:0 0 18px; border-top:2px solid var(--green); }
html:not(.game-case-study) .glance-label { margin:12px 0 8px; color:var(--green); font-size:11px; }
html:not(.game-case-study) .glance-value { font-weight:400; line-height:1.65; }
html:not(.game-case-study) .section { padding:52px 0; border-top:0; }
html:not(.game-case-study) .section + .section { border-top:1px solid var(--border); }
html:not(.game-case-study) .section > p:not(.img-caption),html:not(.game-case-study) .section > ul,html:not(.game-case-study) .section > ol { max-width:660px; }
html:not(.game-case-study) .section h2 { margin-bottom:26px; font-size:2rem; }
html:not(.game-case-study) .section h3 { margin-top:32px; }
html:not(.game-case-study) .figure-frame { margin-top:32px; border:0; border-radius:0; background:#eef0ec; }
html:not(.game-case-study) .figure-media { padding:28px; }
html:not(.game-case-study) .figure-media img { max-width:100%; }
html:not(.game-case-study) #problem .figure-media img { max-width:480px; }
html:not(.game-case-study) .img-caption { max-width:760px; margin-top:12px; }
@media(max-width:860px) { html:not(.game-case-study) .page-grid { grid-template-columns:minmax(0,1fr); padding:0 24px; } html:not(.game-case-study) .toc { display:none; } }
@media(max-width:600px) { html:not(.game-case-study) .glance { grid-template-columns:1fr; gap:14px; } html:not(.game-case-study) .section { padding:36px 0; } html:not(.game-case-study) .figure-media { padding:12px; } }


/* Second exploration: simple navigation, open summary rows, magazine alignment. */
html:not(.game-case-study) { --font-sans:'Poppins',system-ui,sans-serif; }
html:not(.game-case-study) .content h2,html:not(.game-case-study) .content h3 { font-family:var(--font-sans); font-weight:600; letter-spacing:-.035em; }
html:not(.game-case-study) .toc { counter-reset:none; }
html:not(.game-case-study) .toc a::before { content:none; counter-increment:none; }
html:not(.game-case-study) .glance { display:block; padding:24px 0 0; }
html:not(.game-case-study) .glance-item { display:grid; grid-template-columns:130px minmax(0,1fr); gap:24px; padding:18px 0; border-top:1px solid var(--border); }
html:not(.game-case-study) .glance-label { margin:3px 0 0; }
html:not(.game-case-study) .glance-value { max-width:620px; }
html:not(.game-case-study) .section > p:not(.img-caption),html:not(.game-case-study) .section > ul,html:not(.game-case-study) .section > ol,
html:not(.game-case-study) .section > h2,html:not(.game-case-study) .section > h3 { max-width:660px; margin-left:auto; margin-right:auto; }
html:not(.game-case-study) .section > h2 { font-size:1.8rem; }
html:not(.game-case-study) .section > .img-caption { max-width:660px; margin-left:auto; margin-right:auto; }
html:not(.game-case-study) .figure-frame { margin-top:32px; margin-bottom:16px; }
html:not(.game-case-study) .figure-media { padding:24px; }
@media(max-width:600px) {
 html:not(.game-case-study) .glance-item { grid-template-columns:1fr; gap:8px; }
 html:not(.game-case-study) .figure-media { padding:12px; }
}


/* Use spacing for rhythm, reserving faint dividers for navigation. */
html:not(.game-case-study) .section + .section { border-top:0; }
html:not(.game-case-study) .glance-item { border-top:0; }
html:not(.game-case-study) .hero { border-bottom:0; }
html:not(.game-case-study) .toc a { border-bottom:1px solid #e2e2de66; }


/* Summary rows need local separation without repeating rules throughout the story. */
html:not(.game-case-study) .glance-item + .glance-item { border-top:1px solid var(--border); }


html:not(.game-case-study) .content h2, html:not(.game-case-study) .content h3 { font-family:var(--font-serif); font-weight:400; letter-spacing:-.02em; }


.preview-footer { background:#eef0e9; border-top:1px solid var(--border); padding:48px 32px 100px; }
.preview-footer-inner { max-width:1140px; margin:auto; display:grid; grid-template-columns:2fr 1fr auto; gap:40px; align-items:start; }
.preview-footer h2 { font:400 2rem/1.2 var(--font-serif); margin:0 0 12px; }
.preview-footer p { font-size:15px; margin:0 0 18px; color:var(--text-secondary); }
.preview-footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.preview-footer a { font-size:16px; color:var(--green); text-decoration:none; }
.preview-footer a:hover { text-decoration:underline; }
.preview-footer a:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.preview-footer-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin:6px 0 18px; color:var(--text-secondary); }
.preview-footer-credit { font-size:13px; padding-top:6px; }
.preview-footer-credit span { display:block; font-size:13px; color:var(--text-secondary); margin-top:8px; }
html.game-case-study .preview-footer { display:none; }
@media(max-width:700px) { .preview-footer-inner { grid-template-columns:1fr; gap:28px; } .preview-footer { padding:36px 24px 100px; } }


.preview-footer .footer-contact-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:4px; }
.preview-footer .footer-contact-icon:hover { background:var(--green-light); }
.preview-footer .footer-contact-icon svg { display:block; }


.preview-footer .footer-contact-icon { border-radius:50%; border:1px solid var(--green); }


@media (hover:hover) and (pointer:fine) {
  .preview-footer .footer-contact-icon:hover { background:#245f2e; border-color:#245f2e; color:#fff; }
}
.preview-footer .footer-contact-icon:focus-visible { background:#245f2e; border-color:#245f2e; color:#fff; outline:2px solid var(--green); outline-offset:4px; }


.preview-footer { background:transparent; padding:28px 32px 96px; }
.preview-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.preview-footer-links { gap:12px; }
.preview-footer-credit { padding:0; font-size:13px; color:var(--text-secondary); }
@media(max-width:700px) { .preview-footer { padding:24px 24px 96px; } .preview-footer-inner { gap:16px; } }


.preview-footer-credit { text-align:right; max-width:420px; line-height:1.6; }
.preview-footer-credit strong { font-size:13px; font-weight:500; color:var(--text); }
.preview-footer-credit span { font-size:13px; margin-top:2px; }
@media(max-width:600px) { .preview-footer-inner { flex-direction:column; align-items:flex-start; gap:20px; } .preview-footer-credit { text-align:left; } }


.preview-footer .preview-footer-credit strong { font-size:13px; font-weight:400; color:var(--text-secondary); }
.preview-footer .footer-invitation h2 { font:400 1.5rem/1.3 var(--font-serif); margin:0 0 16px; color:var(--text); }


.preview-footer { padding-top:48px; }
.preview-footer .footer-work-invitation { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1140px; margin:0 auto 40px; padding:0 0 40px; color:var(--text); font:400 clamp(36px,6vw,76px)/1.15 var(--font-serif); text-decoration:none; }
.preview-footer .footer-work-invitation:hover { color:var(--green); }
.preview-footer-inner { border-top:1px solid var(--border); padding-top:24px; }
.preview-footer .preview-footer-links a { font-size:16px; }
.preview-footer .preview-footer-credit strong { font-size:13px; }
@media(max-width:600px) { .preview-footer .footer-work-invitation { margin-bottom:24px; padding-bottom:24px; } }


.preview-footer .footer-invitation { width:max-content; max-width:100%; }
.preview-footer .footer-invitation .preview-footer-links { gap:40px; flex-wrap:wrap; }
.preview-footer .footer-invitation .footer-work-invitation { display:block; margin:0 0 10px; padding:0; font-size:36px; white-space:nowrap; }
.preview-footer-inner { align-items:end; }
@media(max-width:600px) { .preview-footer-inner { align-items:flex-start; } .preview-footer .footer-invitation .preview-footer-links { gap:24px; } }


.preview-footer .footer-invitation .footer-work-invitation { margin-bottom:2px; cursor:default; }
.preview-footer .footer-work-invitation:hover { color:var(--text); }


.preview-footer, .preview-footer-inner { border-top:0; }


.preview-footer .footer-invitation .preview-footer-links { gap:30px; }


.preview-footer .footer-invitation .preview-footer-links { gap:0; align-items:center; }
.preview-footer .footer-invitation .preview-footer-links a + a { margin-left:15px; padding-left:15px; border-left:1px solid var(--border); }


.preview-footer .footer-invitation .footer-work-invitation { margin-bottom:10px; }


.preview-footer .footer-invitation .footer-work-invitation { border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:10px; }


.preview-footer-inner { position:relative; }
.preview-footer-inner::after { content:''; position:absolute; left:0; right:0; bottom:calc(1.6 * 14px + 10px); height:1px; background:var(--border); pointer-events:none; }
.preview-footer .footer-invitation .footer-work-invitation { border-bottom:0; }
@media(max-width:600px) {
 .preview-footer-inner::after { display:none; }
 .preview-footer .footer-invitation .footer-work-invitation { border-bottom:1px solid var(--border); }
}


.preview-footer .footer-invitation .footer-work-invitation { position:relative; top:5px; }


.preview-footer .footer-invitation .preview-footer-links a + a { border-left:0; }


.preview-footer-inner { display:grid; grid-template-columns:max-content minmax(0,1fr) 110px; align-items:end; gap:24px; }
.preview-footer-credit { justify-self:center; text-align:center; max-width:none; white-space:nowrap; }
@media(max-width:700px) {
 .preview-footer-inner { grid-template-columns:1fr; gap:20px; }
 .preview-footer-credit { justify-self:start; white-space:normal; text-align:left; }
}


html:not(.game-case-study) .content { padding-bottom:3rem; }
.preview-footer { padding:28px 32px 20px; }
.preview-footer-inner { max-width:1140px; grid-template-columns:max-content minmax(0,1fr) 120px; gap:40px; padding-top:0; }
.preview-footer-credit { justify-self:start; align-self:end; padding-bottom:1px; }
.preview-footer-inner::after { right:120px; bottom:calc(1.6 * 14px + 10px); }
@media(max-width:700px) {
 .preview-footer { padding:24px 24px 88px; }
 .preview-footer-inner { grid-template-columns:1fr; gap:18px; }
 .preview-footer-inner::after { display:none; }
 .preview-footer .footer-invitation .footer-work-invitation { border-bottom:1px solid var(--border); }
}


.preview-footer-credit { justify-self:end; text-align:right; }
@media(max-width:700px) { .preview-footer-credit { justify-self:start; text-align:left; } }


.preview-footer .footer-invitation .footer-work-invitation { top:8px; }


.preview-footer-credit { grid-column:2 / -1; justify-self:end; }
@media(max-width:700px) { .preview-footer-credit { grid-column:1; } }


@media(min-width:701px) {
 .preview-footer-inner { margin-left:0; margin-right:120px; width:calc(100% - 120px); max-width:1140px; grid-template-columns:max-content minmax(0,1fr); }
 .preview-footer-inner::after { right:0; }
 .preview-footer-credit { grid-column:2; justify-self:end; }
}


@media(max-width:700px) {
 .preview-footer { padding:24px 24px 34px; }
 .preview-footer-inner { width:100%; margin:0; grid-template-columns:minmax(0,1fr); gap:28px; }
 .preview-footer .preview-footer-credit { grid-column:1; justify-self:start; text-align:left; padding:0 110px 0 0; white-space:normal; line-height:1.5; }
}


.footer-credit-break { display:none; }
@media(max-width:700px) {
 .preview-footer .preview-footer-credit { justify-self:stretch; text-align:center; padding-right:110px; }
 .footer-credit-break { display:block; }
 .preview-footer { padding-bottom:25px; }
}


@media(max-width:480px) {
 .preview-footer .footer-invitation { width:100%; }
 .preview-footer .footer-invitation .footer-work-invitation { font-size:26px!important; white-space:normal; top:0; padding-bottom:10px; }
 .preview-footer .footer-invitation .preview-footer-links { flex-direction:column; align-items:flex-start; gap:12px; }
 .preview-footer .footer-invitation .preview-footer-links a + a { margin-left:0; padding-left:0; }
 .preview-footer .preview-footer-credit { text-align:left; }
}


@media(max-width:480px) {
 .preview-footer-inner { gap:18px; }
 .preview-footer .preview-footer-credit { line-height:1.25; }
 .preview-footer .preview-footer-credit strong { line-height:1.25; }
}


@media(max-width:700px) { .preview-footer .preview-footer-credit { position:relative; top:-5px; } }


html:not(.game-case-study) .content .bullets li { border-top:0; border-bottom:0; }


html:not(.game-case-study) .glance { max-width:660px; margin-left:auto; margin-right:auto; }
html:not(.game-case-study) .hero-client { max-width:660px; margin-left:auto; margin-right:auto; }

/* Extend the approved editorial treatment to the work listing. */
html:not(.game-case-study) .work-main { max-width:1140px; padding-bottom:3rem; }
html:not(.game-case-study) .work-grid { display:block; }
html:not(.game-case-study) .work-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px; align-items:center; background:transparent; border:0; border-radius:0; margin-bottom:64px; overflow:visible; }
html:not(.game-case-study) .work-card img { border-radius:0; }
html:not(.game-case-study) .work-card-copy { padding:0; }
html:not(.game-case-study) .work-card:hover { transform:none; box-shadow:none; }
html:not(.game-case-study) .work-card:hover h2 { color:#245f2e; }
@media(max-width:700px) { html:not(.game-case-study) .work-card { grid-template-columns:1fr; gap:20px; margin-bottom:44px; } }

/* Keep a consistent reading edge instead of alternating centered insets. */
html:not(.game-case-study) .section > p,
html:not(.game-case-study) .section > ul,
html:not(.game-case-study) .section > ol,
html:not(.game-case-study) .section > h2,
html:not(.game-case-study) .section > h3,
html:not(.game-case-study) .section > .img-caption,
html:not(.game-case-study) .glance,
html:not(.game-case-study) .hero-client {
 margin-left:0; margin-right:0;
}
html:not(.game-case-study) .section > .img-caption { padding-left:0; padding-right:0; }

/* Override the earlier inset rule at the same selector specificity. */
html:not(.game-case-study) .section > p:not(.img-caption),
html:not(.game-case-study) .section > ul,
html:not(.game-case-study) .section > ol {
 max-width:660px;
 margin-left:0;
 margin-right:0;
}

/* A compact case-study column keeps the artwork and story together. */
html:not(.game-case-study) .page-grid {
 max-width:1180px;
 grid-template-columns:190px minmax(0,720px);
 gap:0 40px;
}
html:not(.game-case-study) .content { width:100%; max-width:720px; }
@media(max-width:860px) {
 html:not(.game-case-study) .page-grid { grid-template-columns:minmax(0,720px); justify-content:center; }
}

/* Standalone product visuals and their captions share a centered axis. */
html:not(.game-case-study) .content .diagram {
 margin-left:auto; margin-right:auto;
}
html:not(.game-case-study) .section > .img-caption.img-caption-center {
 max-width:100%; margin-left:auto; margin-right:auto; text-align:center;
 padding-left:0; padding-right:0;
}
html:not(.game-case-study) .content .product-caption { text-align:center; }

/* Collaborator rows use the same treatment as the project summary. */
html:not(.game-case-study) .collab-list { max-width:660px; margin-left:0; margin-right:0; gap:0; }
html:not(.game-case-study) .collab-item {
 display:grid; grid-template-columns:130px minmax(0,1fr); gap:24px;
 padding:18px 0; border-bottom:0; border-top:0;
}
html:not(.game-case-study) .collab-item + .collab-item { border-top:1px solid var(--border); }
html:not(.game-case-study) .collab-role {
 margin:3px 0 0; color:var(--green); font-family:var(--font-sans);
 font-size:11px; font-weight:600; line-height:1.75;
 text-transform:uppercase; letter-spacing:.08em;
}
html:not(.game-case-study) .collab-desc { font-size:17px; font-weight:400; line-height:1.65; }
@media(max-width:600px) {
 html:not(.game-case-study) .collab-item { grid-template-columns:1fr; gap:8px; }
}

/* Pair the problem explanation with a modest visual accent. */
html:not(.game-case-study) .problem-intro {
 display:grid; grid-template-columns:minmax(0,1fr) 200px;
 gap:28px; align-items:center; max-width:660px; margin:20px 0 24px;
}
html:not(.game-case-study) .problem-intro p { margin:0; }
html:not(.game-case-study) .problem-intro .gif-embed { width:100%; max-width:200px; margin:0; }
@media(max-width:600px) {
 html:not(.game-case-study) .problem-intro { grid-template-columns:1fr; gap:20px; }
 html:not(.game-case-study) .problem-intro .gif-embed { max-width:180px; }
}

html:not(.game-case-study) #problem > .gif-embed { max-width:240px; margin:24px 0; }

/* Center caption blocks under visuals, keeping longer descriptions readable. */
html:not(.game-case-study) .section > .img-caption,
html:not(.game-case-study) .section > .img-caption.img-caption-center {
 max-width:660px;
 margin-left:auto;
 margin-right:auto;
 padding-left:0;
 padding-right:0;
 text-align:left;
}

/* Center every case-study visual within its own content group. */
html:not(.game-case-study) .content .shot,
html:not(.game-case-study) .content .phone-shot,
html:not(.game-case-study) .content .product-frame img,
html:not(.game-case-study) .content .figure-media img,
html:not(.game-case-study) .content .diagram,
html:not(.game-case-study) .content .figure-frame,
html:not(.game-case-study) .content .gif-embed,
html:not(.game-case-study) #problem > .gif-embed {
 margin-left:auto;
 margin-right:auto;
}

/* Center the descriptions themselves beneath their corresponding visuals. */
html:not(.game-case-study) .content .img-caption,
html:not(.game-case-study) .section > .img-caption,
html:not(.game-case-study) .section > .img-caption.img-caption-center {
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 padding-left:0;
 padding-right:0;
}

/* Center a visibly narrower caption block; align its text to the left. */
html:not(.game-case-study) .content .img-caption,
html:not(.game-case-study) .section > .img-caption,
html:not(.game-case-study) .section > .img-caption.img-caption-center {
 width:fit-content;
 max-width:min(100%, 580px);
 margin-left:auto;
 margin-right:auto;
 padding-left:0;
 padding-right:0;
 text-align:left;
}

html:not(.game-case-study) .warning-visual-pair { justify-content:center; }

/* Match the warning caption to the 220px-high visual pair. */
html:not(.game-case-study) .warning-visual-pair + .img-caption {
 max-width:min(100%, 495px);
}

html:not(.game-case-study) .warning-figure {
 width:fit-content; max-width:100%; margin:2rem auto .75rem;
 display:table;
}
html:not(.game-case-study) .warning-figure .warning-visual-pair {
 margin:0 0 12px !important;
}
html:not(.game-case-study) .warning-figure > .img-caption {
 display:table-caption; caption-side:bottom;
 width:auto !important; max-width:none !important;
 margin:0; padding:0; text-align:left;
}

html:not(.game-case-study) .warning-figure { display:block; }
html:not(.game-case-study) .warning-figure > .img-caption {
 display:block; width:100% !important; max-width:100% !important;
 text-wrap:wrap; white-space:normal;
}

html:not(.game-case-study) .warning-figure > .img-caption {
 text-align:left;
 text-align-last:auto;
}

.caption-ending { white-space:nowrap; }

/* Let the warning figure use the whole case-study column. */
html:not(.game-case-study) .warning-figure { width:100%; max-width:100%; }
html:not(.game-case-study) .warning-figure .warning-visual-pair {
 display:grid !important; grid-template-columns:268fr 310fr;
 gap:20px; align-items:start;
}
html:not(.game-case-study) .warning-visual-pair > div {
 height:auto !important; min-width:0;
}
html:not(.game-case-study) .warning-visual-pair svg {
 width:100% !important; height:auto !important;
}
html:not(.game-case-study) .warning-figure > .img-caption {
 width:100% !important; max-width:none !important; text-align:left;
}
@media(max-width:480px) {
 html:not(.game-case-study) .warning-figure .warning-visual-pair { grid-template-columns:1fr; }
}

html:not(.game-case-study) .warning-figure .warning-visual-pair {
 width:100%; max-width:520px;
 margin:0 auto 12px !important;
}

html:not(.game-case-study) .warning-figure > .img-caption {
 width:100% !important;
 max-width:520px !important;
 margin-left:auto;
 margin-right:auto;
 text-align:left;
}

html:not(.game-case-study) .warning-figure > .img-caption {
 max-width:640px !important;
}

html:not(.game-case-study) .warning-figure > .img-caption { text-align:left; text-align-last:center; }

/* One shared width and center for this visual and its description. */
html:not(.game-case-study) .warning-figure {
 width:100%; max-width:520px; margin-left:auto; margin-right:auto;
}
html:not(.game-case-study) .warning-figure .warning-visual-pair {
 width:100%; max-width:100%;
}
html:not(.game-case-study) .warning-figure > .img-caption {
 width:100% !important; max-width:100% !important;
 margin-left:0; margin-right:0;
 text-align:center; text-align-last:center;
}

/* Tighten the transition from project summary into the story. */
html:not(.game-case-study) .hero { padding-bottom:16px; }
html:not(.game-case-study) .hero + .section { padding-top:24px; }

/* Keep the case-study sections closer together. */
html:not(.game-case-study) .section { padding-top:32px; padding-bottom:32px; }
@media(max-width:600px) {
 html:not(.game-case-study) .section { padding-top:24px; padding-bottom:24px; }
}

html:not(.game-case-study) #problem > .gif-embed { margin-left:0; margin-right:auto; }

/* A readable mobile screen with a visible next-screen cue. */
@media(max-width:600px) {
 html:not(.game-case-study) .phone-row {
  display:flex; flex-wrap:nowrap; gap:16px;
  margin-left:0; margin-right:0;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:0; padding-bottom:12px;
  overscroll-behavior-x:contain;
 }
 html:not(.game-case-study) .phone-item { flex:0 0 80%; min-width:0; scroll-snap-align:start; }
 html:not(.game-case-study) .phone-shot { width:100%; max-width:320px; }
 html:not(.game-case-study) .phone-row:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
}

html:not(.game-case-study) .hero-titles .hero-subtitle { font-size:17px; line-height:1.5; }
@media(max-width:600px) { html:not(.game-case-study) .hero-titles .hero-subtitle { font-size:15px; } }

/* Share a content-sized label track across each set of rows. */
@media(min-width:601px) {
 html:not(.game-case-study) .glance,
 html:not(.game-case-study) .collab-list {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:24px; row-gap:0;
 }
 html:not(.game-case-study) .glance-item,
 html:not(.game-case-study) .collab-item {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  column-gap:24px;
 }
}

@media(max-width:600px) { .collab-title-break { display:none; } }

@media(min-width:601px) {
 html:not(.game-case-study) .glance,
 html:not(.game-case-study) .collab-list,
 html:not(.game-case-study) .glance-item,
 html:not(.game-case-study) .collab-item { column-gap:32px; }
}

.preview-footer .preview-footer-credit strong .credit-phrase {
 display:inline; font:inherit; color:inherit; margin:0; white-space:nowrap;
}
@media(max-width:700px) {
 .preview-footer .preview-footer-credit { white-space:normal; }
}

@media(max-width:700px) {
 .preview-footer .footer-invitation .footer-work-invitation { margin-bottom:18px; }
 .preview-footer .preview-footer-credit { text-align:left; }
}

@media(max-width:700px) {
 .preview-footer .footer-invitation { width:100%; }
 .preview-footer .footer-invitation .footer-work-invitation { width:100%; }
}

/* Shared image descriptions follow the visual width and centered alignment. */
html:not(.game-case-study) .figure-frame + .img-caption {
 width:100%; max-width:100%; text-align:center; text-align-last:center;
}
/* Virtual Assist crops depend on the original composite's proportions. */
html:not(.game-case-study) .va-screen-crop img { width:303.03%; max-width:none; margin-left:0; margin-right:0; }
html:not(.game-case-study) .va-screen-pair img { width:149.25%; max-width:none; margin-left:-49.25%; margin-right:0; }
@media(max-width:600px) {
 html:not(.game-case-study) .screen-gallery {
  overflow-x:auto; overscroll-behavior-x:contain; padding:12px;
 }
 html:not(.game-case-study) .va-screen-group {
  grid-template-columns:33% 67%; gap:0; width:780px;
 }
 html:not(.game-case-study) .va-screen-crop { width:auto; margin:0; }
 html:not(.game-case-study) .va-screen-pair { width:auto; }
 html:not(.game-case-study) .perkspot-screen-gallery img {
  width:820px; max-width:none; margin-left:0; margin-right:0;
 }
 html:not(.game-case-study) .screen-gallery:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
}

@media(max-width:600px) { .summary-label-break { display:none; } }

/* Connect the client identity more closely to the project summary. */
html:not(.game-case-study) .hero-client { margin-bottom:8.8px; }
html:not(.game-case-study) .hero .glance { padding-top:0; }

/* Long collaborator titles wrap rather than consume the description column. */
@media(min-width:601px) {
 html:not(.game-case-study) .collab-list {
  grid-template-columns:fit-content(180px) minmax(0,1fr);
 }
 html:not(.game-case-study) .collab-role { max-width:180px; }
}

/* On wide screens, anchor the footer to the header logo and clear the fixed toggle. */
@media(min-width:1181px) {
 .preview-footer {
  padding-left:calc((100vw - 1180px) / 2 + 32px);
  padding-right:152px;
 }
 .preview-footer-inner {
  width:100%; max-width:none; margin-left:0; margin-right:0;
 }
 .preview-footer-inner::after { right:0; }
}

@media(min-width:1181px) {
 .preview-footer-inner::after { left:calc(-1 * ((100vw - 1180px) / 2 + 32px)); }
}

.preview-footer .preview-footer-credit .footer-copyright { display:block; font-size:13px; font-weight:400; color:var(--text-secondary); margin:0 0 3px; }

/* Keep footer metadata together below the divider, beside the contact links. */
.preview-footer .preview-footer-credit {
 display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end;
 gap:4px 16px; max-width:none;
}
.preview-footer .preview-footer-credit .footer-copyright { margin:0; white-space:nowrap; }
.preview-footer .preview-footer-credit strong { font-size:13px; font-weight:400; }
@media(max-width:700px) {
 .preview-footer .preview-footer-credit { justify-content:flex-start; gap:4px 12px; }
}

@media(min-width:701px) {
 .preview-footer .preview-footer-credit { column-gap:32px; }
}

/* Give wrapped metadata its own row before it reaches the divider. */
@media(min-width:701px) and (max-width:1100px) {
 .preview-footer-inner { grid-template-columns:minmax(0,1fr); gap:20px; }
 .preview-footer .footer-invitation { width:100%; }
 .preview-footer .footer-invitation .footer-work-invitation {
  border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:18px;
 }
 .preview-footer-inner::after { display:none; }
 .preview-footer .preview-footer-credit {
  grid-column:1; justify-self:end; justify-content:flex-end;
 }
}

@media(min-width:701px) and (max-width:1100px) {
 .preview-footer .preview-footer-credit {
  flex-direction:column; align-items:flex-end; text-align:right; gap:4px;
 }
}

@media(min-width:701px) and (max-width:1100px) {
 .preview-footer .preview-footer-credit {
  flex-direction:row; align-items:baseline; justify-self:start;
  justify-content:flex-start; text-align:left; gap:4px 32px;
 }
}

@media(min-width:481px) {
 .preview-footer .preview-footer-credit { column-gap:32px; }
}

/* Keep the footer's bottom row together while the reserved toggle space permits. */
@media(min-width:900px) and (max-width:1100px) {
 .preview-footer-inner {
  grid-template-columns:max-content minmax(0,1fr); gap:24px;
  align-items:end;
 }
 .preview-footer .footer-invitation { width:max-content; }
 .preview-footer .footer-invitation .footer-work-invitation {
  border-bottom:0; margin-bottom:10px;
 }
 .preview-footer-inner::after { display:block; left:0; right:0; }
 .preview-footer .preview-footer-credit {
  grid-column:2; justify-self:end; flex-direction:row;
  justify-content:flex-end; text-align:right; column-gap:32px;
 }
}

/* Readable mobile footer type and comfortable contact targets. */
@media(max-width:700px) {
 .preview-footer .preview-footer-links a {
  font-size:16px; min-height:44px;
  display:inline-flex; align-items:center;
 }
 .preview-footer .preview-footer-credit,
 .preview-footer .preview-footer-credit strong,
 .preview-footer .preview-footer-credit .footer-copyright { font-size:13px; }
}

/* Keep footer text readable across every viewport size. */
.preview-footer .preview-footer-links a { font-size:16px; }
.preview-footer .preview-footer-credit,
.preview-footer .preview-footer-credit strong,
.preview-footer .preview-footer-credit .footer-copyright { font-size:13px; }

.preview-footer .preview-footer-credit strong .credit-phrase { font-size:inherit; }

/* Keep footer spacing steady as the layout wraps. */
.preview-footer .footer-invitation .preview-footer-links,
.preview-footer .preview-footer-links { column-gap:32px; row-gap:12px; }
.preview-footer .footer-invitation .preview-footer-links a + a,
.preview-footer .preview-footer-links a + a { margin-left:0; padding-left:0; }
.preview-footer .preview-footer-links a { min-height:44px; display:inline-flex; align-items:center; }
.preview-footer .preview-footer-credit { column-gap:32px; }

/* Anchor the divider and spacing to content rather than viewport offsets. */
.preview-footer-inner {
 display:flex; flex-wrap:wrap; align-items:center;
 column-gap:32px; row-gap:16px;
}
.preview-footer-inner::after { display:none; }
.preview-footer .footer-invitation { display:contents; }
.preview-footer .footer-invitation .footer-work-invitation {
 position:relative; top:0; flex:0 0 100%; width:100%; max-width:none;
 margin:0; padding:0 0 16px; border-bottom:1px solid var(--border);
}
.preview-footer .preview-footer-links { flex:0 1 auto; }
.preview-footer .preview-footer-credit {
 position:static; top:auto; flex:0 1 auto; margin-left:auto;
 align-self:center; justify-self:auto; padding:0;
 justify-content:flex-end; text-align:right; line-height:1.6;
}
.preview-footer .preview-footer-credit strong { line-height:1.6; }
@media(max-width:899px) {
 .preview-footer .preview-footer-credit {
  flex-basis:100%; margin-left:0; justify-content:flex-start; text-align:left;
 }
}
@media(max-width:700px) {
 .preview-footer .preview-footer-credit { padding-right:110px; }
}
@media(min-width:1181px) {
 .preview-footer .footer-invitation .footer-work-invitation::before {
  content:''; position:absolute; bottom:-1px;
  right:100%; width:calc((100vw - 1180px) / 2 + 32px);
  height:1px; background:var(--border);
 }
}

/* Align wrapped metadata left; use the available footer width for alignment. */
.preview-footer-inner { container-type:inline-size; }
.preview-footer .preview-footer-credit {
 margin-left:0; justify-content:flex-start; text-align:left;
}
@container (min-width:980px) {
 .preview-footer .preview-footer-credit {
  margin-left:auto; justify-content:flex-end; text-align:right;
 }
}

/* Align contact links and metadata on their text baseline. */
.preview-footer-inner { align-items:baseline; }
.preview-footer .footer-invitation .preview-footer-links,
.preview-footer .preview-footer-links { align-items:baseline; }
.preview-footer .preview-footer-credit { align-self:baseline; align-items:baseline; }

/* Client identity shares the summary's label and description columns. */
html:not(.game-case-study) .glance > .hero-client {
 display:grid; grid-column:1 / -1; grid-template-columns:subgrid;
 column-gap:32px; align-items:center; max-width:none;
}
@media(max-width:600px) {
 html:not(.game-case-study) .glance > .hero-client {
  grid-template-columns:minmax(0,1fr); gap:8px;
 }
}

/* Separate Client from Role with the overview's standard row divider. */
html:not(.game-case-study) .glance > .hero-client {
 padding:18px 0; margin-bottom:0; border-bottom:1px solid var(--border);
}
html:not(.game-case-study) .glance > .hero-client + .glance-item { border-top:0; }

/* Split Virtual Assist composites into three unique screens and stack on mobile. */
html:not(.game-case-study) .va-figure .va-screen-group {
 display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:0;
}
html:not(.game-case-study) .va-screen-slice { position:relative; overflow:hidden; aspect-ratio:0.627; }
html:not(.game-case-study) .va-screen-slice img {
 position:absolute; top:0; left:calc(var(--screen-index) * -100%);
 width:300% !important; max-width:none !important; height:100% !important; margin:0 !important;
}
@media(max-width:600px) {
 html:not(.game-case-study) .va-figure .figure-media { overflow:visible; }
 html:not(.game-case-study) .va-figure .va-screen-group {
  grid-template-columns:minmax(0,1fr); gap:20px; width:100%; max-width:320px; margin:auto;
 }
}

/* Mobile screen comparisons sit directly on the page, without a backdrop. */
@media(max-width:600px) {
 html:not(.game-case-study) .va-figure { background:transparent; border:0; border-radius:0; }
 html:not(.game-case-study) .va-figure .figure-media { background:transparent; padding:0; }
 html:not(.game-case-study) .va-figure .va-screen-group { mix-blend-mode:multiply; }
 html:not(.game-case-study) .va-original-screens .va-screen-slice:nth-child(3)::after {
  content:''; position:absolute; left:0; top:29.1%; width:19.5%; height:2.5%;
  background:linear-gradient(to right,#fff 0 47.7%,transparent 47.7%),linear-gradient(#12b0bd,#13b1bd);
  pointer-events:none;
 }
}

/* Independent mobile crops share an identical screen center and width. */
@media(max-width:600px) {
 html:not(.game-case-study) .va-screen-slice { aspect-ratio:auto; overflow:visible; }
 html:not(.game-case-study) .va-screen-slice picture { display:block; }
 html:not(.game-case-study) .va-screen-slice img {
  position:static; width:100% !important; height:auto !important;
 }
 html:not(.game-case-study) .va-original-screens .va-screen-slice:nth-child(3)::after { content:none; }
}

/* Editorial project content links retain a visible underline in every state. */
html:not(.game-case-study) main.content a:link,
html:not(.game-case-study) main.content a:visited {
 color:#2d7a3a; text-decoration:underline; text-underline-offset:0.15em;
}
html:not(.game-case-study) main.content a:hover,
html:not(.game-case-study) main.content a:focus-visible {
 color:#245f2e;
}

/* Center caption containers while keeping every description line left-aligned. */
html:not(.game-case-study) main.content .img-caption,
html:not(.game-case-study) main.content .product-caption,
html:not(.game-case-study) main.content figcaption {
 width:fit-content !important;
 max-width:min(100%,580px) !important;
 margin-left:auto; margin-right:auto;
 text-align:left; text-align-last:left;
}

/* Keep short ranking labels intact when project summaries wrap. */
html:not(.game-case-study) .rank-number { white-space:nowrap; }

html:not(.game-case-study) .keep-together { white-space:nowrap; }

/* Small-screen hero subtitles use the available frame, rather than title-fit widths. */
@media (max-width:700px) {
 html:not(.game-case-study) .hero-visual .hero-titles {
  width:100%; max-width:100%;
 }
 html:not(.game-case-study) .hero-visual .hero-titles > .hero-subtitle {
  width:calc(100cqw - 16px) !important;
  max-width:calc(100cqw - 16px) !important;
  box-sizing:border-box;
 }
 html:not(.game-case-study) .hero-visual .hero-titles > .hero-subtitle > span {
  display:block;
  white-space:normal !important;
  text-wrap:wrap !important;
  overflow-wrap:break-word;
  box-sizing:border-box;
 }
}

/* Numbered goals share the bullet lists' rhythm and green markers. */
html:not(.game-case-study) ol.numbered {
 list-style:none; counter-reset:goals; padding:0; margin-top:1rem; margin-bottom:1rem;
}
html:not(.game-case-study) ol.numbered > li {
 counter-increment:goals; position:relative; padding:.5rem 0 .5rem 1.25rem;
 color:var(--text);
}
html:not(.game-case-study) ol.numbered > li::before {
 content:counter(goals) "."; position:absolute; left:0; top:.5rem;
 color:var(--green); font-weight:600;
}