/*
Theme Name: JTM Base
Template: hello-elementor
Version: 1.9.9
Description: Basetema för JT Media Sweden-sajter. Child till Hello Elementor. Bygger med Elementor Pro. Armaturteknik-profil (guld + marinblå).
Author: JT Media Sweden
Text Domain: jtm-base
*/

/* ============================================================
   Design tokens — Armaturteknik-palett (guld + marinblå)
   Elementor Global Colors använder samma slugs.
   ============================================================ */

:root {
    --jtm-base:        #FFFFFF;
    --jtm-sand:        #FFFFFF;
    --jtm-paper:       #FFFFFF;
    --jtm-stone:       #B8AFA4;
    --jtm-copper:      #D4A017;
    --jtm-brass:       #B8891C;
    --jtm-slate:       #16324F;
    --jtm-carbon:      #0F1E30;
    --jtm-onyx:        #0A1A2A;
    --jtm-ink:         #0F1E30;
    --jtm-primary:     #D4A017;
    --jtm-muted-dark:  #4A5568;
    --jtm-muted-light: #96A0AE;
    --jtm-line-dark:   rgba(255, 255, 255, 0.12);
    --jtm-line-light:  rgba(15, 30, 48, 0.10);
    --jtm-line-copper: rgba(212, 160, 23, 0.30);

    --jtm-content-size: 760px;
    --jtm-wide-size:    1440px;
    --jtm-gutter:       clamp(1.5rem, 4vw, 5rem);

    --jtm-section-pad:       clamp(6rem, 4rem + 8vw, 11rem);
    --jtm-section-pad-tight: clamp(3rem, 2rem + 3vw, 5rem);
}

html {
    overflow-x: hidden;
}
body {
    background-color: var(--jtm-paper);
    color: var(--jtm-ink);
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Skarpa kanter överallt utom knappar. */
.elementor img,
.elementor .elementor-widget-image img,
.elementor-element {
    border-radius: 0;
}

.elementor-button,
.elementor a.elementor-button {
    border-radius: 999px !important;
}

/* Typografi — säkerställ att Elementors globala fonts går fram. */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
    font-family: "Inter", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
    font-family: "Sora", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.elementor-widget-heading.jtm-mega .elementor-heading-title,
.elementor-widget-heading.jtm-display .elementor-heading-title {
    line-height: 0.96;
}

/* ============================================================
   Header — sticky, paper, krymper vid scroll
   Wrapper: Elementor Container med css_classes: "jtm-header"
   ============================================================ */

.jtm-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    height: 88px !important;
    min-height: 88px !important;
    padding-block: 0 !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--jtm-line-light);
    transition: height 200ms ease, min-height 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.jtm-header.is-scrolled {
    height: 68px !important;
    min-height: 68px !important;
    border-bottom-color: var(--jtm-line-light);
    box-shadow: 0 1px 3px rgba(15, 30, 48, 0.06);
}

.jtm-header .elementor-widget-site-logo img,
.jtm-header .elementor-widget-image img {
    max-height: 44px;
    width: auto;
    transition: max-height 200ms ease;
}

.jtm-header.is-scrolled .elementor-widget-site-logo img,
.jtm-header.is-scrolled .elementor-widget-image img {
    max-height: 36px;
}

.jtm-header .elementor-nav-menu li a,
.jtm-header .elementor-nav-menu--main .elementor-item {
    color: var(--jtm-ink) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding-inline: 1rem !important;
}

/* Layout: nav pushas höger, knappen efter den. */
.jtm-header .elementor-widget-nav-menu {
    margin-left: auto;
}

/* Container-strukturen i headern. */
.jtm-header,
.jtm-header > .e-con-inner {
    height: 100% !important;
}

.jtm-header-inner {
    max-width: var(--jtm-wide-size);
    width: 100%;
    margin-inline: auto;
}

/* Under 1024px: nav till overlay, knappen kvar synlig. */
@media (max-width: 1023px) {
    .jtm-header .elementor-widget-nav-menu {
        margin-left: 0;
    }
    .jtm-header-cta {
        margin-left: auto;
    }
}


/* @font-face — files ligger i assets/fonts/ när de laddats upp. Tyst fallback.
   Google Fonts (Manrope + Inter) laddas via Elementor Kit. */
@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/manrope-800.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/inter-500.woff2") format("woff2");
}

.jtm-header .elementor-button {
    padding: 0.625rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    background-color: var(--jtm-primary) !important;
    color: var(--jtm-base) !important;
    line-height: 1.2 !important;
}

body.admin-bar .jtm-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .jtm-header { top: 46px; }
}

