/* Tjänstesektionen (#tjanster). Laddas efter style.css och använder dess variabler. */

.services {
  --tj-pad: max(8vw, 48px);
  --tj-radius: 14px;
  --tj-card: rgba(14, 29, 49, .7);
  /* Telefonramarna. Skärmbilderna är ca 516 px breda, så skärmen får vara max 260 px. */
  --tj-screen-w: 260px;
  --tj-bezel: 9px;
  --tj-bar: 28px;
  --tj-phone-r: 38px;
  overflow: visible;
  overflow: clip; /* clip i stället för hidden, annars fungerar inte position: sticky */
  padding-left: var(--tj-pad);
  padding-right: var(--tj-pad);
  width: 100%;
}
.services:before { top: 90px; }
.services .section-heading { margin-bottom: 44px; }
.services .section-heading h2 { margin-top: 22px; }
.services .section-heading > p { font-size: 1rem; line-height: 1.75; max-width: 440px; }
.services a:focus-visible,
.services button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

.fixed-price-banner { align-items: center; background: rgba(209, 125, 54, .1); border: 1px solid rgba(224, 141, 66, .42); display: flex; gap: 16px; margin: 0; padding: 16px 22px; }
.fixed-price-mark { align-items: center; background: var(--accent); border-radius: 50%; color: #111d2b; display: flex; flex: none; font-size: 1rem; height: 28px; justify-content: center; width: 28px; }
.fixed-price-banner div { display: flex; flex-direction: column; }
.fixed-price-banner strong { font-family: 'Space Grotesk'; font-size: .95rem; font-weight: 500; }
.fixed-price-banner span:not(.fixed-price-mark) { color: var(--muted); font-size: .82rem; }

.card-button { background: var(--accent); border: 1px solid var(--accent); border-radius: 24px; color: #101b29; display: inline-block; font-size: .74rem; font-weight: 500; letter-spacing: .1em; padding: 13px 24px; text-transform: uppercase; transition: background .2s, color .2s; }
.card-button:hover { background: var(--accent-light); }
.card-button-light { background: rgba(209, 125, 54, .15); color: var(--cream); }
.card-button-light:hover { background: var(--accent); color: #101b29; }

.services-footnote { color: var(--muted); font-size: .8rem; margin-top: 64px; }
.services-footnote strong { color: var(--accent-light); font-weight: 500; }
.service-conditions { border-left: 2px solid var(--accent); color: var(--muted); font-size: .8rem; line-height: 1.7; margin-top: 20px; max-width: 760px; padding-left: 16px; }
.service-conditions strong { color: var(--accent-light); font-weight: 500; }

/* Mininavigation – visas från 768 px, på mobil finns den inte alls (se längre ned) */
.tj-nav { backdrop-filter: blur(14px); background: rgba(7, 17, 31, .88); border: 1px solid var(--line); border-radius: 999px; display: flex; gap: 4px; margin-top: 26px; max-width: 100%; overflow-x: auto; padding: 6px; position: sticky; scrollbar-width: none; top: 88px; width: fit-content; z-index: 5; }
.tj-nav::-webkit-scrollbar { display: none; }
.tj-nav a { border-radius: 999px; color: var(--muted); flex: none; font-size: .8rem; letter-spacing: .03em; padding: 10px 17px; transition: background .2s, color .2s; white-space: nowrap; }
.tj-nav a:hover { color: var(--cream); }
.tj-nav a:focus-visible { outline-offset: -2px; }
.tj-nav a[aria-current] { background: linear-gradient(110deg, var(--accent), var(--accent-light)); color: #131c29; font-weight: 500; }

/* Gemensamt för blocken */
.tj-block { margin-top: clamp(88px, 11vw, 150px); scroll-margin-top: 160px; }
.tj-label { color: var(--accent-light); font-size: .7rem; letter-spacing: .2em; margin-bottom: 18px; text-transform: uppercase; }
.services h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.035em; }
.services h3 em { color: var(--accent-light); font-style: normal; }
.services h3.tj-h3-small { font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: -.025em; }
.services h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.tj-copy > p:not(.tj-label) { color: var(--muted); font-size: 1rem; line-height: 1.75; margin-top: 22px; max-width: 58ch; }
.tj-fineprint { color: var(--muted); font-size: .82rem; line-height: 1.7; max-width: 74ch; }
.tj-icon { align-items: center; background: rgba(209, 125, 54, .12); border: 1px solid rgba(224, 141, 66, .32); border-radius: 12px; color: var(--accent-light); display: flex; flex: none; height: 44px; justify-content: center; width: 44px; }
.tj-icon svg { height: 22px; width: 22px; }

.tj-split { align-items: center; display: grid; gap: clamp(32px, 5vw, 76px); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.tj-media { aspect-ratio: 16 / 9; background: var(--surface); border-radius: var(--tj-radius); box-shadow: 0 0 0 1px rgba(224, 141, 66, .3), 0 26px 60px rgba(0, 0, 0, .4), 0 0 54px rgba(209, 125, 54, .13); overflow: hidden; position: relative; }
.tj-media-photo { aspect-ratio: 4 / 3; }
.tj-media img,
.tj-media video,
.tj-energy-bg img,
.tj-energy-bg video,
.tj-auto-feature img { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
[data-tj-video] video { opacity: 0; transition: opacity .7s ease; }
[data-tj-video].is-playing video { opacity: 1; }
.tj-video-toggle { align-items: center; background: rgba(7, 17, 31, .72); border: 1px solid rgba(245, 239, 227, .28); border-radius: 50%; bottom: 14px; color: var(--cream); cursor: pointer; display: flex; height: 40px; justify-content: center; left: 14px; position: absolute; width: 40px; z-index: 2; }
.tj-video-toggle[hidden] { display: none; }
.tj-video-toggle:hover { border-color: var(--accent-light); color: var(--accent-light); }
.tj-video-toggle svg { height: 16px; width: 16px; }

[data-video-story] video { transition-duration: .5s; }
.tj-figure { min-width: 0; }
.tj-media-caption { color: var(--muted); font-size: .82rem; line-height: 1.6; margin-top: 14px; }

/* Telefonram */
.tj-phone { background: linear-gradient(145deg, #232d3b, #05080d 62%); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--tj-phone-r); box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(224, 141, 66, .16), 0 0 54px rgba(209, 125, 54, .14); box-sizing: content-box; flex: none; padding: var(--tj-bezel); position: relative; width: var(--tj-screen-w); }
.tj-phone::after { background: linear-gradient(115deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 30%); border-radius: inherit; content: ''; inset: 0; pointer-events: none; position: absolute; }
.tj-phone-screen { background: var(--tj-screen-end); border-radius: calc(var(--tj-phone-r) - var(--tj-bezel)); height: calc(var(--tj-bar) + var(--tj-screen-w) * 1.6949 + 17px); overflow: hidden; position: relative; }
.tj-phone-screen::after { background: rgba(255, 255, 255, .55); border-radius: 4px; bottom: 6px; content: ''; height: 4px; left: 33%; position: absolute; width: 34%; }
.tj-phone-screen img { display: block; height: auto; width: 100%; }
.tj-phone-bar { align-items: center; background: var(--tj-screen-top); color: rgba(255, 255, 255, .92); display: flex; font-size: calc(var(--tj-bar) * .38); font-weight: 600; height: var(--tj-bar); justify-content: space-between; line-height: 1; padding: 0 calc(var(--tj-bar) * .72); }
.tj-phone-bar i { border: 1px solid currentColor; border-radius: 3px; height: calc(var(--tj-bar) * .32); opacity: .85; position: relative; width: calc(var(--tj-bar) * .68); }
.tj-phone-bar i::after { background: currentColor; border-radius: 1px; content: ''; inset: 1px 30% 1px 1px; position: absolute; }
.tj-phone-oversikt { --tj-screen-top: #454b87; --tj-screen-end: #99868a; }
.tj-phone-energi { --tj-screen-top: #232330; --tj-screen-end: #332e30; }
.tj-phone-sm { --tj-screen-w: 168px; --tj-bezel: 6px; --tj-bar: 19px; --tj-phone-r: 27px; }

/* 01 – En app för allt: före/efter */
.tj-merge { align-items: center; background: linear-gradient(120deg, rgba(16, 36, 59, .7), rgba(13, 26, 44, .7)); border: 1px solid var(--line); border-radius: var(--tj-radius); display: grid; gap: clamp(20px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) clamp(56px, 9vw, 130px) auto; margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 48px) clamp(18px, 4vw, 56px); }
.tj-merge-caption { color: var(--accent-light); font-size: .7rem; letter-spacing: .2em; margin-bottom: 22px; text-align: center; text-transform: uppercase; }
.tj-tiles { display: grid; gap: 22px 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 auto; max-width: 640px; }
.tj-tile { align-items: center; color: var(--muted); display: flex; flex-direction: column; font-size: .88rem; gap: 12px; line-height: 1.25; text-align: center; transition: color .5s; transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
.tj-tile:nth-child(even) { transform: translateY(10px); }
.tj-tile-icon { align-items: center; border: 1px dashed rgba(226, 154, 81, .4); border-radius: 18px; color: rgba(226, 154, 81, .6); display: flex; height: 68px; justify-content: center; position: relative; width: 68px; }
.tj-tile-icon svg { height: 30px; width: 30px; }
.tj-tile-fly { align-items: center; background: #14283f; border: 1px solid rgba(226, 154, 81, .6); border-radius: inherit; box-shadow: 0 10px 22px rgba(0, 0, 0, .32); color: var(--accent-light); display: flex; inset: -1px; justify-content: center; opacity: 0; position: absolute; z-index: 2; }
.tj-merge-arrow { background: linear-gradient(90deg, rgba(209, 125, 54, 0), var(--accent-light)); height: 2px; position: relative; }
.tj-merge-arrow::after { border-right: 2px solid var(--accent-light); border-top: 2px solid var(--accent-light); content: ''; height: 10px; position: absolute; right: 0; top: -5px; transform: rotate(45deg); width: 10px; }
.tj-merge-arrow::before { background: radial-gradient(circle, #ffd9a8, rgba(226, 154, 81, 0) 70%); border-radius: 50%; content: ''; height: 16px; left: 0; opacity: 0; position: absolute; top: -7px; width: 16px; }
.tj-merge-after { align-items: center; display: flex; flex-direction: column; }
.tj-merge .tj-phone { transition: filter .8s ease, opacity .8s ease; transition-delay: .9s; }
.tj-app-note { margin-top: 20px; }

/* Startläge och animation – sätts av main.js, aldrig vid prefers-reduced-motion */
.tj-merge.is-armed .tj-tile { color: var(--cream); transition: none; }
.tj-merge.is-armed .tj-tile-fly { opacity: 1; }
.tj-merge.is-armed .tj-phone { filter: saturate(.25) brightness(.6); opacity: .55; transition: none; }
.tj-merge.is-merged .tj-tile-fly { animation: tj-fly 1s cubic-bezier(.55, .06, .3, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.tj-merge.is-merged .tj-merge-arrow::before { animation: tj-trail 1s ease-in-out 3; }
@keyframes tj-fly {
  0%, 12% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3); }
}
@keyframes tj-trail {
  0% { left: 0; opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { left: calc(100% - 16px); opacity: 0; }
}

/* Exempel på dashboard */
.tj-dash { text-align: center; }
.tj-shots { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.tj-shot { --tj-top: calc(1px + var(--tj-bezel) + var(--tj-bar)); --tj-img-h: calc(var(--tj-screen-w) * var(--tj-ar)); align-items: center; display: flex; flex-direction: column; gap: 30px; }
/* Bildernas höjd/bredd samt var på bilden (0–1) varje markering börjar och slutar */
.tj-shot-oversikt { --tj-ar: 1.3101; }
.tj-shot-oversikt [data-n="1"] { --from: .008; --to: .09; }
.tj-shot-oversikt [data-n="2"] { --from: .255; --to: .482; }
.tj-shot-oversikt [data-n="3"] { --from: .535; --to: .95; }
.tj-shot-energi { --tj-ar: 1.6949; }
.tj-shot-energi [data-n="1"] { --from: .075; --to: .45; }
.tj-shot-energi [data-n="2"] { --from: .462; --to: .565; }
.tj-shot-energi [data-n="3"] { --from: .578; --to: .962; }
.tj-shot-stage { padding-left: 56px; position: relative; }
.tj-shot-energi .tj-shot-stage { padding-left: 0; padding-right: 56px; }
.tj-shot-oversikt .tj-phone { transform: perspective(1500px) rotateY(7deg); }
.tj-shot-energi .tj-phone { transform: perspective(1500px) rotateY(-7deg); }
.tj-mark { border: 1.5px solid var(--accent); border-radius: 5px 0 0 5px; border-right: 0; height: calc((var(--to) - var(--from)) * var(--tj-img-h)); left: 38px; position: absolute; top: calc(var(--tj-top) + var(--from) * var(--tj-img-h)); width: 10px; }
.tj-shot-energi .tj-mark { border-left: 0; border-radius: 0 5px 5px 0; border-right: 1.5px solid var(--accent); left: auto; right: 38px; }
.tj-mark b,
.tj-callouts b { align-items: center; background: var(--accent); border-radius: 50%; color: #111d2b; display: flex; flex: none; font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 600; height: 22px; justify-content: center; width: 22px; }
.tj-mark b { margin-top: -11px; position: absolute; right: calc(100% + 6px); top: 50%; }
.tj-shot-energi .tj-mark b { left: calc(100% + 6px); right: auto; }
.tj-callouts { display: flex; flex-direction: column; gap: 12px; list-style: none; max-width: 320px; text-align: left; }
.tj-callouts li { align-items: flex-start; color: var(--cream); display: flex; font-size: .9rem; gap: 12px; line-height: 1.45; }
.tj-caption { color: var(--muted); font-size: .92rem; line-height: 1.7; margin: clamp(36px, 5vw, 56px) auto 0; max-width: 60ch; }

@media (min-width: 1280px) {
  /* Texterna bredvid telefonerna, i höjd med det de beskriver */
  .tj-shots { display: flex; gap: 16px; justify-content: center; }
  .tj-shot { align-items: stretch; flex-direction: row; gap: 0; }
  .tj-shot-oversikt { flex-direction: row-reverse; }
  .tj-shot figcaption { position: relative; width: clamp(180px, calc((100vw - 2 * var(--tj-pad) - 710px) / 2), 250px); }
  .tj-callouts { display: block; max-width: none; }
  .tj-callouts li { align-items: center; justify-content: flex-end; left: 0; position: absolute; right: -4px; top: calc(var(--tj-top) + (var(--from) + var(--to)) / 2 * var(--tj-img-h)); transform: translateY(-50%); }
  .tj-callouts li b { display: none; }
  .tj-callouts li span { max-width: calc(100% - 58px); text-align: right; }
  .tj-callouts li::after { background: linear-gradient(90deg, rgba(209, 125, 54, .1), var(--accent)); content: ''; flex: 0 0 42px; height: 1px; }
  .tj-shot-energi .tj-callouts li { flex-direction: row-reverse; left: -4px; right: 0; }
  .tj-shot-energi .tj-callouts li span { text-align: left; }
  .tj-shot-energi .tj-callouts li::after { background: linear-gradient(270deg, rgba(209, 125, 54, .1), var(--accent)); }
}

/* 02 – Smart energi */
.tj-energy { isolation: isolate; margin-left: calc(var(--tj-pad) * -1); margin-right: calc(var(--tj-pad) * -1); padding: clamp(72px, 9vw, 124px) var(--tj-pad) clamp(60px, 7vw, 100px); position: relative; }
.tj-energy > :not(.tj-energy-bg) { position: relative; z-index: 1; }
.tj-energy-bg { background: var(--deep); inset: 0; overflow: hidden; position: absolute; }
.tj-energy-bg img,
.tj-energy-bg video { object-position: 68% 50%; }
/* Mörk toning från vänster håller texten läsbar (WCAG AA); kanterna tonas mot sidans bakgrund */
.tj-energy-bg::after { background: linear-gradient(180deg, var(--bg) 0, rgba(10, 22, 40, 0) 14%, rgba(10, 22, 40, 0) 52%, rgba(10, 22, 40, .92) 84%, var(--bg) 100%), linear-gradient(90deg, rgba(7, 17, 31, .97) 0, rgba(7, 17, 31, .93) 40%, rgba(7, 17, 31, .5) 68%, rgba(7, 17, 31, .12) 100%); content: ''; inset: 0; position: absolute; }
.tj-energy .tj-video-toggle { bottom: auto; left: var(--tj-pad); top: clamp(24px, 4vw, 48px); }
.tj-energy > .tj-copy { max-width: 620px; }
.tj-energy-steps { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin-top: clamp(40px, 5vw, 64px); }
.tj-energy-steps li { backdrop-filter: blur(12px); background: rgba(8, 18, 31, .8); border: 1px solid var(--line); border-radius: var(--tj-radius); padding: 24px; }
.tj-energy-steps h4 { margin: 18px 0 8px; }
.tj-energy-steps p,
.tj-auto-card p,
.tj-net-cards p,
.tj-process-steps p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.tj-chips,
.tj-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tj-chips { margin-top: 16px; }
.tj-chips li { background: rgba(8, 18, 31, .8); border: 1px solid var(--line); border-radius: 20px; color: var(--cream); font-size: .82rem; padding: 8px 15px; }
.tj-chips li::before { color: var(--accent-light); content: '+'; margin-right: 8px; }
.tj-badges { margin-top: 36px; }
.tj-badges li { align-items: center; background: rgba(46, 31, 22, .92); border: 1px solid rgba(224, 141, 66, .5); border-radius: 20px; color: var(--cream); display: flex; font-size: .84rem; font-weight: 400; gap: 9px; padding: 9px 16px 9px 12px; }
.tj-badges svg { color: var(--accent-light); flex: none; height: 16px; stroke-width: 2; width: 16px; }
.tj-energy .tj-fineprint { margin-top: 26px; }

/* 03 – Automationer */
.tj-auto-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin-top: clamp(36px, 4vw, 52px); }
.tj-auto-card { background: var(--tj-card); border: 1px solid var(--line); border-radius: var(--tj-radius); padding: 26px; transition: border-color .3s; }
.tj-auto-card:hover { border-color: rgba(224, 141, 66, .55); }
.tj-auto-card h4 { margin: 18px 0 8px; }
.tj-auto-feature { display: grid; grid-column: span 2; grid-row: span 2; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; padding: 0; }
.tj-auto-feature picture { display: block; min-height: 300px; position: relative; }
.tj-auto-feature > div { align-self: center; padding: 30px; }
.tj-auto-feature h4 { font-size: 1.4rem; }
.tj-auto-feature p { font-size: 1rem; }
.tj-idea { align-items: center; display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; margin-top: 30px; }
.tj-idea p { color: var(--cream); font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; max-width: 70ch; }

/* Varför lokalt? */
.tj-checks { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 30px 0 28px; }
.tj-checks li { align-items: flex-start; display: flex; gap: 14px; }
.tj-checks svg { color: var(--accent-light); flex: none; height: 22px; margin-top: 2px; stroke-width: 2; width: 22px; }
.tj-checks strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; font-weight: 500; }
.tj-checks span { color: var(--muted); font-size: .94rem; }

/* 04 – Nätverk & säkerhet */
.tj-net-cards { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); }
.tj-net-cards article { background: var(--tj-card); border: 1px solid var(--line); border-radius: var(--tj-radius); padding: 30px; }
.tj-net-cards h4 { font-size: 1.3rem; margin: 20px 0 10px; }
.tj-net-cards p { font-size: .95rem; max-width: 50ch; }
.tj-net-note { margin-top: 22px; }

/* Så går det till */
.tj-process-steps { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin-top: 36px; }
.tj-process-steps li { position: relative; }
.tj-process-steps b { align-items: center; background: var(--bg); border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-light); display: flex; font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 500; height: 40px; justify-content: center; position: relative; width: 40px; z-index: 1; }
.tj-process-steps li:not(:last-child)::before { background: linear-gradient(90deg, var(--accent), rgba(209, 125, 54, .15)); content: ''; height: 1px; left: 40px; position: absolute; right: -24px; top: 20px; }
.tj-process-steps h4 { margin: 18px 0 6px; }
.tj-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }

@media (max-width: 1000px) {
  .tj-auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-auto-feature { grid-row: auto; }
}
@media (max-width: 900px) {
  .tj-split { grid-template-columns: minmax(0, 1fr); }
  .tj-shots { --tj-screen-w: 228px; }
  .tj-merge { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tj-merge-before { width: 100%; }
  .tj-merge-arrow { height: 2px; margin: 26px 0 30px; transform: rotate(90deg); width: 60px; }
}
@media (max-width: 767px) {
  .tj-nav { display: none; }
  .tj-block { scroll-margin-top: 100px; }
}
@media (max-width: 699px) {
  .tj-shots { --tj-screen-w: min(260px, 100vw - 108px); gap: 56px; grid-template-columns: minmax(0, 1fr); }
  .tj-shot .tj-phone { transform: none; }
  .tj-energy-steps { grid-template-columns: minmax(0, 1fr); }
  .tj-energy-steps li { column-gap: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .tj-energy-steps .tj-icon { grid-row: span 2; }
  .tj-energy-steps h4 { margin: 2px 0 6px; }
  .tj-net-cards { grid-template-columns: minmax(0, 1fr); }
  .tj-process-steps { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .tj-process-steps li { column-gap: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 26px; }
  .tj-process-steps li:not(:last-child)::before { background: linear-gradient(180deg, var(--accent), rgba(209, 125, 54, .15)); bottom: 0; height: auto; left: 20px; right: auto; top: 40px; width: 1px; }
  .tj-process-steps b { grid-row: span 2; }
  .tj-process-steps h4 { margin: 8px 0 4px; }
}
@media (max-width: 639px) {
  /* Under 640 px laddas ingen video (se main.js) – bilden ligger som banner ovanför texten */
  .tj-energy { padding-top: 0; }
  .tj-energy-bg { aspect-ratio: 16 / 11; inset: auto; margin: 0 calc(var(--tj-pad) * -1) -44px; position: relative; }
  .tj-energy-bg::after { background: linear-gradient(180deg, var(--bg) 0, rgba(10, 22, 40, 0) 20%, rgba(10, 22, 40, 0) 58%, var(--bg) 100%); }
  .tj-energy-bg video,
  .tj-energy .tj-video-toggle { display: none; }
}
@media (max-width: 600px) {
  .services { --tj-pad: 16px; }
  .tj-tile { font-size: .7rem; }
  .tj-tile-icon { border-radius: 15px; height: 54px; width: 54px; }
  .tj-tile-icon svg { height: 25px; width: 25px; }
  .services .section-heading { margin-bottom: 30px; }
  .fixed-price-banner { align-items: flex-start; padding: 14px 16px; }
  .tj-block { scroll-margin-top: 88px; }
  .tj-auto-grid { grid-template-columns: minmax(0, 1fr); }
  .tj-auto-feature { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .tj-auto-feature picture { aspect-ratio: 4 / 3; min-height: 0; }
  .tj-auto-card:not(.tj-auto-feature) { padding: 22px; }
  .tj-auto-feature > div { padding: 22px; }
  .tj-net-cards article { padding: 24px; }
  .tj-cta .card-button { flex: 1 1 140px; text-align: center; }
  .services-footnote { margin-top: 48px; }
  .service-conditions { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .services *,
  .services *::before,
  .services *::after { animation: none !important; }
}