/* ============================================================
   04 · THE CASE  (why a website matters + why choose Nexora)

   Six reasons a business needs a real site (.case-grid).

   Deliberately NOT styled like .wcol in sections/why.css. That
   section sits immediately below this one and answers a different
   question (how we work, rather than why any of this matters), so
   the two must not read as the same component twice: .wcol is a
   bare column with a rule across the top, these are filled cards.
   ============================================================ */
.case{padding:clamp(72px,9vw,120px) 0}

/* ---------- head ---------- */
.case-head{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,6vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,76px);
}
.case-head h2{max-width:16ch}
/* The hero's .accent is var(--b300) — a pale blue tuned for the dark 3D
   background, which only reaches about 1.9:1 on white. This section is on
   white, so the emphasis word needs its own colour. --b500 on #fff measures
   5.9:1, which clears AA for the large type it is used on. */
.case-head .em{color:var(--b500)}
.case-aside{color:var(--ink500)}

/* ---------- A · six reasons ---------- */
.case-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
}
.ccard{
  background:var(--mist);border:1px solid var(--line);border-radius:9px;
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.ccard:hover{border-color:#C7D0EC;background:#fff;transform:translateY(-3px)}
.cn{
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--b500);display:block;
}
.ccard h3{
  font-family:Archivo;font-weight:600;font-size:clamp(16px,1.5vw,19px);
  letter-spacing:-.01em;color:var(--ink900);margin:13px 0 10px;line-height:1.25;
}
.ccard p{font-size:14px;color:var(--ink500);line-height:1.58;max-width:none}

/* ---------- B · the turn toward Nexora ---------- */
/* Part B, a dark panel headed "And why businesses choose us to build it",
   was removed on 2026-08-26: it was a SECOND "why businesses choose Nexora"
   on a page whose laptop (#zoom) already makes that case in full, three
   screens earlier. Its markup is kept in _disabled/case-turn-panel.html. */

@media(max-width:1100px){
  .case-head{grid-template-columns:1fr;gap:26px;align-items:start}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .case-grid{grid-template-columns:1fr}
}