/* KZAB — Karlsson & Zetterlund Entreprenad */
/* Design: Local Trust / Markhantverk — Revision 1 */
/* static-premium */

/* ─── @font-face — Självhostad Poppins ──────────────────────────────────── */
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ─── Reset & Base ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:'Poppins',sans-serif; font-weight:400; line-height:1.7; color:#162219; background:#F7F5F0; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
address { font-style:normal; }
svg { display:block; }

/* ─── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --green:       #026B04;
  --green-dk:    #025803;
  --dark:        #011C00;
  --stone:       #A28F72;
  --cream:       #F7F5F0;
  --cream-alt:   #EEE9DF;
  --mid:         #E8E5DC;
  --text:        #162219;
  --text-muted:  #4A5241;
  --text-light:  #6B7562;
  --border:      #E0DBD3;
  --white:       #FFFFFF;
  --green-tint:  rgba(2,107,4,0.06);
  --dark-scrim-70: rgba(1,28,0,0.70);
  --dark-scrim-50: rgba(1,28,0,0.50);
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:999px;
  --shadow-xs:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-green:0 6px 24px rgba(2,107,4,0.22);
  --container: 1200px;
  --gutter:    24px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
}

/* ─── Container ─────────────────────────────────────────────────────────── */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section-pad { padding:var(--sp-24) 0; }
.section-pad-sm { padding:var(--sp-16) 0; }

/* ─── Typography ────────────────────────────────────────────────────────── */
h1 { font-size:clamp(2.125rem,5.2vw,3.625rem); font-weight:700; line-height:1.1; }
h2 { font-size:clamp(1.5rem,3.5vw,2.375rem); font-weight:700; line-height:1.2; }
h3 { font-size:clamp(1.0625rem,2vw,1.3125rem); font-weight:600; line-height:1.35; }
p  { font-size:1rem; line-height:1.75; }
.section-lead { font-size:1.0625rem; line-height:1.65; color:var(--text-muted); max-width:640px; }

/* ─── Kicker ────────────────────────────────────────────────────────────── */
.kicker {
  display:inline-block; padding:5px 12px;
  background:var(--mid); border-radius:var(--radius-full);
  font-size:0.6875rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--sp-4);
}
.kicker-light { background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:14px 28px; border-radius:var(--radius-sm); font-family:inherit;
  font-weight:600; font-size:0.9375rem; white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
  border:2px solid transparent; cursor:pointer; text-decoration:none;
}
.btn:hover { transform:scale(1.02); }
.btn-lg { padding:16px 32px; font-size:1rem; }
.btn-sm { padding:10px 20px; font-size:0.875rem; }
.btn-primary { background:var(--green); color:var(--white); border-color:var(--green); }
.btn-primary:hover { background:var(--green-dk); border-color:var(--green-dk); box-shadow:var(--shadow-green); }
.btn-outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.65); }
.btn-outline:hover { background:rgba(255,255,255,0.12); border-color:var(--white); }
.btn-outline-dark { background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline-dark:hover { background:var(--green); color:var(--white); box-shadow:var(--shadow-green); }
.btn-outline-white { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.8); }
.btn-outline-white:hover { background:rgba(255,255,255,0.15); border-color:var(--white); }
.btn-ghost-white { background:transparent; color:rgba(255,255,255,0.9); border-color:transparent; }
.btn-ghost-white:hover { color:var(--white); background:rgba(255,255,255,0.08); }
.btn svg { width:18px; height:18px; flex-shrink:0; transition:transform .15s ease; }
.btn:hover svg.arrow { transform:translateX(3px); }

/* ─── ════════ MOTION SYSTEM ════════ ─────────────────────────────────── */

