/* Homepage case gallery and modal. */
.landing-page .showcase-section{width:min(100%,1500px);padding-top:90px;padding-bottom:36px}
.landing-page .showcase-section>h2{text-align:center;font-size:clamp(32px,3.2vw,48px);margin-bottom:32px}
.landing-page .showcase-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.landing-page .showcase-tabs button{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--radius-pill);padding:11px 20px;font-size:13px;backdrop-filter:none;-webkit-backdrop-filter:none}
.landing-page .showcase-tabs button[aria-selected="true"]{background:var(--color-action-primary);border-color:var(--color-accent);color:var(--color-action-primary-text);font-weight:700}
.landing-page .showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.landing-page .showcase-card{position:relative;aspect-ratio:3/4;min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-surface);transition:transform .24s ease,box-shadow .24s ease}
.landing-page .showcase-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-surface)}
.landing-page .showcase-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit}
.landing-page .case-media-frame{position:relative;overflow:hidden;display:grid;place-items:center;background:var(--color-surface-subtle);width:100%;height:100%;isolation:isolate}
.landing-page .case-art-window{position:relative;overflow:hidden;flex:none}
.landing-page .case-art-window img{position:absolute;max-width:none;display:block}
.landing-page .case-media-failed{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;background:var(--color-surface-subtle);color:var(--color-text-secondary);font-size:12px;padding:12px}
.landing-page .case-media-failed .material-symbols-outlined{font-size:30px}
.landing-page .showcase-card-label{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text-primary);font-size:13px;line-height:1.5;opacity:0;transition:opacity .16s;backdrop-filter:none;-webkit-backdrop-filter:none}
.landing-page .showcase-card:hover .showcase-card-label,.landing-page .showcase-card:focus-within .showcase-card-label{opacity:1}
.landing-page .showcase-thumbnails{position:absolute;bottom:12px;left:12px;display:flex;gap:7px;z-index:2}
.landing-page .showcase-thumb{position:relative;width:54px;height:70px;border:2px solid var(--color-border);padding:0;border-radius:var(--radius-control);overflow:hidden;background:var(--color-surface-subtle);box-shadow:var(--shadow-surface)}
.landing-page .showcase-thumb[aria-pressed="true"]{border-color:var(--color-accent-deep)}
.landing-page .showcase-thumb span.thumb-label{position:absolute;inset:auto 0 0;background:var(--color-surface);color:var(--color-text-primary);font-size:var(--text-caption);line-height:17px;text-align:center;backdrop-filter:none}
.landing-page .showcase-note{font-size:12px;color:var(--color-text-secondary);text-align:center;margin-top:26px}
.landing-page .showcase-section :focus-visible{outline-offset:-3px}

.landing-page .showcase-dialog{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-text-primary);padding:0;width:min(1050px,calc(100% - 48px));max-height:calc(100dvh - 48px);overflow:auto;box-shadow:var(--shadow-floating);backdrop-filter:none;-webkit-backdrop-filter:none}
.landing-page .showcase-dialog::backdrop{background:var(--color-surface-subtle)}
.landing-page:has(.showcase-dialog[open]){overflow:hidden}
.landing-page .case-dialog-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;background:var(--color-surface);border-bottom:1px solid var(--color-border);backdrop-filter:none}
.landing-page .case-dialog-bar h2{font-size:18px;line-height:1.5}
.landing-page .case-icon-button{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface);color:var(--color-text-primary)}
.landing-page .case-icon-button:hover{border-color:var(--color-accent);background:var(--color-action-primary);color:var(--color-action-primary-text)}
.landing-page .case-icon-button:disabled{opacity:.3;cursor:default}
.landing-page .case-dialog-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr)}
.landing-page .case-dialog-visual{position:relative;aspect-ratio:3/4;min-height:0;max-height:72dvh;background:var(--color-surface-subtle)}
.landing-page .case-dialog-switch{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-floating);backdrop-filter:none}
.landing-page .case-dialog-switch button{border:0;border-radius:var(--radius-pill);white-space:nowrap;background:transparent;color:var(--color-text-secondary);padding:9px 15px;font-size:13px}
.landing-page .case-dialog-switch button[aria-pressed="true"]{background:var(--color-action-primary);color:var(--color-action-primary-text)}
.landing-page .case-dialog-info{display:flex;flex-direction:column;gap:16px;padding:34px;align-items:flex-start}
.landing-page .case-dialog-eyebrow{font-size:12px;color:var(--color-accent-deep)}
.landing-page .case-dialog-info h3{font-size:25px}
.landing-page #case-dialog-description{font-size:14px;color:var(--color-text-secondary);line-height:1.9}
.landing-page .case-dialog-pair{display:flex;gap:12px}
.landing-page .case-dialog-pair .showcase-thumb{width:74px;height:96px}
.landing-page .case-provenance{font-size:12px;color:var(--color-text-secondary);line-height:1.8}
.landing-page .case-dialog-info>.public-button{font-size:14px;min-height:48px;width:100%}
.landing-page .case-dialog-navigation{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;margin-top:auto;padding-top:12px;color:var(--color-text-secondary);font-size:13px}


