.hero-home {
  padding: var(--space-xl) 0 calc(var(--space-xl) + 1rem);
}

.hero-visual {
  display: flex;
  justify-content: center;
}

/* Signature visual: a diff block. Strategy resolving into shipped code — the
   firm's own working material, not abstract decoration. See design.md §3a. */
.diff-card {
  width: 100%;
  min-width: 0;
  background: var(--colour-primary);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.8125rem;
}

.diff-card__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.diff-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.diff-card__file {
  margin-left: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

.diff-card__body {
  padding: var(--space-md);
  margin: 0;
}

.diff-card__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
}

.diff-card__box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: transparent;
  background: transparent;
  font-size: 9px;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.diff-card__item--done .diff-card__box {
  background: var(--colour-accent-on-dark);
  border-color: var(--colour-accent-on-dark);
  color: var(--colour-primary);
}

.diff-card__commit {
  padding: 0.6rem var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.diff-card__hash {
  color: var(--colour-accent-on-dark);
}

.diff-card__cursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--colour-accent-on-dark);
}

@media (prefers-reduced-motion: no-preference) {
  .diff-card__cursor {
    animation: diff-cursor-blink 1s steps(1) infinite;
  }
}

@keyframes diff-cursor-blink {
  50% {
    opacity: 0;
  }
}

/* Load animation, added by the diff-reveal Stimulus controller. The three
   execution items start unchecked and tick off one by one; the strategy
   items above them are already done and never move. Skipped entirely under
   prefers-reduced-motion — the fully-checked default above is the no-JS /
   reduced-motion fallback. */
.diff-card--animate .diff-card__item--animated-1 .diff-card__box,
.diff-card--animate .diff-card__item--animated-2 .diff-card__box,
.diff-card--animate .diff-card__item--animated-3 .diff-card__box {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: transparent;
}

.diff-card--animate.is-revealed .diff-card__item--animated-1 .diff-card__box,
.diff-card--animate.is-revealed .diff-card__item--animated-2 .diff-card__box,
.diff-card--animate.is-revealed .diff-card__item--animated-3 .diff-card__box {
  background: var(--colour-accent-on-dark);
  border-color: var(--colour-accent-on-dark);
  color: var(--colour-primary);
}

.diff-card--animate.is-revealed .diff-card__item--animated-2 .diff-card__box { transition-delay: 200ms; }
.diff-card--animate.is-revealed .diff-card__item--animated-3 .diff-card__box { transition-delay: 400ms; }

.diff-card--animate .diff-line:nth-child(2) { transition-delay: 60ms; }
.diff-card--animate .diff-line:nth-child(3) { transition-delay: 140ms; }
.diff-card--animate .diff-line:nth-child(4) { transition-delay: 260ms; }
.diff-card--animate .diff-line:nth-child(5) { transition-delay: 340ms; }
.diff-card--animate .diff-line:nth-child(6) { transition-delay: 420ms; }

/* Restrained echo of the signature visual, specific to Engineering — plain
   redacted-line texture, ragged right edges like unjustified code rather
   than a chart. Widths are deliberately non-monotonic (no run of 3+ either
   direction) and unrotated, so there's no trend line to misread. Colour is
   reserved for the real diff-card; this echo is shaded by opacity only. */
.diff-mark {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diff-mark__line {
  display: block;
  height: 10px;
  border-radius: 2px;
  background: var(--colour-border);
}

.diff-mark__line:nth-child(1) { width: 78%; }
.diff-mark__line:nth-child(2) { width: 92%; }
.diff-mark__line:nth-child(3) { width: 65%; }
.diff-mark__line:nth-child(4) { width: 85%; }

.diff-mark__line:nth-child(2) { opacity: 0.7; }
.diff-mark__line:nth-child(3) { opacity: 0.5; }
.diff-mark__line:nth-child(4) { opacity: 0.3; }

/* Restrained echo, specific to Consulting — a chart is the right read here
   (portfolio value, growth), unlike the Engineering diff-mark above. */
.trend-mark {
  width: 200px;
  height: auto;
}

.trend-mark__axis {
  stroke: var(--colour-border);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-mark__line {
  stroke: var(--colour-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-mark__point {
  fill: var(--colour-accent);
}

.card-hero-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-hero-placeholder {
  height: 120px;
  background: linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-secondary) 100%);
  opacity: 0.08;
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  overflow: hidden;
}

.geo-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--colour-accent);
  opacity: 0.6;
}

.post-hero-image {
  margin-top: var(--space-lg);
}

.post-hero-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}

.form-preview {
  margin-bottom: var(--space-sm);
}

.form-preview img {
  border-radius: var(--radius);
  border: 1px solid var(--colour-border);
}

@media (max-width: 768px) {
  .diff-mark,
  .trend-mark {
    display: none;
  }
}