/* JS class gate — prevents flash of invisible content */
/* @keyframe 1: drawArch */
@keyframes drawArch {
  to { stroke-dashoffset:0; }
}
/* @keyframe 2: fadeUp */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 3: slideRight — element slides from left */
@keyframes slideRight {
  from { opacity:0; transform:translateX(-22px); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 4: slideLeft — element slides from right */
@keyframes slideLeft {
  from { opacity:0; transform:translateX(22px); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 5: scaleIn */
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 6: popIn — bounce */
@keyframes popIn {
  0%   { transform:scale(0);    opacity:0; }
  55%  { transform:scale(1.14); opacity:1; }
  75%  { transform:scale(0.96); }
  100% { transform:scale(1);    opacity:1; }
}
/* @keyframe 7: clipOpen (from left) */
@keyframes clipOpenLeft {
  from { clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { clip-path:polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
}
/* @keyframe 8: fadeSlideIn — flik-byte */
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateX(14px); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 9: drawLine — svg stroke */
@keyframes drawLine {
  to { stroke-dashoffset:0; }
}
/* @keyframe 10: soilSlide — skiktdiagram lager */
@keyframes soilSlide {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:none; }
}
/* @keyframe 11: stickySlideUp */
@keyframes stickySlideUp {
  from { transform:translateY(100%); }
  to   { transform:none; }
}
/* @keyframe 12: arrowPulse */
@keyframes arrowPulse {
  0%,100% { transform:translateX(0); }
  50%      { transform:translateX(4px); }
}
/* @keyframe 13: drawVertical — mobil processlinje */
@keyframes drawVertical {
  from { transform:scaleY(0); }
  to   { transform:scaleY(1); }
}
/* @keyframe 14: shimmer — laddningseffekt */
@keyframes shimmer {
  from { background-position:200% 0; }
  to   { background-position:-200% 0; }
}

/* ─── Scroll-reveal system ──────────────────────────────────────────────── */
html.js [data-reveal] {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease-out, transform .55s ease-out;
}
html.js [data-reveal="slide-right"] { transform:translateX(-22px); }
html.js [data-reveal="slide-left"]  { transform:translateX(22px); }
html.js [data-reveal="scale-in"]    { transform:scale(0.94); }
html.js [data-reveal="clip-open"]   {
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
  transition:clip-path .85s cubic-bezier(0.4,0,0.2,1), opacity .5s;
  opacity:0;
}
html.js [data-reveal="pop-in"] { transform:scale(0); opacity:0; transition:opacity .4s, transform .4s cubic-bezier(0.34,1.56,0.64,1); }

html.js [data-reveal].revealed  { opacity:1; transform:none; }
html.js [data-reveal="clip-open"].revealed {
  clip-path:polygon(0 0, 95% 0, 100% 100%, 5% 100%);
  opacity:1;
}
html.js [data-reveal="pop-in"].revealed { opacity:1; transform:none; }

/* Click-target ancestors must never be blocked by reveal animation */
html.js details[data-reveal],
html.js .contact-form-wrap[data-reveal] {
  opacity:1;
  transform:none;
}

/* Stagger delays */
[data-delay="50"]  { transition-delay:.05s !important; }
[data-delay="100"] { transition-delay:.1s !important; }
[data-delay="150"] { transition-delay:.15s !important; }
[data-delay="200"] { transition-delay:.2s !important; }
[data-delay="250"] { transition-delay:.25s !important; }
[data-delay="300"] { transition-delay:.3s !important; }
[data-delay="400"] { transition-delay:.4s !important; }
[data-delay="500"] { transition-delay:.5s !important; }
[data-delay="600"] { transition-delay:.6s !important; }

/* reduced-motion — allt omedelbart synligt */
@media (prefers-reduced-motion:reduce) {
  html.js [data-reveal],html.js [data-reveal].revealed { opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  html.js .soil-layer.soil-active { opacity:1!important; transform:none!important; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ─── HEADER ────────────────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:310;
  height:80px;
  background:rgba(247,245,240,0.0);
  transition:height .25s ease-out, background .25s ease-out, box-shadow .25s;
  border-bottom:1px solid transparent;
}
.site-header[data-scrolled] {
  height:60px;
  background:rgba(247,245,240,0.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 16px rgba(0,0,0,0.07);
  border-color:var(--border);
}
.header-inner {
  display:flex; align-items:center; gap:var(--sp-6); height:100%;
}
.header-logo {
  display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; text-decoration:none;
}
.header-logo img { width:auto; height:44px; border-radius:0; object-fit:contain; }
.site-header[data-scrolled] .header-logo img { height:38px; }

.header-nav { display:flex; align-items:center; gap:0; margin-left:auto; }
.header-nav a {
  padding:8px 14px; font-size:0.875rem; font-weight:500; color:var(--text);
  transition:color .15s; white-space:nowrap;
  border-radius:var(--radius-sm);
}
.header-nav a:hover { color:var(--green); }

.header-contacts { display:flex; flex-direction:column; gap:2px; margin-left:var(--sp-4); }
.header-tel { font-size:0.75rem; font-weight:500; color:var(--text); white-space:nowrap; transition:color .15s; }
.header-tel:hover { color:var(--green); }

.header-cta { margin-left:var(--sp-4); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; padding:4px; border-radius:var(--radius-sm); }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .25s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35);
  z-index:290; opacity:0; transition:opacity .25s; pointer-events:none;
}
.mobile-nav-overlay.open { opacity:1; pointer-events:auto; }
.mobile-nav {
  display:none; position:fixed; top:80px; right:0; bottom:0; width:min(320px,88vw);
  background:var(--white); z-index:300; padding:var(--sp-6) var(--sp-6);
  overflow-y:auto;
}
.mobile-nav.open { display:block; }
.mobile-nav-close { display:flex; justify-content:flex-end; margin-bottom:var(--sp-8); }
.mobile-nav-close button { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.mobile-nav ul { display:flex; flex-direction:column; gap:0; }
.mobile-nav ul li a { display:block; padding:14px 0; font-size:1.125rem; font-weight:500; border-bottom:1px solid var(--border); }
.mobile-nav ul li a:hover { color:var(--green); }
.mobile-nav-contacts { margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-3); }
.mobile-nav-contacts a { font-size:1rem; font-weight:500; color:var(--green); }
.mobile-nav .btn { margin-top:var(--sp-6); width:100%; justify-content:center; }

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100svh; min-height:100vh;
  min-height:clamp(580px,100svh,900px);
  display:flex; align-items:center;
  overflow:hidden;
  margin-top:0; /* header is fixed, hero starts at top */
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg img {
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
/* Scrim: left dark → right transparent */
.hero-bg::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(1,28,0,0.75) 0%, rgba(1,28,0,0.52) 45%, rgba(1,28,0,0.20) 70%, transparent 100%);
}

/* Markprofil arch SVG */
.hero-arch {
  position:absolute; bottom:60px; left:0; right:0;
  width:100%; height:80px; z-index:1; overflow:visible;
  pointer-events:none;
}
.hero-arch path {
  stroke:#026B04; stroke-width:2.5; fill:none; opacity:0.22;
  stroke-dasharray:1700; stroke-dashoffset:1700;
}
html.js .hero-arch path {
  animation:drawArch 1s ease-out 0.35s forwards;
}

/* Arc bottom transition */
.hero-arc-bottom {
  position:absolute; bottom:0; left:0; right:0; height:70px; z-index:2;
  background:var(--cream);
  clip-path:ellipse(55% 100% at 50% 100%);
  pointer-events:none;
}

.hero-content {
  position:relative; z-index:3; padding-top:80px;
  display:grid; align-items:center; min-height:inherit; width:100%;
}
.hero-text {
  max-width:580px; padding:var(--sp-16) 0 var(--sp-20);
}
.hero-text .kicker {
  background:rgba(232,229,220,0.2); color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.18);
}
.hero-text h1 { color:var(--white); margin:var(--sp-3) 0 var(--sp-5); }
.hero-lead { color:rgba(240,236,227,0.92); font-size:1.0625rem; margin-bottom:var(--sp-8); max-width:480px; }
.hero-ctas { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-8); }
.hero-trust { display:flex; flex-direction:column; gap:var(--sp-3); }
.hero-trust li {
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:0.875rem; color:rgba(240,236,227,0.80);
}
.hero-trust svg { width:18px; height:18px; flex-shrink:0; color:var(--green); }

/* Mobil telefon-knappar */
.hero-tel-mobil { display:none; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); }
.hero-tel-mobil a { justify-content:center; }

/* ─── SVG SPRITE (hidden) ───────────────────────────────────────────────── */
.svg-sprite { display:none; position:absolute; width:0; height:0; overflow:hidden; }

/* ─── TJÄNSTER ──────────────────────────────────────────────────────────── */
.services { background:var(--cream); padding:var(--sp-24) 0 var(--sp-20); }
.services-header { text-align:center; margin-bottom:var(--sp-10); }
.services-header h2 { margin-top:var(--sp-3); }

/* Tab navigation */
.tabs-wrapper { position:relative; }
.tabs-nav {
  display:flex; gap:0; position:relative;
  border-bottom:2px solid var(--border);
  margin-bottom:var(--sp-10);
  overflow-x:auto; scrollbar-width:none;
}
.tabs-nav::-webkit-scrollbar { display:none; }
.tab-btn {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:14px 20px; font-size:0.9375rem; font-weight:500; color:var(--text-muted);
  white-space:nowrap; position:relative; flex-shrink:0;
  transition:color .2s;
  scroll-snap-align:start;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--green); }
.tab-btn svg { width:22px; height:22px; flex-shrink:0; }

/* Glider indicator */
.tab-indicator {
  position:absolute; bottom:-2px; height:3px;
  background:var(--green); border-radius:2px 2px 0 0;
  transition:left .25s cubic-bezier(0.4,0,0.2,1), width .25s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}

/* Tab panels */
.tab-panel { visibility:hidden; height:0; overflow:hidden; pointer-events:none; }
.tab-panel.active { visibility:visible; height:auto; overflow:visible; pointer-events:auto; display:block; animation:fadeSlideIn .22s ease-out; }

.tab-content { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:start; }
.tab-text h3 { margin-bottom:var(--sp-4); color:var(--text); }
.tab-text p { color:var(--text-muted); margin-bottom:var(--sp-6); }
.service-includes { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.service-includes li { display:flex; align-items:flex-start; gap:var(--sp-3); font-size:0.9375rem; }
.service-includes svg { width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--green); }

.tab-image { position:relative; }
.tab-image img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }

/* Soil diagram */
.soil-diagram { margin-top:var(--sp-10); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.soil-diagram-title { font-size:0.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); margin-bottom:var(--sp-5); }
.soil-layers { display:flex; flex-direction:column; gap:3px; border-radius:var(--radius-md); overflow:hidden; }
.soil-layer {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:10px var(--sp-4); font-size:0.8125rem; font-weight:500;
}
.soil-layer span { flex:1; }

/* Layer color variants */
.soil-layer[data-layer="surface"]  { background:#D4C9B0; color:#3A3020; }
.soil-layer[data-layer="sand"]     { background:#C8B896; color:#3A3020; }
.soil-layer[data-layer="base"]     { background:#A89678; color:#2A2018; }
.soil-layer[data-layer="gravel"]   { background:#8C7C64; color:#FFFFFF; }
.soil-layer[data-layer="geo"]      { background:#BFD0C0; color:#1A3020; }
.soil-layer[data-layer="concrete"] { background:#C4C4C4; color:#2A2A2A; }
.soil-layer[data-layer="rebar"]    { background:#A8A8A8; color:#2A2A2A; }
.soil-layer[data-layer="asphalt"]  { background:#404040; color:#FFFFFF; }
.soil-layer[data-layer="binder"]   { background:#555555; color:#FFFFFF; }
.soil-layer[data-layer="soil"]     { background:#8B6E4E; color:#FFFFFF; }
.soil-layer[data-layer="bark"]     { background:#9B7B5B; color:#FFFFFF; }
.soil-layer[data-layer="plant"]    { background:#6A9954; color:#FFFFFF; }
.soil-layer[data-layer="plantsoil"]{ background:#7A8C5A; color:#FFFFFF; }

/* Soil layer animation */
html.js .soil-layer.soil-active { opacity:0; transform:translateY(-10px); }
html.js .soil-layer.soil-active.revealed { animation:soilSlide .35s ease-out forwards; }

/* ─── OM OSS ─────────────────────────────────────────────────────────────── */
.about { background:var(--cream-alt); padding:var(--sp-24) 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:center; }
.about-image { overflow:hidden; border-radius:var(--radius-lg); }
.about-image img {
  width:100%; aspect-ratio:5/4; object-fit:cover;
  transition:transform .5s ease;
}
.about-image:hover img { transform:scale(1.03); }

.about-text .kicker { margin-bottom:var(--sp-4); }
.about-text h2 { margin-bottom:var(--sp-5); }
.about-text p { color:var(--text-muted); margin-bottom:var(--sp-5); }
.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-top:var(--sp-8); }
.contact-card {
  padding:var(--sp-5); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--white); box-shadow:var(--shadow-xs);
}
.contact-card h3 { font-size:1rem; margin-bottom:2px; }
.contact-title { font-size:0.8125rem; color:var(--text-light); margin-bottom:var(--sp-4); }
.contact-tel { display:flex; align-items:center; gap:var(--sp-2); font-size:0.9375rem; font-weight:600; color:var(--green); }
.contact-tel svg { width:16px; height:16px; }
.contact-tel:hover { text-decoration:underline; }

/* ─── VARFÖR KZAB ─────────────────────────────────────────────────────────── */
.why-us {
  padding:var(--sp-8) 0;
  position:relative;
}
.why-us-inner {
  background:var(--dark);
  position:relative; overflow:hidden;
  clip-path:polygon(0 4%, 100% 0%, 100% 96%, 0% 100%);
  padding:var(--sp-24) 0;
  margin:-2% 0;
}
.why-us-inner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(2,107,4,0.07) 0%, transparent 65%);
  pointer-events:none;
}
.why-us-header { text-align:center; margin-bottom:var(--sp-12); position:relative; }
.why-us-header h2 { color:var(--white); margin-top:var(--sp-3); }

.usp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); position:relative; }
.usp-card {
  padding:var(--sp-6) var(--sp-5);
  border-left:2px solid rgba(2,107,4,0.45);
  background:rgba(255,255,255,0.03);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.usp-card h3 { color:var(--white); margin:var(--sp-4) 0 var(--sp-3); font-size:1.0625rem; }
.usp-card p { color:rgba(255,255,255,0.65); font-size:0.9375rem; line-height:1.65; }
.usp-icon { width:32px; height:32px; color:var(--green); }
.usp-icon svg { width:32px; height:32px; }

/* ─── PROCESS ─────────────────────────────────────────────────────────────── */
.process { background:var(--cream); padding:var(--sp-24) 0; }
.process-header { text-align:center; margin-bottom:var(--sp-12); }
.process-header h2 { margin-top:var(--sp-3); }
.process-track { position:relative; }

/* SVG line — desktop */
.process-line {
  position:absolute; top:26px; left:0; right:0; width:100%; height:60px;
  overflow:visible; pointer-events:none; z-index:0;
}
.process-path {
  stroke:var(--green); stroke-width:2; fill:none;
  stroke-dasharray:1200; stroke-dashoffset:1200;
  opacity:0.4;
}
.process-line.animate .process-path {
  animation:drawLine 1.3s ease-out forwards;
}

.process-steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-8);
  position:relative; z-index:1;
}
.process-step { text-align:center; padding-top:var(--sp-12); }
.step-number {
  width:52px; height:52px; border-radius:50%;
  background:var(--green); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:700; margin:0 auto var(--sp-5);
  box-shadow:0 4px 12px rgba(2,107,4,0.30);
}
html.js .step-number { transform:scale(0); opacity:0; transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), opacity .35s; }
html.js .step-number.revealed { transform:none; opacity:1; }
.process-step h3 { margin-bottom:var(--sp-3); font-size:1.0625rem; }
.process-step p { color:var(--text-muted); font-size:0.9375rem; }

/* ─── GALLERI ─────────────────────────────────────────────────────────────── */
.gallery { background:var(--cream-alt); padding:var(--sp-24) 0; }
.gallery-header { text-align:center; margin-bottom:var(--sp-10); }
.gallery-header h2 { margin-top:var(--sp-3); }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:280px 280px;
  gap:var(--sp-4);
}
.gallery-item { overflow:hidden; border-radius:var(--radius-md); position:relative; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item--large { grid-column:1/3; grid-row:1/3; }

/* Clip-path variants (animation start states) */
html.js .gallery-item[data-clip="1"] {
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path .9s cubic-bezier(0.4,0,0.2,1), opacity .5s;
  opacity:0;
}
html.js .gallery-item[data-clip="2"] {
  clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
  transition:clip-path .9s cubic-bezier(0.4,0,0.2,1) .1s, opacity .5s .1s;
  opacity:0;
}
html.js .gallery-item[data-clip="3"] {
  clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%);
  transition:clip-path .9s cubic-bezier(0.4,0,0.2,1) .15s, opacity .5s .15s;
  opacity:0;
}
html.js .gallery-item[data-clip="1"].revealed { clip-path:polygon(0 0,100% 0,97% 100%,3% 100%); opacity:1; }
html.js .gallery-item[data-clip="2"].revealed { clip-path:polygon(3% 0,100% 0,100% 100%,0 100%); opacity:1; }
html.js .gallery-item[data-clip="3"].revealed { clip-path:polygon(0 0,97% 0,100% 100%,0 100%); opacity:1; }

/* ─── KUNDTYPER ──────────────────────────────────────────────────────────── */
.customer-types { background:var(--cream); padding:var(--sp-24) 0; }
.customer-types-header { text-align:center; margin-bottom:var(--sp-10); }
.customer-types-header h2 { margin-top:var(--sp-3); }

.segment-control {
  display:flex; justify-content:center; gap:0;
  border:2px solid var(--green); border-radius:var(--radius-sm);
  overflow:hidden; margin-bottom:var(--sp-10); width:fit-content; margin-left:auto; margin-right:auto;
}
.segment-btn {
  padding:12px 28px; font-size:0.9375rem; font-weight:500; color:var(--text);
  border-right:1px solid var(--green);
  transition:background .2s, color .2s;
}
.segment-btn:last-child { border-right:none; }
.segment-btn:hover { background:rgba(2,107,4,0.06); }
.segment-btn.active { background:var(--green); color:var(--white); }

.segment-panel { visibility:hidden; height:0; overflow:hidden; pointer-events:none; }
.segment-panel.active { visibility:visible; height:auto; overflow:visible; pointer-events:auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); align-items:start; animation:fadeSlideIn .25s ease-out; }
.segment-text h3 { margin-bottom:var(--sp-4); }
.segment-text p { color:var(--text-muted); margin-bottom:var(--sp-6); }
.segment-list { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.segment-list li { display:flex; align-items:flex-start; gap:var(--sp-3); font-size:0.9375rem; }
.segment-list svg { width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--green); }
.segment-image img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); }

/* ─── OMRÅDEN ────────────────────────────────────────────────────────────── */
.areas { background:var(--cream); padding:var(--sp-24) 0; }
.areas-header { text-align:center; margin-bottom:var(--sp-10); }
.areas-header h2 { margin-top:var(--sp-3); }
.areas-lead { text-align:center; margin:0 auto var(--sp-10); }

.areas-geo { position:relative; padding:var(--sp-10) 0; text-align:center; }
.areas-line {
  position:absolute; top:50%; left:10%; right:10%;
  width:80%; height:60px; overflow:visible;
  transform:translateY(-50%); pointer-events:none; z-index:0;
}
.areas-line-path {
  stroke:var(--stone); stroke-width:1.5; fill:none; opacity:0.5;
  stroke-dasharray:900; stroke-dashoffset:900;
}
.areas-line.animate .areas-line-path { animation:drawLine 1.2s ease-out forwards; }

.areas-chips {
  display:flex; gap:var(--sp-4); flex-wrap:wrap; justify-content:center;
  position:relative; z-index:1;
}
.area-chip {
  padding:10px 22px; border-radius:var(--radius-full);
  border:2px solid var(--border); background:var(--white);
  font-size:0.9375rem; font-weight:500; color:var(--text);
  transition:border-color .15s, background .15s, transform .15s;
  box-shadow:var(--shadow-xs);
}
.area-chip:hover { border-color:var(--green); background:rgba(2,107,4,0.04); transform:translateY(-2px); }
.area-chip--home { border-color:var(--green); }
.home-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-left:6px; vertical-align:middle; }
.home-label { display:inline-block; background:var(--green); color:var(--white); border-radius:var(--radius-full); padding:2px 8px; font-size:0.625rem; font-weight:600; margin-left:6px; vertical-align:middle; text-transform:uppercase; letter-spacing:.06em; }

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq { background:var(--cream-alt); padding:var(--sp-24) 0; }
.faq-header { text-align:center; margin-bottom:var(--sp-10); }
.faq-header h2 { margin-top:var(--sp-3); }
.faq-inner { max-width:780px; margin:0 auto; }
.faq-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }

.faq-item { border-bottom:1px solid var(--border); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) 0; cursor:pointer;
  font-size:1rem; font-weight:600; color:var(--text);
  list-style:none;
}
.faq-question::-webkit-details-marker { display:none; }
.faq-chevron { width:20px; height:20px; flex-shrink:0; color:var(--green); transition:transform .2s ease; }
details[open] .faq-chevron { transform:rotate(180deg); }
.faq-answer { overflow:hidden; }
.faq-answer p { padding-bottom:var(--sp-5); color:var(--text-muted); font-size:0.9375rem; line-height:1.7; }

/* ─── CTA BAND ───────────────────────────────────────────────────────────── */
.cta-band { background:var(--green); padding:var(--sp-20) 0; position:relative; overflow:hidden; }
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.cta-band-inner { text-align:center; position:relative; }
.cta-band h2 { color:var(--white); margin-bottom:var(--sp-4); }
.cta-band p { color:rgba(255,255,255,0.82); margin-bottom:var(--sp-8); font-size:1.0625rem; }
.cta-band-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--sp-4); }

/* ─── KONTAKT ────────────────────────────────────────────────────────────── */
.contact { background:var(--dark); padding:var(--sp-24) 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:start; }

/* Left column: info + heading */
.contact-info { }
.contact-info .kicker-light { margin-bottom:var(--sp-4); }
.contact-info h2 { color:var(--white); margin-bottom:var(--sp-4); }
.contact-info > p { color:rgba(255,255,255,0.72); margin-bottom:var(--sp-8); font-size:1rem; line-height:1.65; }

