/* Grizzly Beam — /services/design-and-build/
   v2 content rebuild, 2026-09-21.
   Shared: .svc-hero*, .svc-plus, .svc-closer*, .svc-sec*, .svc-cards/.svc-card,
   .svc-check, .svc-bullets, .svc-shot → components.css
   Page-only below: the hero, the two project cards, and the services list. */

/* ---------- 1 · Hero ---------- */
.dab-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 2 · The annotated homepage ----------
   The dashed placeholder that used to sit here ran to 72rem because it had to look
   like a slot for a wide screenshot. The drawing that replaced it is a browser
   window with callouts, and at that width the window alone came out bigger than the
   hero: 46rem is where the callout labels sit close enough to the page they point at
   to read as callouts. Centered, because the checklist above it is full width. */
.dab-shot--wide { max-width: 46rem; margin: 4.4rem auto 0; }

/* ---------- 3 · Our work ----------
   Two cards, both the same height, so the two titles sit on one line. The shot keeps
   3:2 and object-fit: cover — the same treatment .wkp__shot gets on /work/, so a
   project reads the same wherever it appears. */
.dab-proj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; margin-top: 4.4rem; }
.dab-proj__card { display: flex; flex-direction: column; }
.dab-proj__media { border-radius: var(--r-10); overflow: hidden; background: var(--stone2); }
.dab-proj__shot { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.dab-proj__title { font-size: 2.1rem; line-height: 1.25; letter-spacing: 0; font-weight: var(--w-h3); margin-top: 2rem; }   /* brand: H3 */
.dab-proj__desc { color: var(--tx-g); margin-top: 1rem; max-width: 34rem; }

/* ---------- 8 · Platforms ---------- */
.dab-plat__note { margin-top: 3.4rem; }

/* ---------- 9 · Mid-page CTA (navy) ---------- */
/* Navy, not ink: the ink block further down is this page's one dark statement, and
   two identical dark bands would read as the same section returning. */
.dab-midcta { padding-block: 8rem; }

/* ---------- 18 · Don't be the last (ink + beam field) ----------
   Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css;
   .svc-sec--beam only makes the section the positioning context and clips the beams.

   A single ink block between two light sections, so the field's hard bottom edge
   lands where the dark ends. */
.dab-last { padding-block: 10rem; }
.dab-last .svc-sec__title { margin-bottom: 3rem; max-width: 42rem; }

/* ---------- 19 · Everything we build ----------
   Three plain columns, no amber bullets: this is an index, not an argument, and
   twelve amber squares next to twelve short lines would shout louder than the
   sections that actually make the case. */
.dab-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 3.2rem; margin-top: 3rem; }
.dab-all__col { list-style: none; display: grid; gap: 1.1rem; align-content: start; }
.dab-all__col li {
  font-family: var(--f-body); font-size: 1.3rem; line-height: 1.45;
  color: var(--tx-g);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(22, 24, 28, 0.12);
}
/* --ink, not amber-deep: amber-deep on --stone2 measured 4.38, under AA. The
   underline is what marks it as a link (WCAG 1.4.1), so the color does not have to. */
.dab-all__link { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 20 · Closer ---------- */
.dab-closer { padding-block: 9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .dab-midcta { padding-block: 6.5rem; }
  .dab-last { padding-block: 7rem; }
  .dab-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  .dab-proj { grid-template-columns: 1fr; gap: 4rem; max-width: 44rem; }
  .dab-proj__desc { max-width: none; }
}
@media (max-width: 767px) {
  .dab-midcta { padding-block: 6rem; }
  .dab-last { padding-block: 6rem; }
  .dab-all { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.4rem; }
  /* One column: the three lists become one run, so the gap between them has to match
     the gap between their own items or the seams read as section breaks. */
  .dab-all__col { gap: 1.1rem; }
  .dab-closer { padding-block: 6rem; }
}