/* Nollställ ALLT som kan skapa gap mellan header och hero */
header.elementor-location-header,
header.elementor-location-header > header,
header.elementor-location-header .e-con,
header.elementor-location-header > .elementor-element {
    box-shadow: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body > .elementor,
.elementor.elementor-7,
[data-elementor-type="wp-page"] {
    margin: 0 !important;
    padding: 0 !important;
}
[data-elementor-type="wp-page"] > .e-con:first-child,
[data-elementor-type="wp-page"] > .elementor-element:first-child {
    margin-top: 0 !important;
}
header.elementor-location-header + [data-elementor-type="wp-page"],
header.elementor-location-header + div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   Hero
   Wrapper: Elementor Container med css_classes: "jtm-hero"
   ============================================================ */

.jtm-hero {
    min-height: calc(100svh - 88px) !important;
}

.jtm-hero .jtm-hero-title .elementor-heading-title {
    font-size: clamp(4rem, 2rem + 10vw, 9rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--jtm-base);
    max-width: 20ch;
}

.jtm-hero .jtm-hero-lead {
    color: var(--jtm-base);
    max-width: 60ch;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.5;
}

/* ============================================================
   Gjutström — brass-linjen (sektion 3)
   Wrapper: Container css_classes "jtm-process-steps"
   Varje steg: Container css_classes "jtm-process-step"
   ============================================================ */

.jtm-process-steps {
    counter-reset: jtm-step;
    position: relative;
}

.jtm-process-steps::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.5rem;
    width: 2px;
    background: var(--jtm-brass);
}

.jtm-process-step {
    counter-increment: jtm-step;
    display: grid !important;
    grid-template-columns: 3rem 1fr;
    column-gap: 2rem;
    padding-block: 1.75rem !important;
    position: relative;
}

.jtm-process-step::before {
    content: counter(jtm-step, decimal-leading-zero);
    color: var(--jtm-brass);
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    align-self: start;
    padding-block: 0.5rem;
    background: var(--jtm-sand);
    grid-column: 1;
}

.jtm-process-step > * {
    grid-column: 2;
}

@media (max-width: 767px) {
    .jtm-process-steps::before { left: 1rem; }
    .jtm-process-step {
        grid-template-columns: 2rem 1fr;
        column-gap: 1rem;
    }
}

/* ============================================================
   Footer
   Wrapper: Container css_classes "jtm-footer"
   ============================================================ */

.jtm-footer {
    background-color: #0F1E30 !important;
    color: #96A0AE;
}

.jtm-footer .elementor-heading-title {
    color: var(--jtm-base);
}

.jtm-footer a {
    color: #96A0AE;
    text-decoration: none;
    transition: color 150ms ease;
}

.jtm-footer a:hover {
    color: var(--jtm-copper);
}

.jtm-footer .jtm-footer-copyright,
.jtm-footer .jtm-footer-copyright p {
    font-size: 0.75rem !important;
    color: #96A0AE;
}

/* ============================================================
   Rytm-hjälpare (för sektionsavsnitt)
   ============================================================ */

.jtm-section-carbon  { background-color: var(--jtm-carbon) !important; }
.jtm-section-slate   { background-color: var(--jtm-slate) !important; }
.jtm-section-onyx    { background-color: var(--jtm-onyx) !important; }
.jtm-section-sand    { background-color: var(--jtm-sand) !important; color: var(--jtm-ink); }
.jtm-section-paper   { background-color: var(--jtm-paper) !important; color: var(--jtm-ink); }
.jtm-section-primary { background-color: var(--jtm-slate) !important; color: var(--jtm-base); }

/* ============================================================
   Sektionsspecifika finslip
   ============================================================ */

/* Sektion 4: bild-fullbredd. Image kant-till-kant, ingen padding. */
.jtm-sec-bild .jtm-bildfull-img,
.jtm-sec-bild .elementor-widget-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.jtm-sec-bild .elementor-widget-image .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}
.jtm-sec-bild .elementor-widget-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Sektion 2/3/5/6/7 hairlines/eyebrows visuellt lugna */
.jtm-eyebrow .elementor-heading-title {
    opacity: 0.92;
}

/* Sektion 5: värden — vertikala kolumner, top-border copper */
.jtm-sec-varden .elementor-widget-container {
    padding-inline: 0 !important;
}

/* Sektion 7: branscher — subtil hover-effekt på rader */
.jtm-sec-brancher .e-con > .e-con {
    transition: background-color 200ms ease;
}
.jtm-sec-brancher .e-con > .e-con:hover .elementor-heading-title {
    color: var(--jtm-copper) !important;
}

/* Sektion 6: material — likadan hover */
.jtm-sec-material .e-con .elementor-heading-title {
    transition: color 200ms ease;
}
.jtm-sec-material .e-con:hover .elementor-heading-title {
    color: var(--jtm-copper) !important;
}

/* Sektion 9 CTA-knapp — hover ren */
.jtm-sec-cta .elementor-button {
    transition: background-color 150ms ease, color 150ms ease;
}

/* Responsiv typografi — clamp för de största */
@media (max-width: 767px) {
    .jtm-sec-cta .elementor-heading-title { font-size: 2.5rem !important; }
    .jtm-sec-brancher .elementor-heading-title { font-size: 1.375rem !important; }
    .jtm-sec-material .elementor-heading-title { font-size: 1.375rem !important; }
}

/* ============================================================
   KOMPAKT-VERSION: sektion 3–7
   ============================================================ */