@media(max-width:850px){.landing-page .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-page .showcase-dialog{width:calc(100% - 28px)}.landing-page .case-dialog-info{padding:24px}.landing-page .case-dialog-layout{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.landing-page .showcase-section{padding-top:66px;padding-bottom:28px}.landing-page .showcase-section>h2{font-size:32px;margin-bottom:24px}.landing-page .showcase-tabs button{font-size:12px;padding:9px 13px}.landing-page .showcase-grid{gap:10px}.landing-page .showcase-card{border-radius:var(--radius-card)}.landing-page .showcase-thumbnails{left:8px;bottom:8px;gap:4px}.landing-page .showcase-thumb{width:44px;height:56px;border-radius:7px}.landing-page .showcase-thumb span.thumb-label{font-size:var(--text-caption);line-height:14px}.landing-page .showcase-card-label{font-size:var(--text-caption);padding:6px;top:8px;left:8px;right:8px}.landing-page .case-dialog-layout{display:block}.landing-page .case-dialog-visual{width:100%;height:44dvh;aspect-ratio:auto}.landing-page .case-dialog-info{padding:20px;gap:12px}.landing-page .case-dialog-info h3{font-size:21px}.landing-page .case-dialog-bar{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.landing-page .showcase-card-label,.landing-page .showcase-card{transition:none}}

/* Complete case browser retains the homepage's light glass surfaces. */
.landing-page .showcase-section{position:relative;padding-top:clamp(100px,11vw,164px);padding-bottom:56px}
.landing-page .showcase-heading{margin-inline:auto;text-align:center}
.landing-page .showcase-heading>p:last-child{margin-inline:auto}
.landing-page .showcase-tabs{margin-top:0;margin-bottom:36px}
.landing-page .showcase-grid{gap:20px}
.landing-page .showcase-card{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.landing-page .showcase-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-surface);pointer-events:none}
.landing-page .showcase-card:hover{transform:translateY(-8px) rotateX(1deg);box-shadow:var(--shadow-surface)}

@media(max-width:600px){
  .landing-page .showcase-section{padding-top:82px}
}
@media(prefers-reduced-motion:reduce){.landing-page .showcase-card:hover{transform:none}}

/* Persistent comparison layers avoid image replacement and loading flashes. */
.landing-page .case-comparison{position:relative;width:100%;height:100%;isolation:isolate}
.landing-page .case-comparison>[data-case-layer]{position:absolute;inset:0}
.landing-page .case-comparison>[data-case-layer="before"]{z-index:0}
.landing-page .case-comparison>[data-case-layer="after"]{z-index:1;clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.45,0,.2,1)}
.landing-page .case-comparison[data-case-view="before"]>[data-case-layer="after"]{clip-path:inset(0 100% 0 0)}
.landing-page.motion-scenes-ready .case-comparison .motion-image{opacity:1;filter:none;scale:1;transition:none}
.landing-page .showcase-toolbar{display:flex;justify-content:center;margin-bottom:28px}
.landing-page .showcase-toolbar .showcase-tabs{margin:0}
@media(max-width:850px){.landing-page .showcase-toolbar{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.landing-page .case-comparison>[data-case-layer="after"]{transition:none}}

/* M03: keep the two-column gallery, with phone-sized spacing and touch targets. */
@media (max-width: 767px) {
  .landing-page .public-container.showcase-section { padding: 40px 16px 28px; }
  .landing-page .showcase-heading { margin-bottom: 20px; }
  .landing-page .showcase-heading h2 { font-size: 26px; line-height: 1.35; }
  .landing-page .showcase-heading > p:last-child { margin-top: 12px !important; font-size: 14px; }
  .landing-page .showcase-toolbar { display: block; margin-bottom: 16px; }
  .landing-page .showcase-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; padding: 2px 0; }
  .landing-page .showcase-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .landing-page .public-container.showcase-section .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
  .landing-page .showcase-card-label { top: 8px; left: 8px; right: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.4; }
  .landing-page .showcase-thumbnails { left: 8px; bottom: 8px; gap: 6px; }
  .landing-page .showcase-thumb { width: 52px; height: 60px; }
  .landing-page .showcase-thumb span.thumb-label { font-size: 11px; line-height: 16px; white-space: nowrap; }
  .landing-page .showcase-note { margin-top: 16px; }
  .landing-page .showcase-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .landing-page .case-dialog-layout { display: block; }
  .landing-page .case-dialog-visual { width: 100%; height: 44dvh; aspect-ratio: auto; }
  .landing-page .case-dialog-info { padding: 16px; gap: 12px; }
  .landing-page .case-dialog-bar { padding: 10px 12px; gap: 12px; }
  .landing-page .case-dialog-bar h2 { font-size: 16px; }
  .landing-page .case-icon-button { width: 44px; height: 44px; }
  .landing-page .case-dialog-switch button { min-height: 44px; }
}