/* s18-boden-lulea-vasteras.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.s18 { padding: clamp(80px, 8vw, 140px) 0; position: relative; overflow: hidden; }
.s18::before { content: ""; position: absolute; left: 30%; top: 0; width: 70%; height: 100%; pointer-events: none;
  background: radial-gradient(42% 48% at 50% 44%, rgba(31, 116, 184, .11), rgba(31, 116, 184, 0) 74%); }
.s18-rutnat { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--spalt); }
.s18-text { grid-column: 1 / span 4; grid-row: 1; padding-top: clamp(8px, 2vw, 40px); }
.s18-text .t-etikett { margin-bottom: 30px; }
.s18-text .t-ingress { margin-top: 28px; max-width: 26ch; }
.s18-karta { grid-column: 5 / -1; grid-row: 1 / 4; justify-self: center; position: relative; height: min(calc(var(--vh) * 92), 980px); aspect-ratio: 815 / 1554; }
.s18-karta canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s18-service { grid-column: 1 / span 4; grid-row: 3; align-self: end; max-width: 25rem; padding-top: 26px; border-top: 1px solid var(--linje);
  opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.s18-service.pa { opacity: 1; transform: none; }
.s18-service .t-h4 { margin: 0 0 12px; }
.s18-service .t-liten { margin: 0 0 22px; max-width: 30ch; }

/* orterna: markör, ledlinje och text – placeras i kartans koordinater */
.s18-ort { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.s18-ort i { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--glod);
  box-shadow: 0 0 0 4px rgba(242, 154, 60, .18), 0 0 20px rgba(242, 154, 60, .8); opacity: 0; transform: scale(.3);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.s18-ort.kall i { background: var(--natt); box-shadow: inset 0 0 0 1.5px var(--sval), 0 0 14px rgba(159, 180, 196, .35); }
.s18-ort:not(.kall) i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 215, 160, .5); opacity: 0; }
.s18-ort.pa i { opacity: 1; transform: none; }
.s18-ort.pa:not(.kall) i::after { animation: s18-andas 4.2s var(--ease-io) 1.2s infinite; }
.s18.s18-paus .s18-ort i::after { animation-play-state: paused; }
.s18.stilla .s18-ort i::after { animation: none; }
@keyframes s18-andas { 0% { opacity: .55; transform: scale(.45); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.s18-et { position: absolute; top: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; transform: translateY(-50%); }
.s18-ort.hoger .s18-et { left: 11px; }
.s18-ort.vanster .s18-et { right: 11px; flex-direction: row-reverse; text-align: right; }
.s18-et::before { content: ""; flex: none; width: 22px; height: 1px; background: rgba(188, 213, 243, .55); transform: scaleX(0); transition: transform .9s var(--ease) .1s; }
.s18-ort.hoger .s18-et::before { transform-origin: 0 50%; }
.s18-ort.vanster .s18-et::before { transform-origin: 100% 50%; }
.s18-ort.pa .s18-et::before { transform: none; }
.s18-et span { display: block; padding: 7px 14px; margin: -7px -14px; border-radius: 50%; opacity: 0; transform: translateX(-6px); transition: opacity 1s var(--ease) .25s, transform 1.2s var(--ease) .25s;
  background: radial-gradient(closest-side, rgba(4, 10, 24, .82), rgba(4, 10, 24, .6) 55%, rgba(4, 10, 24, 0)); }
.s18-ort.vanster .s18-et span { transform: translateX(6px); }
.s18-ort.pa .s18-et span { opacity: 1; transform: none; }
.s18-et b { display: block; font-size: 1.0625rem; font-weight: 420; color: var(--is); text-shadow: 0 0 3px #040a18, 0 0 8px #040a18, 0 1px 14px rgba(4, 10, 24, .95); }
.s18-et small { display: block; margin-top: 3px; font-size: .6875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3);
  text-shadow: 0 0 2px #040a18, 0 0 6px #040a18, 0 0 10px #040a18; }

/* måttet längs linjen */
.s18-matt { position: absolute; z-index: 2; pointer-events: none; transform: translateY(-38%); opacity: 0; transition: opacity 1s var(--ease); }
.s18-matt.pa { opacity: 1; }
.s18-matt b { display: block; font-size: clamp(2.75rem, 1.5rem + 3.2vw, 5.25rem); font-weight: 240; font-variation-settings: "opsz" 96; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: .9; white-space: nowrap; color: var(--is); text-shadow: 0 0 24px rgba(4, 10, 24, .9); }
.s18-matt b small { font-size: .32em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .14em; }
.s18-matt em { display: block; margin-top: 12px; font-style: normal; font-size: .6875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em;
  text-transform: uppercase; color: var(--is-3); white-space: nowrap; }

@media (max-width: 1100px) {
  .s18-rutnat { display: block; }
  .s18-karta { height: auto; width: min(100%, 520px); margin: 48px auto 0; }
  .s18-service { margin-top: 48px; }
}
@media (max-width: 760px) {
  .s18-text .t-ingress { max-width: none; }
  .s18-karta { justify-self: stretch; width: auto; margin: 36px calc(-1 * var(--marg) + 6px) 0; }
  .s18-et b { font-size: .875rem; }
  .s18-et small { font-size: .625rem; letter-spacing: .14em; }
  .s18-et { gap: 7px; }
  .s18-et::before { width: 14px; }
  .s18-ort.hoger .s18-et { left: 9px; }
  .s18-ort.vanster .s18-et { right: 9px; }
  .s18-matt em { margin-top: 8px; font-size: .625rem; }
  .s18-service { margin-top: 36px; }
}