/* Materials-grid: hover byter title till copper */
.jtm-material-cell .elementor-heading-title,
.jtm-process-cell .elementor-heading-title {
    transition: color 200ms ease;
}
.jtm-material-cell:hover .elementor-heading-title:not(.jtm-eyebrow .elementor-heading-title) {
    color: var(--jtm-copper) !important;
}

/* Process-grid — subtle line när cell hovras */
.jtm-process-cell {
    transition: border-color 200ms ease;
}
.jtm-process-cell:hover {
    border-color: var(--jtm-copper) !important;
}

/* Split-screen sektion 5: säkerställ att bild fyller sidan även utan explicit min-height */
.jtm-sec-bild-varden {
    min-height: 720px;
}
.jtm-split-image {
    min-height: 480px;
    background-size: cover !important;
    background-position: center center !important;
}
.jtm-split-content {
    min-height: 480px;
}

/* Trust-sektion: hover på branschrader/certifikat */
.jtm-sec-trust .e-con.e-flex[data-element_type="container"] .elementor-heading-title {
    transition: color 200ms ease;
}

/* Under 900px: split-screen (sektion 5) stackar, bild går ovan */
@media (max-width: 899px) {
    .jtm-split-image,
    .jtm-split-content {
        width: 100% !important;
    }
    .jtm-split-image {
        min-height: 320px;
    }
    .jtm-split-content {
        padding: 60px 32px !important;
    }
}

/* Under 767px: grid-celler blir en kolumn */
@media (max-width: 767px) {
    .jtm-material-grid .e-con-full,
    .jtm-process-grid .e-con-full {
        width: 100% !important;
    }
    .jtm-material-cell,
    .jtm-process-cell {
        padding-block: 24px !important;
    }
}

/* Process 4-col — responsivt fallback */
@media (max-width: 1023px) and (min-width: 768px) {
    .jtm-process-grid-4col > .e-con-full {
        width: 48% !important;
    }
}

/* Trust cert-row: horisontellt band, jämnt fördelat */
.jtm-cert-row {
    justify-content: space-between !important;
}
.jtm-cert-row > .e-con-full {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Cert-namnen är klickbara PDF/bild — hover byter till copper */
.jtm-cert-row a,
.jtm-cert-row .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.jtm-cert-row a:hover,
.jtm-cert-row .elementor-heading-title a:hover {
    color: var(--jtm-copper) !important;
}

/* Trust branch-row: horisontellt wrap, tightare items */
.jtm-branch-row {
    justify-content: space-between !important;
}
.jtm-branch-row > .e-con-full {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 140px;
}

@media (max-width: 1023px) and (min-width: 640px) {
    .jtm-cert-row > .e-con-full {
        width: 32% !important;
    }
    .jtm-branch-row > .e-con-full {
        width: 32% !important;
    }
}

@media (max-width: 639px) {
    .jtm-cert-row > .e-con-full,
    .jtm-branch-row > .e-con-full {
        width: 48% !important;
    }
}

/* ============================================================
   Kontaktpersoner (Kontakt-sidan)
   ============================================================ */

/* 3-kol grid som klarar sig även när Elementor lagt egna widths */
.jtm-person-grid {
    gap: 32px !important;
    row-gap: 48px !important;
}

.jtm-person-grid > .e-con-full,
.jtm-person-grid > .e-con {
    width: calc((100% - 64px) / 3) !important;
    flex: 0 0 auto;
    min-width: 240px;
}

@media (max-width: 1023px) {
    .jtm-person-grid > .e-con-full,
    .jtm-person-grid > .e-con {
        width: calc((100% - 32px) / 2) !important;
    }
}

@media (max-width: 599px) {
    .jtm-person-grid > .e-con-full,
    .jtm-person-grid > .e-con {
        width: 100% !important;
    }
}

/* Foto: alltid 4:5 crop, oavsett bildens originalstorlek */
.jtm-person-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--jtm-stone);
    padding: 0 !important;
    margin: 0 !important;
}
.jtm-person-photo .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}
.jtm-person-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.jtm-person-card:hover .jtm-person-photo img {
    transform: scale(1.03);
}

/* Text under fotot */
.jtm-person-card h3.elementor-heading-title {
    transition: color 200ms ease;
}
.jtm-person-card:hover h3.elementor-heading-title {
    color: var(--jtm-copper) !important;
}

/* Kontakt-länkar i person-korten */
.jtm-person-card a {
    color: var(--jtm-ink);
    text-decoration: none;
    transition: color 150ms ease;
}
.jtm-person-card a:hover {
    color: var(--jtm-copper);
}

/* ============================================================
   SSG-inspirerade sektionstransformationer
   Kunden inspirerad av ssg.nu — luftig premium industri-look
   ============================================================ */

