/* ============================================================
   Engineering page — styles specific to /services/engineering/.
   Builds on shared classes in assets/css/site.css (buttons, badges,
   te-eyebrow, trs-stats-band).
   ============================================================ */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.trs-eng-hero { position: relative; background: var(--graphite-900); color: #fff; overflow: hidden; }
.trs-eng-hero__dotgrid {
  position: absolute; inset: 0; opacity: 0.6;
  background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 22px 22px;
}
.trs-eng-hero__glow {
  position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(186,31,57,0.35), transparent 70%);
  pointer-events: none;
}
.trs-eng-hero__grid {
  position: relative; padding: 88px var(--gutter) 72px; display: grid;
  grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}

.trs-eng-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; font-family: var(--font-sans); font-size: 13px; }
.trs-eng-breadcrumb a { color: var(--graphite-400); text-decoration: none; }
.trs-eng-breadcrumb a:hover { color: #fff; }
.trs-eng-breadcrumb span:not([aria-current]) { color: var(--graphite-500); }
.trs-eng-breadcrumb [aria-current] { color: #fff; font-weight: 700; }

.trs-eng-hero__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.03;
  letter-spacing: -0.02em; text-transform: uppercase; color: #fff; margin: 18px 0 24px;
}
.trs-eng-hero__body { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--graphite-300); max-width: 48ch; margin: 0 0 36px; }
.trs-eng-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.trs-eng-hero__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-xl); border: 1px solid var(--graphite-700); aspect-ratio: 4 / 3;
}
.trs-eng-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .trs-eng-hero__grid { grid-template-columns: 1fr; }
}