/* Service map — presentation layer only (animation rules below are locked) */

.service-area-card--map-only {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.service-area-card--map-only:hover {
  box-shadow: none;
}

.service-area-card--map-only {
  flex: 1;
  display: flex;
  min-height: 0;
}

.service-map {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  --map-black: var(--black, #0a0a0a);
  --map-full-w: 1084;
  --map-full-h: 1451;
  --map-crop-left: 22;
  --map-crop-top: 200;
  --map-view-w: 1062;
  --map-view-h: 1251;
  --map-nudge-x: 9.5;
  --map-nudge-y: 10;
  --map-edge-fade: clamp(60px, 6.8vw, 72px);
}

/* ---- Panel shell ---- */

.service-map__frame {
  position: relative;
  width: 100%;
  max-width: 1085px;
  padding: clamp(32px, 3.2vw, 40px);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-left-color: rgba(201, 168, 76, 0.34);
  border-radius: 18px;
  background: var(--map-black);
  box-shadow:
    0 28px 68px rgba(0, 0, 0, 0.58),
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(201, 168, 76, 0.045),
    inset 0 1px 1px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  isolation: isolate;
}

.service-map__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 88% 72% at 50% 36%,
    rgba(255, 255, 255, 0.016) 0%,
    transparent 68%
  );
}

.service-map__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 108% 96% at 50% 52%,
    transparent 52%,
    rgba(0, 0, 0, 0.28) 100%
  );
}

/* ---- Typography zone (blocks raster header beneath) ---- */

.service-map__copy {
  position: relative;
  z-index: 4;
  background: var(--map-black);
}

.service-map__header {
  padding: 0 0 14px;
}

.service-map__header .service-area-card__eyebrow {
  margin-bottom: 8px;
}

.service-map__header .service-area-card__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.service-map__divider {
  height: 1px;
  margin: 0 0 22px;
  background: rgba(201, 168, 76, 0.14);
}

/* ---- Map viewport ---- */

.service-map__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1062 / 1251;
  overflow: visible;
  background: var(--map-black);
}

.service-map__image-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--map-black);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--map-edge-fade) * 0.45),
      #000 var(--map-edge-fade),
      #000 calc(100% - var(--map-edge-fade)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--map-edge-fade) * 0.45),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--map-edge-fade) * 0.45),
      #000 var(--map-edge-fade),
      #000 calc(100% - var(--map-edge-fade)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--map-edge-fade) * 0.45),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--map-edge-fade) * 0.45),
      #000 var(--map-edge-fade),
      #000 calc(100% - var(--map-edge-fade)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--map-edge-fade) * 0.45),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--map-edge-fade) * 0.45),
      #000 var(--map-edge-fade),
      #000 calc(100% - var(--map-edge-fade)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--map-edge-fade) * 0.45),
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.service-map__image,
.service-map__overlay {
  position: absolute;
  display: block;
  width: calc(100% * var(--map-full-w) / var(--map-view-w));
  height: calc(100% * var(--map-full-h) / var(--map-view-h));
  left: calc(
    (-1 * var(--map-crop-left) + var(--map-nudge-x)) / var(--map-view-w) * 100%
  );
  top: calc(
    (-1 * var(--map-crop-top) + var(--map-nudge-y)) / var(--map-view-h) * 100%
  );
}

.service-map__image {
  object-fit: fill;
}

.service-map__overlay {
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* ---- Animation layer (locked — do not modify) ---- */

.service-map__overlay .nav-route__track {
  fill: none;
  stroke: #FFD54A;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.25;
}

.service-map__overlay .nav-route__glow {
  fill: none;
  stroke: #FFD54A;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40 500;
  filter: drop-shadow(0 0 7px #FFD54A);
  opacity: 1;
}

.service-map__overlay .nav-orb {
  fill: #FFD54A;
  filter:
    drop-shadow(0 0 6px #FFD54A)
    drop-shadow(0 0 14px #FFD54A)
    drop-shadow(0 0 24px #FFD54A);
}

.service-map__overlay .nav-anchor__label-glow {
  fill: rgba(255, 213, 74, 0);
  opacity: 0;
  transition: fill 0.25s ease, opacity 0.25s ease;
}

.service-map__overlay .nav-anchor__diamond {
  fill: rgba(255, 213, 74, 0.35);
  stroke: #FFD54A;
  stroke-width: 1;
  opacity: 0.55;
  transform: scale(1.05);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.service-map__overlay .nav-anchor.is-lit .nav-anchor__label-glow {
  fill: rgba(255, 213, 74, 0.16);
  opacity: 1;
}

.service-map__overlay .nav-anchor.is-lit .nav-anchor__diamond {
  fill: rgba(255, 213, 74, 0.85);
  opacity: 1;
  filter: drop-shadow(0 0 10px #FFD54A);
}

.service-map__overlay--static .nav-route__glow,
.service-map__overlay--static .nav-orb,
.service-map__overlay--static .nav-anchor__diamond,
.service-map__overlay--static .nav-anchor__label-glow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .service-map__overlay .nav-route__glow,
  .service-map__overlay .nav-orb {
    display: none;
  }
}

@media (max-width: 768px) {
  .service-map__frame {
    max-width: 100%;
  }
}