/* Shared page frame. Case-study artwork keeps its own product colours. */
:root { --container:1200px; }
.container {
  max-width:var(--container);
  padding-left:max(32px,env(safe-area-inset-left,0px));
  padding-right:max(32px,env(safe-area-inset-right,0px));
}
.toolbar .container { height:64px; }
.brandmark { font-size:18px; white-space:nowrap; }

/* Neutral silver and charcoal accents for the portfolio pages. */
.portfolio-page {
  --portfolio-accent:#1C2028;
  --portfolio-accent-hover:#353D49;
  --portfolio-wash:#ECEEF3;
  --accent:var(--portfolio-accent);
  --on-accent:#FFFFFF;
}
.portfolio-page .hero-surface {
  --hero-emphasis:#626D7D;
  background:
    radial-gradient(ellipse at 80% 12%,rgba(255,255,255,.9),transparent 56%),
    linear-gradient(118deg,#FCFCFD 0%,#ECEEF1 38%,#DDE1E6 69%,#F4F5F7 100%);
}
.portfolio-page .btn:not(.btn-ghost) { background:var(--portfolio-accent); color:#FFFFFF; }
.portfolio-page .btn:not(.btn-ghost):hover { background:var(--portfolio-accent-hover); }
.portfolio-page .btn-ghost:hover { border-color:var(--portfolio-accent); }
.portfolio-page .nav a[aria-current="page"] { color:var(--portfolio-accent); background:var(--portfolio-wash); }
.portfolio-page .principles li::before { color:var(--portfolio-accent); background:var(--portfolio-wash); }

/* Vertically centre metrics beside descriptions that wrap to two lines. */
.result { align-items:center; }
.result b { flex:none; line-height:1.1; }
.stat { display:grid; grid-template-rows:auto 1fr; align-content:start; }
.stat-value { display:flex; align-items:center; min-height:1.2em; line-height:1.2; }
.kicker b,.stage-label b { line-height:1; font-variant-numeric:tabular-nums; }

/* Final Digipay screens reused from the case-study vector originals. */
.card.dp .art { min-height:560px; }
.card.dp .phones { padding:24px; gap:16px; align-items:center; }
.card.dp .phone {
  width:40%; max-width:220px; flex:none;
  border:3px solid #59616D; border-radius:30px;
  background:#FFFFFF;
}
.card.dp .phone:nth-child(2) { margin-top:24px; }

@media (max-width:860px) {
  .card.dp .art { min-height:0; height:clamp(320px,100vw,560px); aspect-ratio:auto; }
}
@media (max-width:600px) {
  .container {
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .brandmark { font-size:16px; }
  .card.dp .phones { padding:20px 12px; gap:12px; }
  .card.dp .phone { border-width:2px; border-radius:22px; }
}

/* Resume is a plain navigation link; only the current page gets an active state. */
.nav .nav-cta { border:0; margin-left:0; }