/* Contact detail items */
.contact-details { display:flex; flex-direction:column; gap:var(--sp-5); margin-bottom:var(--sp-8); }
.contact-detail-item { display:flex; align-items:flex-start; gap:var(--sp-4); }
.contact-detail-item svg { width:20px; height:20px; flex-shrink:0; margin-top:2px; color:#5DC85F; }
.contact-detail-item div { display:flex; flex-direction:column; gap:2px; }
.contact-detail-item strong { font-size:0.8125rem; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.04em; }
.contact-detail-item a,
.contact-detail-item span { font-size:1rem; color:rgba(255,255,255,0.88); line-height:1.4; }
.contact-detail-item a:hover { color:var(--white); text-decoration:underline; }

.contact-trust-row { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.trust-badge--light { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.65); border:1px solid rgba(255,255,255,0.2); font-size:0.75rem; font-weight:600; padding:4px 10px; border-radius:100px; }

/* Right column: form */
.contact-form-wrap { }
.contact-form label { color:#E8E4DB; font-size:0.875rem; font-weight:500; display:block; margin-bottom:6px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  background:#F7F5F0; color:var(--text); border:1.5px solid #7A8C6A;
  border-radius:var(--radius-sm); padding:12px 14px; width:100%; font-family:inherit; font-size:0.9375rem;
  transition:border-color .15s, outline .15s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.contact-form textarea { min-height:130px; resize:vertical; }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.contact-form .form-group { margin-bottom:var(--sp-5); }
.contact-form .form-consent { margin-bottom:var(--sp-5); }
.consent-label { display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; }
.consent-label input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--green); }
.consent-label span { color:#C8C4BB; font-size:0.8125rem; line-height:1.55; }
.consent-label a { color:#A8DCA8; text-decoration:underline; }
.consent-label a:hover { color:var(--white); }
.btn-full { width:100%; justify-content:center; }
.form-status { margin-top:var(--sp-4); font-size:0.875rem; }
.form-status--ok { color:#A0E8A0; }
.form-status--err { color:#F28B82; }

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer { background:var(--cream); }
.footer-arch { line-height:0; overflow:hidden; }
.footer-arch svg { display:block; width:100%; }
.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:var(--sp-10); padding:var(--sp-12) var(--sp-6) var(--sp-10);
}
.footer-brand img { width:52px; height:52px; margin-bottom:var(--sp-4); }
.footer-brand-name { font-size:0.9375rem; font-weight:600; margin-bottom:var(--sp-2); }
.footer-tagline { font-size:0.875rem; color:var(--text-muted); line-height:1.6; max-width:200px; }
.footer-col h4 { font-size:0.875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:var(--sp-5); }
.footer-col ul li { margin-bottom:var(--sp-3); }
.footer-col ul li a { font-size:0.875rem; color:var(--text-muted); transition:color .15s; }
.footer-col ul li a:hover { color:var(--green); }
.footer-col p, .footer-col address { font-size:0.875rem; color:var(--text-muted); line-height:1.7; }
.footer-col a { font-size:0.875rem; color:var(--text-muted); transition:color .15s; }
.footer-col a:hover { color:var(--green); }
.footer-meta { font-size:0.75rem; color:var(--text-light); margin-top:var(--sp-4); }

.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--border);
}
.footer-bottom p, .footer-bottom a { font-size:0.8125rem; color:var(--text-light); }
.footer-bottom a:hover { color:var(--green); }

/* ─── STICKY MOBIL CTA BAR ──────────────────────────────────────────────── */
.sticky-cta-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; height:60px;
  z-index:190; border-top:1px solid var(--border);
  background:var(--white); box-shadow:0 -2px 12px rgba(0,0,0,0.08);
  animation:stickySlideUp .3s ease-out;
}
.sticky-cta-bar .sticky-tel {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:50%; height:100%; font-size:0.9375rem; font-weight:600; color:var(--green);
  border-right:1px solid var(--border);
}
.sticky-cta-bar .sticky-offert {
  display:flex; align-items:center; justify-content:center;
  width:50%; height:100%; background:var(--green); color:var(--white);
  font-size:0.9375rem; font-weight:600;
}

/* ─── RESPONSIVITET ─────────────────────────────────────────────────────── */
@media (max-width:1023px) {
  .header-contacts { display:none; }
  .usp-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-line { display:none; }
  .gallery-grid { grid-template-rows:220px 220px; }
  .footer-grid { grid-template-columns:1fr 1fr; row-gap:var(--sp-8); }
}
@media (max-width:899px) {
  .header-nav { display:none; }
  .header-cta { display:none; }
  .hamburger { display:flex; margin-left:auto; }
  .mobile-nav-overlay { display:block; }
  .tab-content { grid-template-columns:1fr; }
  .tab-image { order:-1; }
  .tab-image img { aspect-ratio:3/2; }
  .about-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-form .form-row { grid-template-columns:1fr; }
  .segment-panel.active { grid-template-columns:1fr; }
  .segment-image { display:none; }
  .customer-types-header h2, .areas-header h2 { font-size:1.5rem; }
}
@media (max-width:767px) {
  :root { --sp-24:64px; --sp-20:56px; }
  .hamburger { display:flex; }
  .hero-ctas .btn-outline { display:none; }
  .hero-tel-mobil { display:flex; }
  .hero-trust { display:none; }
  .contact-cards { grid-template-columns:1fr; }
  .usp-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .gallery-item { height:220px; }
  .gallery-item--large { grid-column:1; grid-row:auto; height:260px; }
  .gallery-item[data-clip] { clip-path:none !important; border-radius:var(--radius-md); }
  .process-steps { grid-template-columns:1fr; padding-left:60px; position:relative; }
  .process-steps::before {
    content:''; position:absolute; left:26px; top:12px; bottom:12px; width:2px;
    background:var(--green); opacity:0.3; transform-origin:top;
    animation:drawVertical 1.5s ease-out forwards; animation-play-state:paused;
  }
  .process-steps.animate::before { animation-play-state:running; }
  .process-line { display:none; }
  .process-step { padding-top:0; text-align:left; margin-bottom:var(--sp-8); position:relative; }
  .step-number { position:absolute; left:-60px; top:0; margin:0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:var(--sp-3); text-align:center; }
  .contact .contact-form .form-row { grid-template-columns:1fr; }
  .cta-band-actions { flex-direction:column; align-items:center; }
  .segment-control { flex-direction:column; border-radius:var(--radius-md); width:100%; }
  .segment-btn { border-right:none; border-bottom:1px solid var(--green); }
  .segment-btn:last-child { border-bottom:none; }
  .sticky-cta-bar { display:flex; }
  body { padding-bottom:60px; }
}
@media (max-width:480px) {
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .hero-tel-mobil { flex-direction:column; }
  .hero-tel-mobil a { width:100%; justify-content:center; }
  .areas-chips { gap:var(--sp-3); }
  .area-chip { padding:8px 16px; font-size:0.875rem; }
  .tabs-nav { gap:0; }
  .tab-btn { padding:12px 14px; font-size:0.8125rem; }
}

