/**
 * Card Grid Component Styles
 * Responsive grid layout with card-based items
 */

.doghouse-card-grid {
  background-color: var(--site-color-bg-primary);
}

.doghouse-card-grid--dark {
  background-color: var(--site-color-bg-primary);
}

.doghouse-card-grid--light {
  background-color: var(--site-color-bg-surface);
}

.doghouse-card-grid__container {
  padding: var(--site-space-2xl) var(--site-container-padding);
  max-width: var(--site-container-max-width);
  margin: 0 auto;
}

/* Header layout: heading left, description right */
.doghouse-card-grid__header {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-base);
  margin-bottom: var(--site-space-2xl);
}

@media (min-width: 768px) {
  .doghouse-card-grid__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--site-space-2xl);
  }
}

.doghouse-card-grid__header-left {
  flex: 1;
}

.doghouse-card-grid__header-right {
  flex: 0 1 40%;
}

/* Eyebrow */
.doghouse-card-grid__eyebrow {
  display: block;
  margin-bottom: var(--site-space-sm);
}

.doghouse-card-grid__subheading {
  color: var(--site-color-text-lead);
  font-size: var(--site-lead-font-size);
  margin: 0;
  text-align: right;
}

.doghouse-card-grid__items > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.doghouse-card-grid__items > div > div {
  height: 100%;
}

