/* ==========================================================================
   Quadzero — inner pages
   Page hero, breadcrumb, numbered service cards and the closing CTA band.
   ========================================================================== */

.page-hero{
  background:linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 100%);
  padding:clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.page-hero h1{ font-size:clamp(1.9rem, 4vw, 3rem); max-width:820px; }
.page-hero .lead{ font-size:1.08rem; max-width:760px; margin:0; }

.crumbs{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; font-size:.82rem; color:var(--muted); margin-bottom:1.25rem; }
.crumbs a{ color:var(--blue); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs li + li::before{ content:"/"; margin-right:.4rem; color:var(--qz-gray-300); }

.section{ padding:clamp(56px, 7vw, 96px) 0; }
.section--tint{ background:var(--tint-2); }
.section-head{ max-width:720px; margin-bottom:clamp(28px, 4vw, 44px); }

.card-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:28px;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--tint-3); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-num{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--tint); color:var(--blue);
  font-family:var(--font-head); font-weight:700; font-size:.9rem;
  margin-bottom:14px;
}
.card h3{ font-size:1.08rem; margin-bottom:.8rem; }

.ticks{ display:grid; gap:.55rem; }
.ticks li{
  position:relative; padding-left:1.5rem;
  font-size:.92rem; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.8rem; height:.45rem;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

.approach{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 64px); align-items:start;
}
.engage{ display:grid; gap:12px; }
.engage li{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 18px; font-family:var(--font-head); font-weight:600; color:var(--ink);
  border-left:3px solid var(--brand);
}

.cta-band{
  background:var(--navy); color:var(--on-dark);
  border-radius:var(--r-lg);
  padding:clamp(32px, 5vw, 56px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.cta-band h2{ color:var(--white); margin:0 0 .4rem; }
.cta-band p{ margin:0; color:var(--on-dark-muted); }

@media (max-width:860px){
  .approach{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .card-grid{ grid-template-columns:1fr; }
  .card{ padding:22px; }
}

/* --------------------------------------------------------------------------
   Case studies
   -------------------------------------------------------------------------- */
.page-hero .lead + .lead{ margin-top:1rem; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.5rem; }
.tag{
  font-family:var(--font-head); font-size:.78rem; font-weight:600;
  color:var(--blue); background:var(--white);
  border:1px solid var(--tint-3); border-radius:999px;
  padding:.3rem .8rem;
}

.prose{ max-width:760px; }

.issue-grid{
  display:grid; gap:16px; margin-top:28px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.issue{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  border-top:3px solid var(--brand);
  padding:22px 24px;
}
.issue h3{ font-size:1rem; margin-bottom:.4rem; }
.issue p{ margin:0; font-size:.92rem; }

.card-lead{ font-size:.92rem; margin-bottom:1rem; }

.stack{
  display:grid; gap:0; margin:0;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--white);
}
.stack > div{
  display:grid; grid-template-columns:240px 1fr; gap:24px;
  padding:16px 24px; border-top:1px solid var(--line);
}
.stack > div:first-child{ border-top:0; }
.stack dt{ font-family:var(--font-head); font-weight:700; color:var(--ink); }
.stack dd{ margin:0; }

.case-card{ display:flex; flex-direction:column; color:inherit; }
.case-card p{ font-size:.92rem; }
.case-card .link-arrow{ margin-top:auto; }

@media (max-width:640px){
  .stack > div{ grid-template-columns:1fr; gap:4px; }
}

.steps{
  list-style:none; margin:0; padding:0; counter-reset:step;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.steps li{
  counter-increment:step;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px;
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  display:block; margin-bottom:10px;
  font-family:var(--font-head); font-weight:900; font-size:1.4rem; color:var(--brand);
}
.steps h3{ font-size:1rem; margin-bottom:.35rem; }
.steps p{ margin:0; font-size:.9rem; }