/* ─── UTILITY ────────────────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.section-divider { height:1px; background:var(--border); margin:0; }

/* ─── ADDITIONS: MISSING CLASS RULES ──────────────────────────────────── */

/* Segment panels container */
.segment-panels { position:relative; }

/* Areas section (new HTML class names) */
.areas-intro { text-align:center; max-width:640px; margin:0 auto var(--sp-8); color:var(--text-muted); font-size:1.0625rem; }
.areas-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:center; }
.areas-map { position:relative; }
.areas-geo-line { width:100%; max-width:400px; display:block; margin:0 auto; }
.geo-path { }
.geo-dot { }
.geo-dot--home { }
.geo-label { font-family:inherit; }
.areas-content { }
.area-chips { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.area-chip__badge { display:inline-block; background:var(--green); color:var(--white); border-radius:var(--radius-full); padding:2px 8px; font-size:0.625rem; font-weight:600; margin-left:6px; vertical-align:middle; text-transform:uppercase; letter-spacing:.06em; }
.areas-note { font-size:0.9375rem; color:var(--text-muted); margin-bottom:var(--sp-6); line-height:1.6; }

/* FAQ icon */
.faq-icon { width:20px; height:20px; flex-shrink:0; color:var(--green); transition:transform .2s ease; }
details[open] .faq-icon { transform:rotate(180deg); }

/* CTA band content */
.cta-band-text { margin-bottom:var(--sp-8); }
.cta-band-phones { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); }
.cta-phone-link { display:flex; align-items:center; gap:var(--sp-2); color:rgba(255,255,255,0.9); font-size:0.9375rem; font-weight:500; transition:color .15s; }
.cta-phone-link svg { color:var(--white); flex-shrink:0; width:16px; height:16px; }
.cta-phone-link:hover { color:var(--white); text-decoration:underline; }

/* Trust badge base */
.trust-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:100px; font-size:0.75rem; font-weight:600; background:var(--mid); color:var(--text-muted); }

