/**
 * Services, Process and Overview.
 *
 * Three blocks that answer the same question at three depths: the headline
 * three, how the work runs, and the full list. They share a file because they
 * share a vocabulary — the same 17px display title, the same hexagon, the same
 * muted 15px body — and reading them together is what keeps that consistent.
 *
 * Layout, the heading blocks and the grids come from `layout.css`; only what
 * is specific to these three sections lives here.
 */

/* ============================================================ service card */

/**
 * The whole tile is the link. It carries the resting shadow and the lift, and
 * every hover state below is a descendant of `:hover` on this element, so the
 * card behaves as one object under the pointer.
 */
.dk-card {
  display: block;
  overflow: hidden;
  border-radius: var(--dk-radius-xl);
  background: var(--dk-beige);
  color: var(--dk-ink);
  box-shadow: var(--dk-shadow-card);
  /* Promoted for the translate: the card lifts on every hover. */
  will-change: transform;
}

.dk-card:hover {
  background: var(--dk-beige-hover);
  /* Restated so the global `a:hover` blue never reaches the tile. */
  color: var(--dk-ink);
  transform: translateY(-6px);
  box-shadow: var(--dk-shadow-card-hover);
}

.dk-card__photo {
  height: 250px;
}

/**
 * A blue veil over the lower half of the photograph, fading in on hover. It
 * is a pseudo-element on the photo rather than a node so it can never be read
 * out or tabbed to — it is atmosphere, not content.
 */
.dk-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--dk-veil-card);
  transition: opacity var(--dk-speed-slow) ease;
}

.dk-card:hover .dk-card__photo::after {
  opacity: 1;
}

/** The card's caption sits tighter into the corner than the full-bleed ones. */
.dk-card__ph {
  left: 16px;
  bottom: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.dk-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 26px;
}

.dk-card__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dk-card__title {
  margin: 0;
  font: 600 17px/1.35 var(--dk-font-display);
  letter-spacing: var(--dk-track-label);
  text-transform: uppercase;
  color: var(--dk-ink);
}

.dk-card__desc {
  margin: 0;
  font: 400 15px/1.6 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/** The "go" circle: an affordance for the card link, never a control itself. */
.dk-card__go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--dk-border-stronger);
  border-radius: var(--dk-radius-pill);
  color: var(--dk-blue);
  font-size: 14px;
  transition:
    background-color var(--dk-speed) ease,
    border-color var(--dk-speed) ease,
    color var(--dk-speed) ease,
    transform var(--dk-speed) ease;
}

.dk-card:hover .dk-card__go {
  background: var(--dk-blue);
  border-color: var(--dk-blue);
  color: var(--dk-on-dark);
  transform: translateX(3px);
}

/* ============================================================ process step */

.dk-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

/** An outlined plinth — white field, blue edge — with the number on top. */
.dk-step__badge {
  --dk-hexicon-glyph: 26px;
}

.dk-step__badge .dk-hexicon__glyph {
  font-family: var(--dk-font-display);
  font-weight: 700;
  letter-spacing: var(--dk-track-snug);
}

.dk-step__title {
  margin: 22px 0 0;
  font: 600 17px/1.35 var(--dk-font-display);
  letter-spacing: var(--dk-track-label);
  text-transform: uppercase;
  color: var(--dk-ink);
}

/** The section rule shrunk to step scale, and neutral rather than blue. */
.dk-step__rule {
  width: 44px;
  height: 2px;
  margin: 16px 0 18px;
  background: var(--dk-border-stronger);
}

.dk-step__text {
  margin: 0;
  max-width: 320px;
  font: 400 15px/1.75 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/* ============================================================ full overview */

/**
 * The dividers are the grid itself: a 1px gap over a `--dk-border` ground,
 * with every cell painted white. Rounding the container and clipping it is
 * what turns the arrangement into a single panel.
 */
.dk-ovi-grid {
  --dk-grid-floor: 330px;
  --dk-grid-gap: 1px;
  margin-top: 52px;
  overflow: hidden;
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-xl);
  background: var(--dk-border);
  box-shadow: var(--dk-shadow-panel);
}

.dk-ovi {
  /**
   * The plinth tint is a property rather than a fill so the row's `:hover`
   * can reach it — `hexagon()` paints `fill` inline, which no rule could beat
   * without `!important`.
   */
  --dk-ovi-plinth: var(--dk-blue-wash);

  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: 26px 28px;
  background: var(--dk-white);
  transition: background-color var(--dk-speed) ease;
}

.dk-ovi:hover {
  --dk-ovi-plinth: var(--dk-blue-wash-hover);

  background: var(--dk-warm-50);
}

.dk-ovi__mark {
  --dk-hexicon-glyph: 19px;

  margin-top: 2px;
}

.dk-ovi__mark polygon {
  transition: fill var(--dk-speed) ease;
}

.dk-ovi__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dk-ovi__title {
  margin: 0;
  font: 600 16px/1.35 var(--dk-font-display);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--dk-ink);
  text-wrap: balance;
}

.dk-ovi__body {
  margin: 0;
  font: 400 15px/1.7 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}