/* 2 Column layout: 1 → 2 (≥576px) */
@media (min-width: 576px) {
  .doghouse-card-grid--2_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 Column layout: 1 → 2 (≥576px) → 3 (≥992px) */
@media (min-width: 576px) {
  .doghouse-card-grid--3_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .doghouse-card-grid--3_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 Column layout: 1 → 2 (≥576px) → 3 (≥992px) → 4 (≥1200px) */
@media (min-width: 576px) {
  .doghouse-card-grid--4_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .doghouse-card-grid--4_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .doghouse-card-grid--4_col .doghouse-card-grid__items > div {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Staggered layout: alternating 7/5 → 4/8 columns across a 12-col grid
   (matches the feature_grid staggered variant). */
@media (min-width: 576px) {
  .doghouse-card-grid--staggered .doghouse-card-grid__items > div {
    grid-template-columns: repeat(12, 1fr);
  }

  .doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(4n+1) { grid-column: span 7; }
  .doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(4n+2) { grid-column: span 5; }
  .doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(4n+3) { grid-column: span 4; }
  .doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(4n)   { grid-column: span 8; }
}

/* Staggered slide-in animation (fires on .dh-visible, toggled by the scroll-reveal JS).
   Section is overflow-x: clipped so the pre-reveal translateX(60px) state
   never pushes past the viewport edge on small screens. */
.doghouse-card-grid--staggered {
  overflow-x: clip;
}

.doghouse-card-grid--staggered .doghouse-card-grid__items > div > * {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.doghouse-card-grid--staggered.dh-visible .doghouse-card-grid__items > div > * {
  opacity: 1;
  transform: translateX(0);
}

.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(1) { transition-delay: 0s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(2) { transition-delay: 0.15s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(3) { transition-delay: 0.3s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(4) { transition-delay: 0.45s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(5) { transition-delay: 0.6s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(6) { transition-delay: 0.75s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(7) { transition-delay: 0.9s; }
.doghouse-card-grid--staggered .doghouse-card-grid__items > div > :nth-child(8) { transition-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
  .doghouse-card-grid--staggered .doghouse-card-grid__items > div > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Regular column layouts (2/3/4) — short fade + translateY entrance,
   each card delayed slightly after the previous. Fires on .dh-visible,
   toggled by the scroll-reveal JS attached via .dh-reveal. */
.doghouse-card-grid--2_col .doghouse-card-grid__items > div > *,
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > *,
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > * {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.doghouse-card-grid--2_col.dh-visible .doghouse-card-grid__items > div > *,
.doghouse-card-grid--3_col.dh-visible .doghouse-card-grid__items > div > *,
.doghouse-card-grid--4_col.dh-visible .doghouse-card-grid__items > div > * {
  opacity: 1;
  transform: translateX(0);
}

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(1),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(1),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(1) { transition-delay: 0s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(2),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(2),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(2) { transition-delay: 0.06s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(3),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(3),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(3) { transition-delay: 0.12s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(4),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(4),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(4) { transition-delay: 0.18s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(5),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(5),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(5) { transition-delay: 0.24s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(6),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(6),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(6) { transition-delay: 0.3s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(7),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(7),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(7) { transition-delay: 0.36s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(8),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(8),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(8) { transition-delay: 0.42s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(9),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(9),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(9) { transition-delay: 0.48s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(10),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(10),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(10) { transition-delay: 0.54s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(11),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(11),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(11) { transition-delay: 0.6s; }

.doghouse-card-grid--2_col .doghouse-card-grid__items > div > :nth-child(12),
.doghouse-card-grid--3_col .doghouse-card-grid__items > div > :nth-child(12),
.doghouse-card-grid--4_col .doghouse-card-grid__items > div > :nth-child(12) { transition-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  .doghouse-card-grid--2_col .doghouse-card-grid__items > div > *,
  .doghouse-card-grid--3_col .doghouse-card-grid__items > div > *,
  .doghouse-card-grid--4_col .doghouse-card-grid__items > div > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.doghouse-card-grid__item {
  display: flex;
  flex-direction: column;
  background-color: var(--site-color-bg-surface);
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  transition: all var(--site-transition-base);
}

.doghouse-card-grid__item:hover {
  border-color: var(--site-color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}

.doghouse-card-grid__item-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--site-color-bg-primary);
  overflow: hidden;
}

.doghouse-card-grid__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--site-transition-base);
}

.doghouse-card-grid__item:hover .doghouse-card-grid__item-image img {
  transform: scale(1.05);
}

.doghouse-card-grid__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-md);
  padding: var(--site-space-lg);
  flex-grow: 1;
}

.doghouse-card-grid__item-heading {
  margin: 0;
  font-size: var(--site-h4-font-size);
  font-weight: var(--site-h4-font-weight);
  line-height: var(--site-h4-line-height);
  color: var(--site-color-text-heading);
}

.doghouse-card-grid__item-heading a {
  color: inherit;
  text-decoration: none;
  transition: color var(--site-transition-fast);
}

.doghouse-card-grid__item-heading a:hover {
  color: var(--site-color-primary);
}

.doghouse-card-grid__item-heading a:focus-visible {
  outline: 3px solid var(--site-color-primary);
  outline-offset: 2px;
}

.doghouse-card-grid__item-body {
  margin: 0;
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
  flex-grow: 1;
}

.doghouse-card-grid__item-meta {
  display: flex;
  gap: var(--site-space-md);
  font-size: var(--site-label-font-size);
  color: var(--site-color-text-label);
  flex-wrap: wrap;
}

.doghouse-card-grid__item-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: var(--site-color-primary);
  color: var(--site-color-text-white);
  border-radius: var(--site-radius-btn);
  font-size: 0.75rem;
  font-weight: var(--site-fw-semibold);
  text-decoration: none;
  transition: background-color var(--site-transition-fast);
}

.doghouse-card-grid__item-tag:hover {
  background-color: var(--site-color-primary-hover);
}

.doghouse-card-grid__item-link {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-xs);
  color: var(--site-color-primary);
  text-decoration: none;
  font-weight: var(--site-fw-semibold);
  transition: all var(--site-transition-fast);
  width: fit-content;
}

.doghouse-card-grid__item-link:hover {
  gap: var(--site-space-sm);
  color: var(--site-color-primary-hover);
}

.doghouse-card-grid__item-link:focus-visible {
  outline: 3px solid var(--site-color-primary);
  outline-offset: 2px;
}

.doghouse-card-grid__item-link::after {
  content: '→';
}

/* -------------------------------------------------------------------------- */
/*  Capability display variant — tinted tile, numbered, heading/body, CTA     */
/* -------------------------------------------------------------------------- */

/* Counter scoped to the current capability grid so each grid starts at 01.
   Also: use a 1px gap coloured by the grid's background so thin dividers
   appear BETWEEN cards only (never around the outside). */
.doghouse-card-grid--display-capability .doghouse-card-grid__items > div {
  counter-reset: capability-card;
  gap: 1px;
  background-color: var(--site-color-border);
}

.doghouse-cap-card {
  counter-increment: capability-card;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--site-space-sm);
  padding: 1.5rem;
  background-color: var(--site-color-bg-primary);
  border: 1px solid transparent;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Hover affordance — only when the card has a link. Subtle outline around
   the card plus an accent-coloured bottom bar that wipes in from the left. */
.doghouse-cap-card--has-link:hover {
  border-color: var(--site-color-border);
  background-color: var(--site-color-bg-surface);
}

.doghouse-cap-card--has-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--dh-accent, var(--site-color-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.doghouse-cap-card--has-link:hover::after {
  transform: scaleX(1);
}

/* Accent-tinted square tile with the icon centred inside. */
.doghouse-cap-card__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--dh-accent, var(--site-color-primary)) 14%, var(--site-color-bg-surface-mid));
  color: var(--dh-accent, var(--site-color-primary));
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: var(--site-space-xs);
}

/* 01, 02, 03… — small, mono, muted. */
.doghouse-cap-card__index {
  display: block;
  font-family: var(--site-font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--site-color-text-label);
}

.doghouse-cap-card__index::before {
  content: counter(capability-card, decimal-leading-zero);
}

.doghouse-cap-card__heading {
  margin: 0;
  font-size: var(--site-h4-font-size);
  font-weight: var(--site-fw-bold);
  line-height: var(--site-h4-line-height);
  color: var(--site-color-text-heading);
}

.doghouse-cap-card__body {
  margin: 0;
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
}

.doghouse-cap-card__body p:first-child { margin-top: 0; }
.doghouse-cap-card__body p:last-child { margin-bottom: 0; }

/* "EXPLORE →" CTA — accent-coloured, uppercase, letter-spaced. */
.doghouse-cap-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--site-space-xs);
  color: var(--dh-accent, var(--site-color-primary));
  font-size: 0.75rem;
  font-weight: var(--site-fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap var(--site-transition-fast, 0.2s ease);
}

.doghouse-cap-card__link:hover {
  gap: 0.6rem;
}

.doghouse-cap-card__link:focus-visible {
  outline: 2px solid var(--dh-accent, var(--site-color-primary));
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------- */
/*  Approach display variant — numbered cards (01, 02, 03…)                   */
/* -------------------------------------------------------------------------- */

/* Scope the counter to the current approach grid so each grid starts at 01. */
.doghouse-card-grid--display-approach .doghouse-card-grid__items > div {
  counter-reset: approach-card;
}

.doghouse-approach-card {
  counter-increment: approach-card;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--dh-accent, var(--site-color-border));
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  isolation: isolate;
}

/* Large leading number. */
.doghouse-approach-card::before {
  content: counter(approach-card, decimal-leading-zero);
  display: block;
  margin: 0 0 var(--site-space-base) 0;
  font-size: 3rem;
  font-weight: var(--site-fw-extrabold);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 35%, #000 65%);
}

/* Subtle glow in the top-right corner. */
.doghouse-approach-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 18%, transparent) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: -1;
}

.doghouse-approach-card__heading {
  margin: 0 0 var(--site-space-sm) 0;
  font-size: var(--site-h5-font-size);
  font-weight: var(--site-h5-font-weight);
  line-height: var(--site-h5-line-height);
  color: var(--site-color-text-heading);
}

.doghouse-approach-card__body {
  margin: 0;
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
}

.doghouse-approach-card__body p:first-child {
  margin-top: 0;
}

.doghouse-approach-card__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .doghouse-approach-card {
    padding: var(--site-space-md);
  }
}

/* -------------------------------------------------------------------------- */
/*  Service display variant — iconed cards with position number + tag pills   */
/* -------------------------------------------------------------------------- */

.doghouse-card {
  height: 100%;
}

.doghouse-card-grid--display-service .doghouse-card-grid__items > div {
  counter-reset: service-card;
}

.doghouse-service-card {
  counter-increment: service-card;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-base);
  padding: var(--site-space-lg);
  border: 1px solid var(--dh-accent, var(--site-color-border));
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  isolation: isolate;
}

.doghouse-service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 18%, transparent) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: -1;
}

/* Top row: icon on the left, number rendered on the right via ::after. */
.doghouse-service-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
}

.doghouse-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dh-accent, var(--site-color-red));
}

.doghouse-service-card__icon i {
  display: inline-block;
  line-height: 1;
}

/* Position number (01, 02, 03…) pinned to the top-right of the header row. */
.doghouse-service-card__header::after {
  content: counter(service-card, decimal-leading-zero);
  font-family: var(--site-font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  font-weight: var(--site-fw-semibold);
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 45%, var(--site-color-text-label) 55%);
}

.doghouse-service-card__heading {
  margin: 0;
  font-size: var(--site-h5-font-size);
  font-weight: var(--site-h5-font-weight);
  line-height: var(--site-h5-line-height);
  color: var(--site-color-text-heading);
}

.doghouse-service-card__body {
  margin: 0;
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
  flex-grow: 1;
}

.doghouse-service-card__body p:first-child { margin-top: 0; }
.doghouse-service-card__body p:last-child { margin-bottom: 0; }

/* Tag pills — red outline, red mono text, rounded rect. */
.doghouse-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-xs);
  list-style: none;
  margin: var(--site-space-xs) 0 0 0;
  padding: 0;
}

.doghouse-service-card__tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-family: var(--site-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--dh-accent, var(--site-color-red));
  background: color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dh-accent, var(--site-color-red)) 35%, transparent);
  border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .doghouse-service-card {
    padding: var(--site-space-md);
  }
}

/* -------------------------------------------------------------------------- */
/*  Technology display variant — tinted tile + heading + pill + body          */
/* -------------------------------------------------------------------------- */

.doghouse-technology-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--site-space-md);
  align-items: start;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius-lg);
  overflow: hidden;
}

.doghouse-technology-card__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--dh-accent, var(--site-color-primary)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dh-accent, var(--site-color-primary)) 35%, transparent);
  color: var(--dh-accent, var(--site-color-primary));
  font-weight: var(--site-fw-bold);
  font-size: 1rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.doghouse-technology-card__tile-text {
  line-height: 1;
}

.doghouse-technology-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-xs);
  min-width: 0;
}

.doghouse-technology-card__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--site-space-sm);
}

.doghouse-technology-card__heading {
  margin: 0;
  font-size: var(--site-h5-font-size);
  font-weight: var(--site-h5-font-weight);
  line-height: var(--site-h5-line-height);
  color: var(--site-color-text-heading);
}

.doghouse-technology-card__pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-family: var(--site-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: var(--site-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dh-accent, var(--site-color-primary));
  background-color: color-mix(in srgb, var(--dh-accent, var(--site-color-primary)) 14%, transparent);
  border-radius: 3px;
  white-space: nowrap;
}

.doghouse-technology-card__body {
  margin: 0;
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
}

.doghouse-technology-card__body p:first-child { margin-top: 0; }
.doghouse-technology-card__body p:last-child { margin-bottom: 0; }

/* Responsive adjustments */
@media (max-width: 576px) {
  .doghouse-card-grid__item-content {
    padding: var(--site-space-md);
    gap: var(--site-space-sm);
  }

  .doghouse-card-grid__item-heading {
    font-size: var(--site-h5-font-size);
  }
}