/* --- 1. Materialgrid → kort-look med subtil ram och lyft-hover --- */
.jtm-sec-materials {
    padding-block: clamp(6rem, 4rem + 8vw, 12rem) !important;
}
.jtm-sec-materials .jtm-material-grid {
    gap: 32px !important;
    row-gap: 40px !important;
}
.jtm-material-cell {
    position: relative;
    padding: 40px 32px !important;
    border-top: 1px solid var(--jtm-line-light);
    background: transparent;
    transition: background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.jtm-material-cell::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--jtm-copper);
    transition: width 300ms ease;
}
.jtm-material-cell:hover {
    background: rgba(15, 30, 48, 0.02);
    transform: translateY(-4px);
}
.jtm-material-cell:hover::before {
    width: 100%;
}
/* Nummer större och mer prominent */
.jtm-material-cell > .e-con-inner > .elementor-widget-heading:first-child .elementor-heading-title,
.jtm-material-cell > .elementor-widget-heading:first-child .elementor-heading-title {
    font-size: 1.5rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    margin-bottom: 16px !important;
}
/* Rubrik under nummer får rejält space */
.jtm-material-cell .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
    font-size: 1.75rem !important;
    line-height: 1.15em !important;
    margin-bottom: 12px !important;
}

/* --- 2. Process-grid på Hem → mer luftig med större typografi --- */
.jtm-sec-process-compact {
    padding-block: clamp(6rem, 4rem + 8vw, 12rem) !important;
}
.jtm-process-cell {
    padding: 32px 0 !important;
    transition: border-color 300ms ease, padding-left 300ms ease;
    position: relative;
}
.jtm-process-cell::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 2px;
    background: var(--jtm-copper);
    transition: width 400ms ease;
}
.jtm-process-cell:hover::after {
    width: 60px;
}
/* Nummer "01/06" större och mer framträdande */
.jtm-process-cell .elementor-widget-heading:first-child .elementor-heading-title {
    font-size: 1.125rem !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 20px !important;
}
/* Steg-namn större */
.jtm-process-cell .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
    font-size: 1.625rem !important;
    line-height: 1.15em !important;
    margin-bottom: 12px !important;
}

/* --- 3. Split-sektionen "Varför oss" → bilden dominerar, text lugnare --- */
.jtm-sec-bild-varden {
    padding-block: 0 !important;
    min-height: 90vh !important;
}
.jtm-split-image {
    min-height: 70vh !important;
    position: relative;
}
.jtm-split-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,30,48,0) 40%, rgba(15,30,48,0.35) 100%);
    pointer-events: none;
}
.jtm-split-content {
    padding: clamp(4rem, 3rem + 4vw, 8rem) clamp(2rem, 2rem + 3vw, 6rem) !important;
}

/* --- 4. Trust/certifieringssektionen → luftigare --- */
.jtm-sec-trust {
    padding-block: clamp(5rem, 3rem + 6vw, 9rem) !important;
}
.jtm-cert-row {
    gap: 48px !important;
    align-items: center !important;
}

/* --- 5. CTA-sektionen → större rubrik, mer whitespace --- */
.jtm-sec-cta {
    padding-block: clamp(6rem, 4rem + 10vw, 14rem) !important;
}
.jtm-sec-cta .elementor-heading-title {
    font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem) !important;
    line-height: 1.05em !important;
    letter-spacing: -0.02em !important;
    max-width: 20ch;
    margin-inline: auto;
}

/* --- 6. Hem "Sedan 1984"-block → större kontrast och statement-känsla --- */
/* Sec 2 container behöver mer luft */
.elementor-widget-heading .jtm-eyebrow.elementor-heading-title,
.jtm-eyebrow .elementor-heading-title {
    font-size: 0.875rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    opacity: 0.88;
}

/* --- 7. Sektionsrubriker överlag → tightare tracking, bättre skala --- */
.jtm-sec-materials .elementor-widget-heading:not(.jtm-eyebrow):first-of-type .elementor-heading-title,
.jtm-sec-process-compact .elementor-widget-heading:not(.jtm-eyebrow):first-of-type .elementor-heading-title,
.jtm-sec-trust .elementor-widget-heading:not(.jtm-eyebrow):first-of-type .elementor-heading-title {
    font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1em !important;
}

/* --- 8. Subtle fade-in animation på scroll (mjuk entrance) --- */
@media (prefers-reduced-motion: no-preference) {
    .jtm-material-cell,
    .jtm-process-cell,
    .jtm-sec-cta .elementor-widget-heading,
    .jtm-sec-cta .elementor-widget-text-editor {
        opacity: 0;
        transform: translateY(24px);
        animation: jtmFadeUp 800ms ease-out forwards;
    }
    .jtm-material-cell { animation-delay: 100ms; }
    .jtm-material-cell:nth-child(2) { animation-delay: 200ms; }
    .jtm-material-cell:nth-child(3) { animation-delay: 300ms; }
    .jtm-material-cell:nth-child(4) { animation-delay: 400ms; }
    .jtm-process-cell { animation-delay: 100ms; }
    .jtm-process-cell:nth-child(2) { animation-delay: 200ms; }
    .jtm-process-cell:nth-child(3) { animation-delay: 300ms; }
    .jtm-process-cell:nth-child(4) { animation-delay: 400ms; }
    .jtm-process-cell:nth-child(5) { animation-delay: 500ms; }
    .jtm-process-cell:nth-child(6) { animation-delay: 600ms; }
}
@keyframes jtmFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 9. Inline "Läs mer →"-länkstil (ssg-inspiration för sekundära CTA) --- */
.jtm-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jtm-ink);
    font-family: "Sora", sans-serif;
    font-weight: 500;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--jtm-copper);
    transition: gap 200ms ease, color 200ms ease;
}
.jtm-link-inline:hover {
    gap: 12px;
    color: var(--jtm-copper);
}

