/* ============================================
   SERVICES — "Spec Sheets"
   Alternating full-bleed service dossiers with
   giant serif index numerals + mono spec lists.
   ============================================ */

.svc-dossier { background: var(--paper); padding: var(--space-24) 0; }

.svcblock {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--gray-200);
}
.svcblock:first-child { border-top: 0; }

/* giant watermark numeral */
.svcblock-num {
  position: absolute;
  top: var(--space-8);
  right: 2%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: 0.8;
  color: rgba(47,87,214,0.16);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.svcblock > * { position: relative; z-index: 1; }

.svcblock-media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-lift);
}
.svcblock-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.svcblock:hover .svcblock-media img { transform: scale(1.05); }
.svcblock-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(5,9,26,0.15), transparent 55%);
}
.svcblock-code {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(5,9,26,0.55);
  backdrop-filter: blur(4px);
  padding: 5px 10px; border-radius: 3px;
}

/* even blocks flip media to the right */
.svcblock:nth-child(even) .svcblock-media { order: 2; }

.svcblock-ic {
  width: 46px; height: 46px; color: var(--orange);
  margin-bottom: var(--space-5);
}
.svcblock-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.svcblock h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  line-height: 1.05;
}
.svcblock-desc { color: var(--gray-500); font-size: var(--text-lg); line-height: 1.7; margin-bottom: var(--space-2); }
.svcblock .btn { margin-top: var(--space-4); }

@media (max-width: 860px){
  .svcblock { grid-template-columns: 1fr; gap: var(--space-8); }
  .svcblock:nth-child(even) .svcblock-media { order: 0; }
  .svcblock-num { font-size: 6rem; top: -10px; }
  .svcblock h2 { font-size: var(--text-3xl); }
}

/* ---- Process rail ---- */
.procrail { background: var(--ink); color: #fff; padding: var(--space-32) 0; position: relative; overflow: hidden; }
.procrail::before {
  content:''; position:absolute; top:-10%; right:-8%;
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(47,87,214,0.18), transparent 65%);
}
.procrail-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  position: relative; z-index: 2;
}
.procrail-line {
  position: absolute; top: 27px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(242,106,27,0.5), transparent);
  z-index: 1;
}
.procstep { position: relative; z-index: 2; }
.procstep-dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--orange);
  margin-bottom: var(--space-6);
  transition: all var(--duration-base) var(--ease-out);
}
.procstep:hover .procstep-dot { background: var(--orange); color:#fff; border-color: var(--orange); box-shadow: 0 0 24px rgba(242,106,27,0.5); transform: translateY(-3px); }
.procstep h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color:#fff; margin-bottom: var(--space-2); }
.procstep p { font-size: var(--text-sm); color: rgba(255,255,255,0.55); margin: 0; line-height: 1.6; }
@media (max-width: 860px){
  .procrail-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-10) var(--space-6); }
  .procrail-line { display: none; }
}
@media (max-width: 460px){ .procrail-grid { grid-template-columns: 1fr; } }

/* ---- Equipment strip ---- */
.equip { background: var(--paper); padding: var(--space-32) 0; }
.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.equip-card {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: var(--space-8);
  transition: border-color var(--duration-base), transform var(--duration-base), box-shadow var(--duration-base);
  background: #fff;
}
.equip-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.equip-ic { width: 40px; height: 40px; color: var(--navy); margin-bottom: var(--space-5); }
.equip-ic svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; }
.equip-card:hover .equip-ic { color: var(--orange); }
.equip-card h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--navy); margin-bottom: var(--space-2); }
.equip-card p { font-size: var(--text-sm); color: var(--gray-500); margin: 0; line-height: 1.6; }
.equip-num { font-family: var(--font-mono); font-size: 0.66rem; color: var(--gray-400); letter-spacing: 0.14em; display:block; margin-bottom: var(--space-4); }
@media (max-width: 860px){ .equip-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .equip-grid { grid-template-columns: 1fr; } }

/* ---- Safety band ---- */
.svc-safety { background: var(--navy); color:#fff; padding: var(--space-24) 0; }
.svc-safety-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.svc-safety-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ssbadge { padding: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); }
.ssbadge:nth-child(-n+2) { border-top: 0; }
.ssbadge:nth-child(odd) { border-left: 0; }
.ssbadge .k { font-family: var(--font-mono); font-size: 0.66rem; color: var(--orange); letter-spacing: 0.12em; }
.ssbadge h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color:#fff; margin: var(--space-2) 0 4px; }
.ssbadge p { font-size: var(--text-xs); color: rgba(255,255,255,0.55); margin:0; }
@media (max-width: 860px){ .svc-safety-inner { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ---- CTA ---- */
.svc-cta { background: var(--grad-hero); color:#fff; padding: var(--space-32) 0; position: relative; overflow: hidden; text-align: center; }
.svc-cta::before { content:''; position:absolute; top:-10%; left:50%; width:2px; height:120%; transform:rotate(19deg); background:linear-gradient(to bottom,transparent,var(--orange),transparent); opacity:0.5; }
.svc-cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.svc-cta h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem,4vw,3.4rem); color:#fff; letter-spacing:-0.02em; margin-bottom: var(--space-5); }
.svc-cta h2 em { font-style: italic; color: var(--orange-light); font-weight: 400; }
.svc-cta p { color: rgba(255,255,255,0.65); font-size: var(--text-lg); margin-bottom: var(--space-8); }
.svc-cta-actions { display:flex; gap: var(--space-4); justify-content:center; flex-wrap:wrap; }