/* Shared entry to the catalogue; the existing home-page reel stays independent. */
.cases-more{display:flex;justify-content:center;margin-top:30px}

/* Wide case cards inside the shared portfolio shell and navigation. */
body.cases-page{--font-body:'Manrope',-apple-system,sans-serif;--font-display:'Manrope',sans-serif}
.cases-skip{position:fixed;top:10px;left:20px;z-index:1000;transform:translateY(-150%);padding:12px 20px;border-radius:12px;background:var(--surface-2);border:1px solid var(--silver)}
.cases-skip:focus{transform:none}
body.cases-page .cases-intro{padding:68px 0 48px}
.cases-intro .eyebrow{color:var(--muted);margin-bottom:18px;font-size:10px;letter-spacing:.23em}
.cases-intro h1{font-weight:500;letter-spacing:-.055em;line-height:1.12;font-size:clamp(36px,5vw,60px)}
.cases-intro h1 em{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:-.035em;white-space:nowrap}
.cases-intro p{max-width:600px;margin:24px 0 28px;color:var(--dim);font-size:14px;line-height:1.9}
body.cases-page .cases-catalogue{padding:0 0 72px}
.cases-list{display:grid;gap:28px}
body.cases-page .cases-list .project-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:24px;overflow:hidden;transform:none}
body.cases-page .cases-list .case-preview{--case-preview-height:484px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:22px 26px 8px;border-bottom:0;border-right:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,rgba(198,211,217,.035),transparent 65%),rgba(8,14,18,.38)}
.cases-page .case-preview-bar{gap:10px;flex-wrap:wrap;font-size:10px;margin-bottom:12px}
.cases-page .case-number{font-size:12px;letter-spacing:.05em;color:var(--silver);font-variant-numeric:tabular-nums}
.cases-page .case-preview-bar>.case-status{margin-left:auto;font-size:8px}
body.cases-page .cases-list .project-case .case-body{padding:42px 40px;justify-content:center}
body.cases-page .cases-list .project-case .case-client{min-height:0;font-size:11px;margin-bottom:8px}
body.cases-page .cases-list .project-case h3{font-size:clamp(27px,3vw,36px);font-weight:500;letter-spacing:-.045em;line-height:1.2;margin-bottom:18px;text-wrap:balance}
body.cases-page .cases-list .project-case .case-tags{min-height:0;margin-bottom:26px;gap:6px}
body.cases-page .cases-list .project-case .case-tag{font-size:9px;padding:5px 9px}
.cases-page .project-case h4{font-size:10px;letter-spacing:.1em;margin-bottom:9px}
.cases-page .project-case .case-task{min-height:0;margin-bottom:24px}
.cases-page .project-case .case-task p,.cases-page .project-case .case-built li{font-size:13px;line-height:1.85}
.cases-page .project-case .case-built{margin-bottom:25px}
.cases-page .project-case .case-built ul{gap:8px}
.cases-page .project-case .case-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
body.cases-page .cases-list .project-case .case-link{margin-top:0;min-height:44px;font-size:12px}
.cases-page .case-release-note{margin-top:0;padding-top:0}
.cases-page .case-computer-stage{width:100%;padding-left:0;padding-right:0}
.cases-page .case-computer{max-width:420px}
.cases-page .cases-contact-direct{display:flex;justify-content:center;margin:-12px 0 32px}
.cases-page .sec-head h2 em{font-family:'Playfair Display',Georgia,serif}
.cases-page .brief-card{max-width:780px}
.cases-page .cases-no-script{padding:24px;text-align:center;color:var(--dim)}
.cases-page .cases-no-script a{text-decoration:underline}
.cases-page .foot-logo{font-family:'Manrope',sans-serif}

@media(max-width:820px){
  body.cases-page .cases-list .project-case{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  body.cases-page .cases-list .case-preview{--case-preview-height:430px;padding:20px 15px 8px}
  .cases-page .case-preview-bar{font-size:9px}
  .cases-page .case-preview-bar>.case-status{margin-left:0}
  body.cases-page .cases-list .project-case .case-body{padding:28px 24px}
  .cases-page .project-case .case-task p,.cases-page .project-case .case-built li{font-size:12px}
}
@media(max-width:640px){
  body[data-design="cyber"] .cases-grid.cases-track{padding-top:3px;padding-bottom:10px}
  body.cases-page .wrap{padding:0 18px}
  body.cases-page .cases-intro{padding:38px 0 30px}
  .cases-intro h1{font-size:38px}
  .cases-intro h1 em{display:block;margin-top:4px}
  .cases-intro p{font-size:13px;margin:20px 0 24px}
  body.cases-page .cases-catalogue{padding-bottom:48px}
  .cases-list{gap:22px}
  body.cases-page .cases-list .project-case{grid-template-columns:minmax(0,1fr);border-radius:20px}
  body.cases-page .cases-list .case-preview{--case-preview-height:410px;padding:16px 18px 8px;border-right:0;border-bottom:1px solid var(--line)}
  .cases-page .case-preview-bar>.case-status{margin-left:auto}
  body.cases-page .cases-list .project-case .case-body{padding:28px 23px}
  body.cases-page .cases-list .project-case h3{font-size:28px}
  .cases-page .project-case .case-task p,.cases-page .project-case .case-built li{font-size:13px}
  .cases-page .cases-contact-direct{margin:0 0 26px}
  .cases-page .cases-contact-direct .btn{width:100%}
  .cases-more{margin-top:24px}
}

/* A complete mobile case fits in view; detailed media stays in the viewer. */
@media(max-width:640px){
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-preview{--case-preview-height:clamp(130px,25vh,180px);padding:8px 10px 0}
  .project-case .case-preview-bar{min-height:24px;margin-bottom:4px;gap:6px;font-size:8px;flex-wrap:nowrap}
  .project-case .case-preview-bar .case-status{font-size:7px;padding:4px 7px}
  .project-case .case-number{font-size:9px}
  .project-case .case-phone-stage{padding:6px 0 24px}
  .project-case .case-phone-stage .case-app-preview.case-phone{width:calc((var(--case-preview-height) - 40px)*var(--case-screen-ratio,.49) + 10px);min-width:44px;height:calc(var(--case-preview-height) - 30px);padding:4px;border-radius:18px}
  .project-case .case-phone-screen{border-radius:13px}
  .project-case .case-phone::before{width:22px;height:2px;top:1px}
  .project-case .case-phone .case-video-hint{bottom:-23px;font-size:8px;padding:4px 7px}
  .project-case .case-phone-stage::after{bottom:21px}
  .project-case .case-computer-stage{padding:6px 2px 32px}
  .project-case .case-computer{width:min(100%,calc((var(--case-preview-height) - 54px)*1.42))}
  .project-case .case-monitor{padding:5px 5px 0;border-radius:8px}
  .project-case .case-monitor-chin{height:12px}
  .project-case .case-monitor-neck{height:14px}
  .project-case .case-monitor-foot{height:5px}
  .project-case .case-computer-hint{bottom:-23px;font-size:8px;padding:4px 7px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-body{padding:15px 16px;justify-content:flex-start}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-client{font-size:9px;line-height:1.5;min-height:0;margin-bottom:4px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case h3{font-size:21px;line-height:1.2;margin-bottom:8px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-tags{min-height:0;gap:5px;margin-bottom:11px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-tag{font-size:8px;line-height:1.4;padding:4px 6px}
  body[data-design="cyber"] .project-case h4{font-size:9px;line-height:1.5;margin-bottom:4px}
  body[data-design="cyber"] .project-case .case-task{min-height:0;margin-bottom:11px}
  body[data-design="cyber"] .project-case .case-task p,body[data-design="cyber"] .project-case .case-built li{font-size:12px;line-height:1.5}
  body[data-design="cyber"] .project-case .case-built{margin-bottom:10px}
  body[data-design="cyber"] .project-case .case-built ul{gap:3px}
  body[data-design="cyber"] .project-case .case-built li{padding-left:12px}
  body[data-design="cyber"] .project-case .case-built li::before{top:.65em;width:4px;height:4px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-link{font-size:11px;min-height:44px}
  .cases-page .project-case .case-actions{gap:4px 8px}
  .project-case .case-release-note{font-size:10px;line-height:1.5;min-height:36px;padding-top:7px}
}
@supports(height:100svh){
  @media(max-width:640px){
    body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-preview{--case-preview-height:clamp(130px,25svh,180px)}
  }
}
@media(max-width:360px){
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-preview{--case-preview-height:130px}
}
@media(max-width:640px) and (max-height:600px){
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-preview{--case-preview-height:100px}
  body[data-design="cyber"] :is(.cases-track,.cases-list) .project-case .case-body{padding-top:13px;padding-bottom:13px}
  body[data-design="cyber"] .project-case .case-task p,body[data-design="cyber"] .project-case .case-built li{font-size:11px;line-height:1.45}
}

/* An unframed caption leaves breathing room above the preview divider. */
.project-case .case-phone .case-expand-hint,.project-case .case-computer .case-expand-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--dim);font-size:10px;line-height:1.4;white-space:nowrap;
}
.project-case .case-phone .case-expand-hint{bottom:-22px}
.project-case .case-computer .case-expand-hint{bottom:-22px}
.case-expand-hint svg{display:block;flex:none;width:13px;height:13px}
@media(max-width:640px){
  .project-case .case-phone-stage .case-app-preview.case-phone{width:calc((var(--case-preview-height) - 49px)*var(--case-screen-ratio,.49) + 10px);height:calc(var(--case-preview-height) - 39px)}
  .project-case .case-phone .case-expand-hint{bottom:-21px}
  .project-case .case-computer .case-expand-hint{bottom:-18px}
}