/* --- 10. Bättre bild-presentation i split-sektioner (fyller hela sitt utrymme) --- */
.jtm-split-image .elementor-widget-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Responsiv finslip --- */
@media (max-width: 767px) {
    .jtm-material-cell {
        padding: 32px 24px !important;
    }
    .jtm-process-cell {
        padding: 24px 0 !important;
    }
    .jtm-sec-materials,
    .jtm-sec-process-compact,
    .jtm-sec-cta {
        padding-block: clamp(4rem, 3rem + 4vw, 6rem) !important;
    }
}

.jtm-process-cell .elementor-widget-text-editor:last-of-type {
    margin-top: auto !important;
    padding-bottom: 0;
}
/* Materialgrid: samma sak */
.jtm-material-grid,
.jtm-material-grid-4col {
    align-items: stretch !important;
}
.jtm-material-cell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    align-self: stretch !important;
}
.jtm-material-cell > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

/* ============================================================
   Process/Material grid — KONSEKVENT rad-alignment via CSS Grid
   Löser problemet att cellernas underlines hamnar på olika höjd
   ============================================================ */
@media (min-width: 768px) {
    .jtm-process-grid-4col.e-con-full,
    .jtm-process-grid-4col.e-con,
    .jtm-material-grid-4col.e-con-full,
    .jtm-material-grid-4col.e-con {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 32px !important;
    }
    .jtm-process-grid-4col > .jtm-process-cell,
    .jtm-material-grid-4col > .jtm-material-cell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    /* Inner container: full höjd + kolumn-flex så sista widget kan tryckas ner */
    .jtm-process-cell > .e-con-inner,
    .jtm-material-cell > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        height: auto !important;
        width: 100% !important;
    }
    /* Sista text-widget trycks till botten så underlines alignerar */
    .jtm-process-cell > .e-con-inner > .elementor-widget-text-editor:last-child,
    .jtm-material-cell > .e-con-inner > .elementor-widget-text-editor:last-child {
        margin-top: auto !important;
    }
}