/* Footer (new class names matching HTML) */
.footer-arch-path { }
.footer-body { }
.footer-col--brand { }
.footer-logo { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-4); text-decoration:none; }
.footer-logo-mark { font-size:1.25rem; font-weight:800; color:var(--text); line-height:1; }
.footer-logo-sub { font-size:0.75rem; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.footer-trust { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
.footer-col-heading { font-size:0.875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:var(--sp-5); }
.footer-links { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-links li a { font-size:0.875rem; color:var(--text-muted); transition:color .15s; }
.footer-links li a:hover { color:var(--green); }
.footer-contact-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.footer-contact-list li { display:flex; align-items:center; gap:var(--sp-3); }
.footer-contact-list li svg { color:var(--green); flex-shrink:0; }
.footer-contact-list li a,
.footer-contact-list li span { font-size:0.875rem; color:var(--text-muted); transition:color .15s; }
.footer-contact-list li a:hover { color:var(--green); }
.footer-bottom-text { font-size:0.8125rem; color:var(--text-light); }
.footer-bottom-sep { margin:0 var(--sp-2); }

/* Sticky CTA (updated class names) */
.sticky-cta {
  display:none; position:fixed; bottom:0; left:0; right:0; height:60px;
  z-index:190; border-top:1px solid var(--border);
  background:var(--white); box-shadow:0 -2px 12px rgba(0,0,0,0.08);
  animation:stickySlideUp .3s ease-out;
}
.sticky-cta__btn {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:50%; height:100%; font-size:0.9375rem; font-weight:600; text-decoration:none;
}
.sticky-cta__btn--phone { color:var(--green); border-right:1px solid var(--border); }
.sticky-cta__btn--form { background:var(--green); color:var(--white); }

/* Lead form kit class (functional marker) */
.lead-form { }

/* Policy page */
.policy-content { padding:var(--sp-24) 0; }
.policy-lead-form { margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.policy-cookies { margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--border); }
.policy-back { margin-top:var(--sp-12); }

/* Responsive additions */
@media (max-width:899px) {
  .areas-layout { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .areas-map { display:none; }
  .sticky-cta { display:flex; }
}

/* ═══ REPARATION 2026-10-13 (Claude) – header, footer, områden, CTA ═══ */

/* Header: alltid ljus och läsbar, menyn på en rad */
.site-header { background:rgba(247,245,240,0.97); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(0,0,0,0.02); }
.site-header[data-scrolled] { background:rgba(247,245,240,0.98); }
.header-inner { gap:var(--sp-5); }
.header-nav ul { display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
.header-nav li { list-style:none; }
.header-nav a { display:block; position:relative; }
.header-nav a::after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .2s ease-out; }
.header-nav a:hover::after { transform:scaleX(1); }
.header-contacts { margin-left:var(--sp-2); padding-left:var(--sp-4); border-left:1px solid var(--border); }
.header-tel { font-size:0.8125rem; }
.header-cta { margin-left:var(--sp-2); padding:12px 22px; }
.hero { padding-top:0; }
@media (max-width:1199px) { .header-contacts { display:none; } }

/* Knapp: vit på grön bakgrund */
.btn-white { background:var(--white); color:var(--green); border-color:var(--white); }
.btn-white:hover { background:var(--cream); border-color:var(--cream); box-shadow:0 6px 24px rgba(0,0,0,0.18); }

/* CTA-band */
.cta-band { background:linear-gradient(90deg, var(--dark) 0%, var(--green) 55%, var(--dark) 100%); }
.cta-band-actions { align-items:center; gap:var(--sp-8); }
.cta-band-phones { margin-top:0; text-align:left; }
.cta-phone-link { color:var(--white); font-weight:600; }
.cta-phone-link:hover { color:#BFE8C0; }
.cta-phone-link svg { color:#BFE8C0; }

/* Områden: karta + chips */
.areas-layout { margin-top:var(--sp-6); }
.areas-map { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:var(--shadow-sm); }
.areas-geo-line { display:block; width:100%; height:auto; }
.areas-map .geo-water { fill:rgba(162,143,114,0.16); }
.areas-map .geo-water-label { fill:var(--stone); font-size:12px; font-style:italic; letter-spacing:.08em; }
.areas-map .geo-path { stroke:var(--green); stroke-width:2; stroke-dasharray:6 6; opacity:.55; }
.areas-map .geo-dot { fill:var(--white); stroke:var(--green); stroke-width:3; }
.areas-map .geo-dot--home { fill:var(--green); stroke:var(--white); stroke-width:3; }
.areas-map .geo-ring { fill:none; stroke:var(--green); stroke-width:1.5; opacity:.35; transform-origin:226px 210px; animation:geoPulse 2.4s ease-out infinite; }
.areas-map .geo-label { fill:var(--text); font-size:13px; font-weight:600; font-family:'Poppins',sans-serif; }
.areas-map .geo-label--home { fill:var(--green); font-weight:700; }
@keyframes geoPulse { 0% { transform:scale(.6); opacity:.5; } 100% { transform:scale(1.6); opacity:0; } }
.area-chips { list-style:none; padding:0; margin:0 0 var(--sp-6); }
.area-chip { display:inline-flex; align-items:center; gap:8px; }
.area-chip svg { color:var(--green); }
.areas-note { color:var(--text-muted); margin-bottom:var(--sp-5); }
@media (max-width:767px) { .areas-map { display:block; padding:var(--sp-4); } }

/* Footer */
.footer-arch { background:var(--dark); }
.footer-arch svg { width:100%; height:56px; }
.footer-arch-path { fill:var(--cream); }
.footer-grid { padding:var(--sp-8) 0 var(--sp-12); grid-template-columns:1.6fr 1fr 1fr 1.4fr; }
.footer-logo { margin-bottom:var(--sp-4); }
.footer-logo img { width:132px; height:auto; display:block; }
.footer-name { font-weight:700; font-size:0.9375rem; color:var(--text); margin-bottom:var(--sp-2); }
.footer-tagline { max-width:300px; }
.footer-social { display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
.footer-social a { font-size:0.8125rem; font-weight:600; color:var(--green); padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--white); transition:border-color .15s, background .15s; }
.footer-social a:hover { border-color:var(--green); background:var(--green-tint); }
.footer-col-heading { color:var(--text); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-contact-list { list-style:none; padding:0; margin:0; }
.footer-contact-list li { display:flex; align-items:flex-start; gap:var(--sp-3); font-size:0.875rem; color:var(--text-muted); word-break:break-word; }
.footer-contact-list svg { flex-shrink:0; margin-top:3px; color:var(--green); }
.footer-bottom { display:block; padding:var(--sp-5) 0; }
.footer-bottom-text { text-align:center; }
@media (max-width:899px) { .footer-grid { grid-template-columns:1fr 1fr; } .footer-col--brand { grid-column:1 / -1; } }
@media (max-width:520px) { .footer-grid { grid-template-columns:1fr; } }
.areas-map .geo-point { pointer-events:none; }
.areas-map .geo-point--home .geo-label { fill:var(--green); }
.tabs-wrapper, .services .container > * { min-width:0; max-width:100%; }
.tabs-nav { max-width:100%; }
html, body { overflow-x:clip; }

/* ─── LOKALA SIDOR ─── */
/* Navigation dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown-trigger { display:flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; font:inherit; color:inherit; padding:0; }
.nav-dropdown-trigger:hover { color:var(--green); }
.nav-chevron { width:14px; height:14px; transition:transform .2s; flex-shrink:0; }
.nav-dropdown.open .nav-chevron { transform:rotate(180deg); }
.nav-dropdown-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,.10); min-width:200px; padding:6px 0; z-index:200; display:none; }
.nav-dropdown.open .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a { display:block; padding:9px 18px; font-size:0.9rem; color:var(--text); white-space:nowrap; transition:background .15s, color .15s; }
.nav-dropdown-menu a:hover { background:var(--green-tint); color:var(--green); }
.nav-dropdown-menu .dropdown-divider { height:1px; background:var(--border); margin:6px 0; }
/* Mobile dropdown */
.mobile-dropdown-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; font:inherit; font-size:1.2rem; font-weight:600; color:var(--white); padding:12px 0; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.15); }
.mobile-dropdown-trigger .nav-chevron { color:var(--white); }
.mobile-dropdown.open .nav-chevron { transform:rotate(180deg); }
.mobile-dropdown-menu { list-style:none; padding:0; margin:0; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.mobile-dropdown.open .mobile-dropdown-menu { max-height:400px; }
.mobile-dropdown-menu li a { display:block; padding:10px 0 10px 16px; font-size:1rem; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.08); transition:color .15s; }
.mobile-dropdown-menu li a:hover { color:var(--white); }
/* Breadcrumb */
.breadcrumb { padding:12px 0; }
.breadcrumb-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:0.8125rem; color:var(--text-muted); }
.breadcrumb-list li { display:flex; align-items:center; gap:6px; }
.breadcrumb-list li::after { content:"/"; color:var(--text-muted); opacity:.5; }
.breadcrumb-list li:last-child::after { display:none; }
.breadcrumb-list a { color:var(--text-muted); transition:color .15s; }
.breadcrumb-list a:hover { color:var(--green); }
/* Local hero */
.lokal-hero { padding:var(--sp-6) 0 0; background:var(--cream); }
.lokal-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; padding-bottom:var(--sp-8); }
.lokal-hero-text .kicker { margin-bottom:var(--sp-3); }
.lokal-hero-text h1 { font-size:clamp(2rem,4vw,3rem); margin-bottom:var(--sp-4); }
.lokal-hero-text p { font-size:1.0625rem; color:var(--text-muted); max-width:480px; margin-bottom:var(--sp-6); }
.lokal-hero-img { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.lokal-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:767px) { .lokal-hero-inner { grid-template-columns:1fr; } .lokal-hero-img { order:-1; aspect-ratio:16/9; } }
/* Local intro */
.lokal-intro { padding:var(--sp-8) 0; }
.lokal-intro-body { max-width:720px; }
.lokal-intro-body p { margin-bottom:var(--sp-4); color:var(--text-muted); }
/* Local service details */
.lokal-details { padding:var(--sp-8) 0; background:var(--white); }
.lokal-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.lokal-includes-title { font-size:1rem; font-weight:700; margin-bottom:var(--sp-4); }
@media(max-width:767px) { .lokal-details-grid { grid-template-columns:1fr; } }
/* Process simple list */
.lokal-process { padding:var(--sp-8) 0; }
.process-list-simple { padding-left:var(--sp-6); margin:0; }
.process-list-simple li { margin-bottom:var(--sp-3); color:var(--text-muted); }
/* FAQ simple list */
.lokal-faq { padding:var(--sp-8) 0; background:var(--cream); }
.faq-list-simple { margin:0; }
.faq-list-simple dt { font-weight:700; margin-bottom:var(--sp-2); margin-top:var(--sp-5); }
.faq-list-simple dt:first-child { margin-top:0; }
.faq-list-simple dd { margin:0 0 var(--sp-3); color:var(--text-muted); }
/* Related sections */
.lokal-related { padding:var(--sp-8) 0; }
.lokal-related-heading { font-size:1.25rem; margin-bottom:var(--sp-5); }
.lokal-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.lokal-card { display:block; padding:var(--sp-4) var(--sp-5); background:var(--cream); border-radius:var(--radius-md); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:0.9375rem; transition:border-color .15s, background .15s; text-decoration:none; }
.lokal-card:hover { border-color:var(--green); background:var(--green-tint); color:var(--green); }
.lokal-card-label { font-size:0.75rem; color:var(--text-muted); font-weight:400; display:block; margin-top:2px; }
/* Local contact section spacing */
.lokal-contact { padding-top:var(--sp-10); }
/* Area hub */
.omraden-hub { padding:var(--sp-10) 0; }
.omraden-hub-heading { margin-bottom:var(--sp-8); }
.omraden-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-5); }
.omraden-card { display:block; padding:var(--sp-6); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--text); text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.omraden-card:hover { border-color:var(--green); box-shadow:0 4px 16px rgba(2,107,4,.08); }
.omraden-card-name { font-size:1.25rem; font-weight:700; margin-bottom:var(--sp-2); color:var(--text); }
.omraden-card-services { font-size:0.875rem; color:var(--text-muted); }
/* Area ort page */
.ort-hero { padding:var(--sp-8) 0; background:var(--cream); }
.ort-hero h1 { font-size:clamp(2rem,4vw,3rem); margin-bottom:var(--sp-4); }
.ort-hero p { max-width:600px; color:var(--text-muted); font-size:1.0625rem; }
.ort-intro { padding:var(--sp-8) 0; }
.ort-intro-body { max-width:720px; }
.ort-intro-body p { margin-bottom:var(--sp-4); color:var(--text-muted); }
.ort-services { padding:var(--sp-8) 0; background:var(--cream); }
.ort-services h2 { margin-bottom:var(--sp-6); }
.ort-service-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-4); }
.ort-service-card { display:block; padding:var(--sp-5) var(--sp-6); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); text-decoration:none; color:var(--text); transition:border-color .2s, box-shadow .2s; }
.ort-service-card:hover { border-color:var(--green); box-shadow:0 4px 16px rgba(2,107,4,.08); }
.ort-service-card h3 { font-size:1.0625rem; margin-bottom:var(--sp-2); }
.ort-service-card p { font-size:0.875rem; color:var(--text-muted); margin:0; }
/* ort-hero CTA links */
.ort-hero-ctas { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-5); }
/* Soil layers for local pages */
.lokal-soil { margin:var(--sp-6) 0; }
.lokal-soil h2 { font-size:1rem; font-weight:700; margin-bottom:var(--sp-3); }
.soil-layer.layer-soil    { background:#8B6914; color:#fff; }
.soil-layer.layer-geo     { background:#c0b090; color:#333; }
.soil-layer.layer-gravel  { background:#a09080; color:#fff; }
.soil-layer.layer-base    { background:#606060; color:#fff; }
.soil-layer.layer-sand    { background:#d4b896; color:#333; }
.soil-layer.layer-surface { background:#333; color:#fff; }
.soil-layer.layer-binder  { background:#444; color:#fff; }
.soil-layer.layer-asphalt { background:#222; color:#fff; }
.soil-layer.layer-plantsoil { background:#5a3e1b; color:#fff; }
.soil-layer.layer-plant   { background:#2d6a1e; color:#fff; }
.soil-layer.layer-bark    { background:#8b5c2a; color:#fff; }
/* Includes list for local pages */
.lokal-includes { margin:var(--sp-6) 0; }
.lokal-includes h2 { font-size:1rem; font-weight:700; margin-bottom:var(--sp-3); }
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.9375rem; }
.check-list li:last-child { border-bottom:none; }
.check-list li svg { color:var(--green); flex-shrink:0; }

/* Lokala sidor – karta, områdeskort */
.lokal-map { padding:var(--sp-10) 0; background:var(--cream); }
.lokal-map .areas-layout { margin-top:0; }
a.area-chip { text-decoration:none; }
.area-chip--active { border-color:var(--green); background:var(--green-tint); color:var(--green); }
.areas-map .geo-point--active .geo-dot { fill:var(--green); stroke:var(--white); }
.areas-map .geo-point--active .geo-label { fill:var(--green); font-weight:700; }
.omraden-hub-body { margin-bottom:var(--sp-8); }
.omraden-hub .areas-layout { margin-bottom:var(--sp-10); }
.omraden-card-name a { color:inherit; text-decoration:none; }
.omraden-card-name a:hover { color:var(--green); }
.omraden-card-services { list-style:none; padding:0; margin:var(--sp-3) 0 0; display:grid; gap:6px; }
.omraden-card-services a { color:var(--text-muted); text-decoration:none; }
.omraden-card-services a:hover { color:var(--green); text-decoration:underline; }
.lokal-hero-text .ort-hero-ctas { margin-top:0; }
.areas-note a { color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.areas-map a .geo-dot { transition:transform .15s; transform-box:fill-box; transform-origin:center; }
.areas-map a:hover .geo-dot { transform:scale(1.25); }
.areas-map a:hover .geo-label { fill:var(--green); }