/* ============================================================
   Encount — Case-study page layout (loads AFTER signal.css)
   Shares tokens, nav, footer, drawer from signal.css
   ============================================================ */
/* case pages use a narrower measure throughout */
.wrap { max-width: 1100px; }

/* hero */
.case-hero { position: relative; padding: 190px 0 0; overflow: hidden; }
.case-hero .field-sm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.7; }
.case-hero__inner { position: relative; z-index: 2; }
.crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; }
a.crumb:hover .mono { color: var(--pink); }
.case-hero .kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.case-hero .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); flex-shrink: 0; }
.case-hero h1 { font-size: clamp(44px, 5.6vw, 84px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.case-hero .sub { margin-top: 20px; font-size: 20px; color: var(--dim); max-width: 56ch; text-wrap: pretty; }

/* key numbers strip */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 64px; position: relative; z-index: 2; }
.stat-strip .cell { background: var(--bg-raise); padding: 28px; }
.stat-strip b { display: block; font-family: var(--mono); font-size: clamp(22px, 2.4vw, 34px); font-weight: 500; color: var(--pink); line-height: 1.2; }
.stat-strip small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* sections */
.case-main section { padding: 110px 0 0; }
.case-main section:last-of-type { padding-bottom: 110px; }
.sec-label { display: block; margin-bottom: 26px; }
.sec-label .no { color: var(--pink); }
h2.case { font-size: clamp(30px, 3.4vw, 50px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 24ch; text-wrap: balance; margin-bottom: 32px; }
.prose p { color: var(--dim); max-width: 68ch; text-wrap: pretty; }
.prose p + p { margin-top: 22px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.feat-cell { background: var(--bg); padding: 38px; transition: background 0.25s; }
.feat-cell:hover { background: var(--bg-raise); }
.feat-cell h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.feat-cell h3::before { content: "▸ "; color: var(--pink); }
.feat-cell p { color: var(--dim); font-size: 15px; }

/* product shot */
.shot { margin-top: 64px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg-raise); }
.shot img { display: block; width: 100%; height: auto; }
.shot-cap { padding: 14px 20px; border-top: 1px solid var(--line); }

/* references */
.refs { margin-top: 28px; border-top: 1px solid var(--line); }
.refs p.note { color: var(--dim); max-width: 68ch; padding: 24px 0 4px; text-wrap: pretty; }
.refs a.ref {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink);
  transition: color 0.2s, padding-left 0.2s;
}
.refs a.ref:hover { color: var(--pink); padding-left: 12px; }
.refs a.ref .arr { color: var(--faint); }
.refs a.ref:hover .arr { color: var(--pink); }

/* next project */
.next { display: block; margin-top: 110px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-raise); transition: background 0.25s; }
.next:hover { background: #15151d; }
.next .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 44px; padding-bottom: 44px; gap: 24px; }
.next h3 { font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -0.02em; }
.next .arr { font-family: var(--mono); font-size: 28px; color: var(--pink); transition: transform 0.25s; }
.next:hover .arr { transform: translateX(10px); }

/* contact CTA on case pages */
.case-main .contact { padding: 130px 0; }
.case-main .contact h2 { font-size: clamp(36px, 4.4vw, 64px); margin: 0 auto; }

@media (max-width: 900px) {
  .stat-strip, .feat-grid { grid-template-columns: 1fr; }
  .case-hero { padding-top: 140px; }
}