/* Tablet: 2-kol grid */
@media (min-width: 640px) and (max-width: 767px) {
    .jtm-process-grid-4col.e-con-full,
    .jtm-process-grid-4col.e-con,
    .jtm-material-grid-4col.e-con-full,
    .jtm-material-grid-4col.e-con {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .jtm-process-grid-4col > .jtm-process-cell,
    .jtm-material-grid-4col > .jtm-material-cell {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   Process page — inbäddade Image-widgets per processrad
   Native Elementor: varje rad har en Image-widget med klass
   jtm-row-image. CSS gör den osynlig tills raden hovras.
   ============================================================ */
.jtm-process-row {
    position: relative;
    transition: padding-left 300ms ease, background-color 300ms ease;
    cursor: default;
}
.jtm-process-row:hover {
    padding-left: 16px !important;
    background-color: rgba(15, 30, 48, 0.015);
}
.jtm-process-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--jtm-copper);
    transition: width 300ms ease;
    z-index: 1;
}
.jtm-process-row:hover::before {
    width: 3px;
}
/* Reservera plats till höger så texten inte döljs bakom bilden.
   Raden har en inbäddad e-con inuti — padding-right på raden trycker
   hela flödet inåt. Bilden är absolute-positionerad så den påverkas inte. */
@media (min-width: 900px) {
    .jtm-process-row {
        padding-right: 380px !important;
    }
}

/* Rad-inbäddad bild — absolut positionerad i sin egen rad, dold tills hover */
.jtm-process-row .jtm-row-image {
    position: absolute !important;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%) translateX(30px);
    width: min(24vw, 300px);
    aspect-ratio: 1 / 1;         /* Kvadrat 1:1 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease, transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 5;
    box-shadow: 0 24px 60px rgba(15, 30, 48, 0.35), 0 2px 8px rgba(15, 30, 48, 0.15);
    border-radius: 5px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}
.jtm-process-row .jtm-row-image .elementor-widget-container,
.jtm-process-row .jtm-row-image .elementor-image {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 5px;
    overflow: hidden;
}
.jtm-process-row .jtm-row-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 5px !important;   /* överrider global border-radius: 0 */
}
.jtm-process-row:hover .jtm-row-image {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Dölj bilderna på mobil (hover finns inte, tar för mycket plats) */
@media (hover: none), (max-width: 899px) {
    .jtm-process-row .jtm-row-image { display: none !important; }
    .jtm-process-row > .e-con-inner,
    .jtm-process-row > .elementor-widget-wrap {
        max-width: 100%;
    }
    .jtm-process-row:hover {
        padding-left: 0 !important;
        background-color: transparent;
    }
}

/* ============================================================
   MOBIL & TABLET-ANPASSNING
   Header + footer är redan bra (via separata media-queries ovan).
   Detta block täcker undersidornas sektioner.
   ============================================================ */

/* --------- TABLET (max-width: 1023px) --------- */
@media (max-width: 1023px) {
    /* Split-sektioner: stackar image + content vertikalt */
    .jtm-section-split,
    .jtm-sec-bild-varden {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }
    .jtm-split-image {
        width: 100% !important;
        min-height: 45vh !important;
        max-height: 60vh !important;
    }
    .jtm-split-content {
        width: 100% !important;
        min-height: auto !important;
        padding: clamp(3rem, 4vw, 5rem) clamp(1.5rem, 3vw, 3rem) !important;
    }

    /* Hero-rubrik lite mindre på tablet */
    .jtm-hero .jtm-hero-title .elementor-heading-title {
        font-size: clamp(3rem, 6vw + 1rem, 5rem) !important;
    }

    /* Two-col layouts (Om oss) stackar */
    .jtm-layout-twocol {
        flex-direction: column !important;
    }
    .jtm-layout-twocol > .e-con,
    .jtm-layout-twocol > .e-con-full {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Legeringstabell (Tjänster produktionsresurser): bild max höjd */
    .jtm-sec-legeringstabell .elementor-widget-image img {
        max-height: 400px;
        object-fit: contain;
    }
}

/* --------- MOBIL (max-width: 767px) --------- */
@media (max-width: 767px) {
    /* Hero — mindre höjd, mindre padding, mindre rubrik */
    .jtm-hero {
        min-height: 70svh !important;
        padding: 4rem 1.25rem !important;
    }
    .jtm-hero .jtm-hero-title .elementor-heading-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }
    .jtm-hero .jtm-hero-lead {
        font-size: 1.0625rem !important;
        line-height: 1.5 !important;
    }

    /* Page hero (undersidor) */
    .jtm-page-hero {
        min-height: 50svh !important;
        padding: 4rem 1.25rem !important;
    }
    .jtm-page-hero .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.75rem, 7vw, 2.75rem) !important;
        line-height: 1.1 !important;
    }

    /* Material- och process-grids stackar helt (1 kolumn) */
    .jtm-material-grid,
    .jtm-material-grid-4col,
    .jtm-process-grid,
    .jtm-process-grid-4col {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .jtm-material-cell,
    .jtm-process-cell {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
    }
    .jtm-material-cell::before {
        width: 32px !important;
    }

    /* Split image: kortare på mobil */
    .jtm-split-image {
        min-height: 280px !important;
        max-height: 380px !important;
    }

    /* CTA-sektionen: mindre padding, mindre rubrik */
    .jtm-sec-cta {
        padding: 4rem 1.25rem !important;
    }
    .jtm-sec-cta .elementor-heading-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.15 !important;
    }
    .jtm-sec-cta .elementor-widget-text-editor {
        font-size: 1rem !important;
    }

    /* Sektioner med mycket padding: reducera */
    .jtm-sec-materials,
    .jtm-sec-process-compact,
    .jtm-sec-trust {
        padding-block: 3.5rem !important;
        padding-inline: 1.25rem !important;
    }

    /* Sektionsrubriker överlag */
    .jtm-sec-materials .elementor-widget-heading .elementor-heading-title,
    .jtm-sec-process-compact .elementor-widget-heading .elementor-heading-title,
    .jtm-sec-trust .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    }

    /* Process-rader (Process-sidan): full-width, ingen padding-right,
       inga inbäddade bilder (redan hanterat) */
    .jtm-process-row {
        padding: 1.5rem 1rem !important;
    }
    .jtm-process-row .elementor-heading-title {
        font-size: 1.375rem !important;
    }

    /* Two-col layouts helt vertikala */
    .jtm-layout-twocol,
    .jtm-layout-centered {
        padding: 3rem 1.25rem !important;
    }

    /* Certifikatsraden: fullbredd staplat (om det finns kvar någonstans) */
    .jtm-cert-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .jtm-cert-row > .e-con,
    .jtm-cert-row > .e-con-full {
        width: 100% !important;
    }

    /* Knappar mindre men fortfarande tryckbara */
    .elementor-button {
        font-size: 0.9375rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Eyebrows lite mindre */
    .jtm-eyebrow .elementor-heading-title,
    .elementor-widget-heading.jtm-eyebrow .elementor-heading-title {
        font-size: 0.75rem !important;
    }

    /* Alla brödtextfält: säker minsta lässtorlek 15px */
    .elementor-widget-text-editor {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
}

/* --------- Extra små telefoner (max-width: 480px) --------- */
@media (max-width: 480px) {
    .jtm-hero .jtm-hero-title .elementor-heading-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }
    .jtm-page-hero .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
    }
    .jtm-sec-cta .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
    /* Knappar sida-vid-sida blir för trånga → stacka */
    .jtm-hero .e-con.e-flex,
    .elementor-widget-button + .elementor-widget-button {
        flex-wrap: wrap;
    }
}

