/* ============================================================
 * cad-design-services · per-page LAYOUT PRIMITIVES only
 *
 * Brand decoration lives in brand.preview.css (locked memory rule).
 * This file is restricted to grid track counts, gaps, sticky offsets,
 * and mobile-collapse breakpoints specific to this page. NO color,
 * background, or border-color rules.
 * ============================================================ */

/* R2 item 7: page-specific override so the pd-journey scroll-pin can use
   `position: sticky` reliably. Brand.css sets `body { overflow-x: clip }`
   which kills sticky on ancestors; restore it at body level for this page
   only and keep the clip at the html level so we don't reintroduce h-scroll
   bugs. */
body { overflow-x: visible !important; }
html { overflow-x: clip; }

/* Trust grid · 3 stat cards */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Intake row · 5 tiles */
.intake-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}

/* Process ladder · reuses .steps but with 4 tracks (vs small-batch 4) */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Turnaround tier ladder · 3 cards */
.turnaround-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ICP card · text + avatar */
.icp-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Capabilities band · 2x2 grid */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

/* Case row · 3 cards */
.case-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Canny band · we do / we don't · 2 cols */
.canny-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Objection grid · 6 cards in 2 cols */
.obj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Risk band · 4 promises */
.risk-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Footer · 4-col link map */
.footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Mobile collapse · 860px (matches wireframe + small-batch) */
@media (max-width: 860px) {
  .trust-grid,
  .intake-tiles,
  .steps,
  .turnaround-tiers,
  .icp-card,
  .cap-grid,
  .case-row,
  .canny-band,
  .obj-grid,
  .risk-band,
  .footer {
    grid-template-columns: 1fr;
  }
}

/* Intake tiles relax to 2 cols at 720px (between full and stack) */
@media (max-width: 720px) {
  .intake-tiles { grid-template-columns: 1fr 1fr; }
}

/* iter-1: 320px narrow viewport hardening · stop grid/flex children from
   forcing horizontal overflow. */
@media (max-width: 480px) {
  .cap-card, .case, .obj, .can, .cant, .trust-stat-block,
  .intake-tile, .turnaround-tier, .icp-card > div, .step {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .case .visual, .icp-card .avatar, .humans-close .avatar { max-width: 100%; }
  .case .visual img, .icp-card .avatar img, .humans-close .avatar img { width: 100%; height: auto; max-width: 100%; }
}