/* Hairline hero: one line drawing replaces the four stage photos. The stages
   keep their text and translations; they just stop painting over the drawing. */
.hero-sticky .h-stage { background: none }
.hero-sticky .h-stage::after { display: none }
.hero-sticky .h-stage,
.hero-sticky .h-stage.active { pointer-events: none }
.hero-sticky .h-content { pointer-events: auto; max-width: min(760px, 46vw) }

.h-figure {
  position: absolute;
  z-index: 2;
  top: 12vh;
  bottom: 14vh;
  left: 44%;
  right: clamp(150px, 14vw, 240px);
  display: flex;
  align-items: center;
  justify-content: center
}

/* every drawing takes Laguna's tokens; the cyan is the one bright stroke */
.hl-fig {
  position: relative;
  width: 100%;
  outline: none;
  --hairline-plate: var(--bg);
  --hairline-hi: var(--accent);
  --hairline-edge: var(--muted);
  --hairline-mid: var(--accent-dim);
  --hairline-lo: var(--border);
  --hairline-stroke: 1.2
}

.h-figure .hl-fig { width: min(100%, 92.5vh) }

.hl-read {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none
}

.h-figure .hl-read { top: 6%; right: 4% }

@media (max-width: 1100px) {
  .h-figure { left: 38%; right: 32px }
}

@media (max-width: 768px) {
  .hero-sticky .h-content { max-width: none }
  .h-figure { top: 11vh; bottom: auto; left: 16px; right: 16px; height: 40vh }
  .h-figure .hl-fig { width: min(100%, 50vh) }
}

/* How It Works: a small drawing heads each step */
.step-fig { position: relative; max-width: 300px; margin: -12px auto 18px }
.step .hl-fig { --hairline-plate: var(--bg); --hairline-stroke: 1.1 }
.step:hover .hl-fig { --hairline-plate: var(--surface) }

/* What We Build: the finished basement with a numbered point per service */
.svc-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 48px;
  align-items: center
}

.svc-fig-wrap { position: relative }
.svc-fig-wrap .hl-fig { --hairline-plate: var(--surface) }
.svc-fig-wrap .hl-read { top: 2%; right: 2% }

.svc-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  visibility: hidden;
  transition: background .25s, color .25s, transform .25s;
  animation: pinPulse 2.4s ease-out infinite
}

.svc-fig-wrap.ready .svc-pin { visibility: visible }
.svc-pin:hover,
.svc-pin.active { background: var(--accent); color: var(--bg); transform: translate(-50%, -50%) scale(1.12) }
.svc-pin.active { animation: none }

@keyframes pinPulse {
  0% { box-shadow: 0 0 0 0 rgba(91, 168, 217, .45) }
  70%, 100% { box-shadow: 0 0 0 12px rgba(91, 168, 217, 0) }
}

.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px }

.svc-tab {
  display: flex;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s
}

.svc-tab span:first-child { color: var(--accent) }
.svc-tab:hover { border-color: var(--accent-dim); color: var(--text) }
.svc-tab.active { border-color: var(--accent); color: var(--text); background: var(--tag-bg) }

.svc-panel { display: none; animation: fadeIn .4s ease }
.svc-panel.active { display: block }
.svc-panel h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; margin-bottom: 12px }
.svc-panel p { font-size: 1.05rem; line-height: 1.75; color: var(--muted); margin-bottom: 18px }

@media (max-width: 900px) {
  .svc-explorer { grid-template-columns: 1fr; gap: 28px }
  .svc-pin { width: 28px; height: 28px; font-size: .7rem }
}

@media (prefers-reduced-motion: reduce) {
  .svc-pin { animation: none }
}