/* ============================================================
   RUBRIK-CAP på mobil & tablet
   Högre specificitet (body .elementor …) för att övervinna Elementors
   per-widget font-size settings som annars läcker in på små skärmar.
   ============================================================ */

/* --- TABLET 768–1023 px --- */
@media (min-width: 768px) and (max-width: 1023px) {
    body .elementor .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: break-word;
    }
    body .elementor .jtm-hero .jtm-hero-title .elementor-heading-title,
    body .elementor .jtm-page-hero .elementor-widget-heading:not(.jtm-eyebrow) .elementor-heading-title {
        font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
    }
    body .elementor .jtm-eyebrow .elementor-heading-title,
    body .elementor .elementor-widget-heading.jtm-eyebrow .elementor-heading-title {
        font-size: 0.8125rem !important;
    }
}

/* --- MOBIL 481–767 px --- */
@media (max-width: 767px) {
    body .elementor .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }
    body .elementor .jtm-hero .jtm-hero-title .elementor-heading-title,
    body .elementor .jtm-page-hero .elementor-widget-heading:not(.jtm-eyebrow) .elementor-heading-title {
        font-size: clamp(1.75rem, 7vw, 2.375rem) !important;
    }
    body .elementor .jtm-eyebrow .elementor-heading-title,
    body .elementor .elementor-widget-heading.jtm-eyebrow .elementor-heading-title {
        font-size: 0.75rem !important;
    }
    body .elementor .jtm-process-cell .elementor-widget-heading:first-child .elementor-heading-title {
        font-size: 0.875rem !important;
    }
    body .elementor .jtm-material-cell .elementor-widget-heading:first-child .elementor-heading-title {
        font-size: 1.125rem !important;
    }
    body .elementor .elementor-widget-text-editor {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
        max-width: 100%;
    }
    /* Säkerhet: långa CTA-sektionsrubriker som "Bearbetat, monterat, provtryckt." */
    body .elementor .jtm-sec-cta .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2.125rem) !important;
    }
}

/* --- Extra små 481 px och mindre --- */
@media (max-width: 480px) {
    body .elementor .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
    }
    body .elementor .jtm-hero .jtm-hero-title .elementor-heading-title,
    body .elementor .jtm-page-hero .elementor-widget-heading:not(.jtm-eyebrow) .elementor-heading-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }
    body .elementor .jtm-sec-cta .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.375rem, 6vw, 1.875rem) !important;
    }
}


/* ============================================================
   CookieShield banner — färg-overrides
   Plugin-inställningar ger dark navy text på dark bg — forcera vit
   ============================================================ */

/* Tab-labels (Samtycke / Information / Om) */
.cookieshield-tab,
.cookieshield-banner .cookieshield-tab {
    color: #FFFFFF !important;
    opacity: 0.7;
}
.cookieshield-tab.is-active,
.cookieshield-banner .cookieshield-tab.is-active {
    color: #FFFFFF !important;
    opacity: 1;
}

/* Banner-titel: "Denna webbplats använder cookies" */
.cookieshield-banner__title,
.cookieshield-banner .cookieshield-banner__title {
    color: #FFFFFF !important;
}

/* Panel-content headings (om det finns fler rubriker inuti tabbarna) */
.cookieshield-panel-content h2,
.cookieshield-panel-content h3,
.cookieshield-panel-content h4 {
    color: #FFFFFF !important;
}

/* Kategori-labels (Nödvändig/Inställningar/Statistik/Marknadsföring) */
.cookieshield-cat-cell__label,
.cookieshield-banner .cookieshield-cat-cell__label {
    color: #FFFFFF !important;
}

/* Extra säkerhet: alla headings i bannern → vita */
.cookieshield-banner h1,
.cookieshield-banner h2,
.cookieshield-banner h3,
.cookieshield-banner h4,
.cookieshield-banner h5,
.cookieshield-banner h6 {
    color: #FFFFFF !important;
}

/* Cookie banner bakgrund → Armaturteknik navy */
.cookieshield-banner__dialog,
.cookieshield-banner .cookieshield-banner__dialog {
    background-color: #0F1E30 !important;
}
/* Om overlay behöver stå ut mot bakgrunden */
.cookieshield-banner__overlay {
    background-color: rgba(10, 26, 42, 0.85) !important;
}

/* ============================================================
   Mobil: enhetlig sido-gutter (BARA horisontell padding)
   Inga andra properties rörs — säkert för scroll och layout.
   ============================================================ */
@media (max-width: 767px) {
    /* Alla top-level containers får samma indent —
       UNDANTAG: split-sektioner (jtm-section-split, jtm-sec-bild-varden)
       hanteras native via Elementor JSON mobile-padding */
    [data-elementor-type="wp-page"] > .elementor-element.e-con:not(.jtm-section-split):not(.jtm-sec-bild-varden) {
        padding-inline: 24px !important;
    }
    /* Nested containers får ingen extra padding — UNDANTAG: jtm-split-content
       som hanteras native via Elementor JSON */
    [data-elementor-type="wp-page"] > .elementor-element.e-con .elementor-element.e-con:not(.jtm-split-content):not(.jtm-split-image):not(.jtm-process-row):not(.jtm-material-cell):not(.jtm-process-cell) {
        padding-inline: 0 !important;
    }
    /* Undantag: material- och process-celler behåller egen indre padding */
    .jtm-material-cell,
    .jtm-process-cell {
        padding-inline: 20px !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    [data-elementor-type="wp-page"] > .elementor-element.e-con:not(.jtm-section-split):not(.jtm-sec-bild-varden) {
        padding-inline: 40px !important;
    }
    [data-elementor-type="wp-page"] > .elementor-element.e-con .elementor-element.e-con:not(.jtm-split-content):not(.jtm-split-image):not(.jtm-process-row):not(.jtm-material-cell):not(.jtm-process-cell) {
        padding-inline: 0 !important;
    }
}

/* ============================================================
   Justeringar från audit (v3 — brute force specificitet)
   Använder högsta möjliga specificitet för att slå Elementors
   per-widget CSS på 81da750 m.fl. som sätter padding-inline: 64px.
   ============================================================ */

/* Fix 1: Split-content — text ska ha 24px indent på mobil */
@media (max-width: 1023px) {
    html body.elementor-default .elementor-element.jtm-split-content,
    html body.elementor-default .e-con.jtm-split-content,
    html body .elementor-125 .elementor-element.jtm-split-content,
    html body .elementor-124 .elementor-element.jtm-split-content,
    html body .elementor-125 .elementor-element.e-con.jtm-split-content,
    html body .elementor-124 .elementor-element.e-con.jtm-split-content,
    html body .elementor-7 .elementor-element.jtm-split-content,
    html body .elementor-126 .elementor-element.jtm-split-content,
    html body .elementor-328 .elementor-element.jtm-split-content {
        --padding-left: 24px !important;
        --padding-right: 24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Fix 3: Process row hover — text puttas ut från guldlinjen */
html body .elementor .jtm-process-row:hover,
html body.elementor-default .elementor-126 .elementor-element.jtm-process-row:hover {
    padding-left: 48px !important;
    --padding-left: 48px !important;
}
/* På mobil MÅSTE vi också overrida rådande padding-inline: 16px */
@media (max-width: 767px) {
    html body .elementor .jtm-process-row:hover,
    html body .elementor-126 .elementor-element.jtm-process-row:hover {
        padding-left: 40px !important;
        --padding-left: 40px !important;
    }
}
/* Guldlinjen tydligare + börjar bakom padding */
html body .elementor .jtm-process-row:hover::before {
    width: 4px !important;
    background: var(--jtm-copper) !important;
}

/* Fix 1a: Top-level split-sektions container får 0 sido-padding
   så navy-bg går kant-till-kant (annars skapar 24px top-level-padding
   ett vitt gap på varje sida). Detta är regeln jag råkade radera. */
@media (max-width: 1023px) {
    html body .elementor [data-elementor-type="wp-page"] > .elementor-element.jtm-section-split,
    html body .elementor [data-elementor-type="wp-page"] > .elementor-element.jtm-sec-bild-varden,
    html body .elementor [data-elementor-type="wp-page"] > .elementor-element.e-con.jtm-section-split {
        padding-left: 0 !important;
        padding-right: 0 !important;
        --padding-left: 0 !important;
        --padding-right: 0 !important;
    }
}

/* ============================================================
   Process-rader: STÄNG AV all hover-effekt på mobil och tablet
   Effekten (guldlinje + padding-shift + bakgrundstoning) ska bara
   ske på desktop där hover är en meningsfull interaktion.
   ============================================================ */
@media (max-width: 1023px) {
    /* Hover/active/focus — matchar Fix 3-selektorns specificitet med
       body.elementor-default .elementor-126 .elementor-element så
       cascaden vinner (samma specificitet, senare regel vinner). */
    html body.elementor-default .elementor-126 .elementor-element.jtm-process-row:hover,
    html body.elementor-default .elementor-126 .elementor-element.jtm-process-row:active,
    html body.elementor-default .elementor-126 .elementor-element.jtm-process-row:focus,
    html body .elementor-126 .elementor-element.jtm-process-row:hover,
    html body .elementor-126 .elementor-element.jtm-process-row:active,
    html body .elementor-126 .elementor-element.jtm-process-row:focus,
    html body .elementor .jtm-process-row:hover,
    html body .elementor .jtm-process-row:active,
    html body .elementor .jtm-process-row:focus,
    html body .jtm-process-row:hover,
    html body .jtm-process-row:active,
    html body .jtm-process-row:focus {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
        --padding-top: 24px !important;
        --padding-bottom: 24px !important;
        background-color: transparent !important;
    }
    /* Guldlinjen får aldrig visa sig alls */
    html body .elementor .jtm-process-row::before,
    html body .elementor .jtm-process-row:hover::before,
    html body .elementor .jtm-process-row:active::before,
    html body .elementor .jtm-process-row:focus::before {
        width: 0 !important;
        display: none !important;
        content: none !important;
    }
    /* Ta bort padding-transitions så inget "skakar" på tap */
    html body .elementor .jtm-process-row {
        transition: none !important;
    }
}