/* ============================================================
   3D Printing Services page — styles specific to /services/3d-printing/.
   Builds on the shared classes in assets/css/site.css (buttons, badges,
   section header, hero image frame, hazard bar).
   ============================================================ */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.trs-3dp-hero { position: relative; background: var(--graphite-900); color: #fff; overflow: hidden; }
.trs-3dp-hero__dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 92% -8%, rgba(186,31,57,0.36), transparent 46%),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}
.trs-3dp-hero__grid {
  position: relative; padding: clamp(48px, 6vw, 88px) var(--gutter) 96px; display: grid;
  grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.trs-3dp-hero__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase; margin: 0; color: #fff;
}
.trs-3dp-hero__lead { font-family: var(--font-sans); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--graphite-200); max-width: 540px; margin: 24px 0 0; }
.trs-3dp-hero__body { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--graphite-300); max-width: 540px; margin: 16px 0 32px; }
.trs-3dp-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.trs-3dp-hero__video {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--graphite-300); letter-spacing: 0.02em; text-decoration: none;
}
.trs-3dp-hero__video:hover { color: #fff; }

[data-3dp-slot] img[data-3dp-image] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
[data-3dp-slot] img[data-3dp-image].is-hidden { display: none; }

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

/* ---------------------------------------------------------------
   Quoting steps
   --------------------------------------------------------------- */
.trs-3dp-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 48px;
}
.trs-3dp-step { background: var(--color-surface); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.trs-3dp-step svg { color: var(--graphite-700); }
.trs-3dp-step__num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--brand); }
.trs-3dp-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.trs-3dp-step p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: 0; }

@media (max-width: 760px) {
  .trs-3dp-steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Stats (light-surface variant — homepage's .trs-stat-card is dark-only)
   --------------------------------------------------------------- */
.trs-3dp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.trs-3dp-stat {
  display: flex; flex-direction: column; gap: 4px; padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-border-bold); background: var(--color-surface);
}
.trs-3dp-stat--accent { border-left-color: var(--brand); }
.trs-3dp-stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--text-strong); }
.trs-3dp-stat__label { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.trs-3dp-stat__sub { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-subtle); margin-top: 3px; }

@media (max-width: 760px) {
  .trs-3dp-stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Materials
   --------------------------------------------------------------- */
.trs-3dp-materials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }

/* ---------------------------------------------------------------
   Portfolio
   --------------------------------------------------------------- */
.trs-3dp-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; margin-top: 44px; }
.trs-3dp-portfolio-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.trs-3dp-portfolio-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.trs-3dp-portfolio-card__image { position: relative; aspect-ratio: 4 / 3; background: var(--graphite-100); }
.trs-3dp-portfolio-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.trs-3dp-portfolio-card__body { padding: 12px 14px 14px; }

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.trs-3dp-cta { background: var(--graphite-900); color: #fff; }
.trs-3dp-cta__inner { max-width: 900px; margin: 0 auto; padding: 80px var(--gutter); text-align: center; }
.trs-3dp-cta__inner h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 16px; color: #fff; }
.trs-3dp-cta__inner p { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--graphite-200); max-width: 560px; margin: 0 auto 32px; }
.trs-3dp-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }