:root {
  --ink: #342b29;
  --muted: #786a62;
  --line: #eadfd2;
  --paper: #fffaf3;
  --paper-soft: #fffdf8;
  --warm: #f7eadc;
  --warm-2: #efe0d1;
  --sage: #436f5f;
  --sage-dark: #31564c;
  --sage-soft: #e3eee7;
  --clay: #c58d67;
  --shadow: 0 24px 58px rgba(74, 58, 48, 0.13);
  --shadow-soft: 0 14px 30px rgba(74, 58, 48, 0.08);
  --radius: 8px;
  --container: 1168px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf3 0%, #fffdf8 42%, #fff8ef 100%);
  font-family: "Hanken Grotesk", Avenir Next, Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(232, 223, 213, 0.78);
  background: rgba(255, 250, 243, 0.9);
  backdrop-filter: blur(14px);
}

.nav-shell,
.container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(67, 111, 95, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(67, 111, 95, 0.95) 0 50%, transparent 50%),
    linear-gradient(315deg, rgba(197, 141, 103, 0.95) 0 50%, var(--warm) 50%);
  box-shadow: inset 0 0 0 5px rgba(255, 250, 243, 0.58);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 650;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links a {
  border-radius: 999px;
  padding: 10px 14px;
  color: #3e3735;
  transition: background 160ms ease, color 160ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-current {
  background: var(--warm);
  color: var(--sage-dark);
  outline: none;
}

.nav-links a.nav-contact {
  border: 1px solid rgba(67, 111, 95, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: var(--sage-dark);
}

.nav-links a.nav-contact:hover,
.nav-links a.nav-contact:focus-visible {
  background: var(--sage);
  color: #fff;
}

.chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 238px;
  border: 1px solid rgba(234, 223, 210, 0.94);
  border-radius: var(--radius);
  padding: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 12px;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.is-open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu a.is-current {
  background: var(--warm);
  color: var(--sage-dark);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-family: Inter, "Hanken Grotesk", sans-serif;
  letter-spacing: 0;
}

.button,
.page-content .wpcf7-submit,
.page-content a[href*="kontakt"],
.page-content a[href*="tjanster"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 26px;
  background: var(--sage);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(67, 111, 95, 0.22);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover,
.button:focus-visible,
.page-content .wpcf7-submit:hover,
.page-content .wpcf7-submit:focus-visible {
  background: var(--sage-dark);
  box-shadow: 0 18px 38px rgba(49, 86, 76, 0.28);
  transform: translateY(-2px);
  outline: none;
}

.button::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 10px;
  background: currentColor;
  clip-path: path("M9.8 3.4 14.4 8l-4.6 4.6-1.1-1.1 2.7-2.7H2V7.2h9.4L8.7 4.5l1.1-1.1Z");
}

.section {
  padding: 96px 0;
}

.hero {
  overflow: hidden;
  padding: 112px 0 70px;
  background: linear-gradient(135deg, rgba(247, 234, 220, 0.98), rgba(255, 250, 243, 0.96) 56%, rgba(255, 246, 237, 0.88));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 440px;
  gap: 96px;
  align-items: center;
}

.hero-copy {
  max-width: 650px;
}

.hero h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.04;
}

.hero-copy p {
  max-width: 690px;
  margin-bottom: 30px;
  color: #463f3d;
  font-size: 19px;
  line-height: 1.72;
}

.portrait-card {
  overflow: hidden;
  border: 1px solid rgba(67, 111, 95, 0.14);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: var(--shadow);
}

.portrait-card img {
  width: 100%;
  aspect-ratio: 0.92;
  border-radius: 6px;
  object-fit: cover;
}

.brand-strip {
  margin-top: 72px;
  border: 1px solid rgba(234, 223, 210, 0.9);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: var(--shadow-soft);
}

.brand-strip-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: center;
  padding: 28px 34px;
}

.brand-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.brand-list span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(67, 111, 95, 0.14);
  border-radius: 999px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.86);
  color: #47403e;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}

.section-heading h2,
.why-intro h2,
.about-copy h2,
.faq-panel h2,
.cta h2 {
  margin-bottom: 18px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
}

.section-heading p {
  margin-bottom: 2px;
  color: #514946;
  font-size: 18px;
}

.services {
  background: linear-gradient(180deg, #fffaf3 0%, #fffaf3 62%, rgba(227, 238, 231, 0.44) 62%, rgba(227, 238, 231, 0.44) 100%);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.service-card,
.why-card {
  border: 1px solid rgba(234, 223, 210, 0.94);
  border-radius: var(--radius);
  padding: 30px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--shadow-soft);
}

.service-card {
  display: flex;
  min-height: 326px;
  flex-direction: column;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.service-card:hover {
  border-color: rgba(67, 111, 95, 0.28);
  box-shadow: 0 22px 46px rgba(74, 58, 48, 0.12);
  transform: translateY(-5px);
}

.service-icon,
.why-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--warm-2), #fffaf3);
  color: var(--sage);
}

.service-icon svg,
.why-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3,
.why-card h3 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.service-card p,
.why-card p {
  color: #514946;
}

.service-card p {
  margin-bottom: 26px;
  line-height: 1.58;
}

.text-link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--sage-dark);
  font-size: 15px;
  font-weight: 850;
}

.why {
  background: linear-gradient(180deg, rgba(227, 238, 231, 0.44), #fffaf3);
}

.why-layout {
  display: grid;
  grid-template-columns: 342px 1fr;
  gap: 48px;
  align-items: start;
}

.why-intro {
  position: sticky;
  top: 112px;
  border-left: 4px solid rgba(67, 111, 95, 0.82);
  padding-left: 28px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.why-card {
  min-height: 250px;
}

/* Grönt läggs diagonalt i 2x2-rutnätet: kort 1 uppe till vänster
   och kort 4 nere till höger. */
.why-card:nth-child(1),
.why-card:nth-child(4) {
  background: #477463;
  color: #fff;
}

.why-card:nth-child(1) p,
.why-card:nth-child(4) p {
  color: rgba(255, 255, 255, 0.86);
}

.why-card:nth-child(1) .why-icon,
.why-card:nth-child(4) .why-icon {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.about {
  padding-top: 108px;
  background: #fffaf3;
}

.about-grid {
  display: grid;
  grid-template-columns: 455px minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.about-image {
  overflow: hidden;
  border: 12px solid rgba(255, 253, 248, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about-image img {
  width: 100%;
  aspect-ratio: 0.86;
  object-fit: cover;
  object-position: 50% 30%;
}

.about-copy {
  max-width: 620px;
}

.about-copy p {
  color: #514946;
  font-size: 18px;
}

.faq {
  background: linear-gradient(180deg, #fffaf3 0%, var(--warm) 100%);
}

.faq-panel {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 58px;
  border: 1px solid rgba(234, 223, 210, 0.94);
  border-radius: var(--radius);
  padding: 56px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: var(--shadow-soft);
}

.faq-item {
  border-bottom: 1px solid rgba(67, 111, 95, 0.14);
  padding: 0 0 25px;
  margin-bottom: 25px;
}

.faq-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  font-weight: 850;
}

.faq-question::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  background:
    linear-gradient(var(--sage), var(--sage)) 50% 50% / 10px 2px no-repeat,
    var(--sage-soft);
}

.faq-item p {
  max-width: 740px;
  margin-bottom: 0;
  color: #514946;
}

.cta {
  padding: 76px 0 92px;
  background: #31564c;
  color: #fff;
}

.cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.cta p {
  max-width: 680px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}

.cta .button {
  background: #fff;
  color: var(--sage-dark);
  box-shadow: none;
}

.site-footer {
  background: #261f1d;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  padding: 54px 0 42px;
}

.footer-title {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 650;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0 30px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.76);
}

.page-main {
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf3 0%, #fffdf8 46%, #fff8ef 100%);
}

.page-om {
  background:
    radial-gradient(820px 560px at 92% 6%, rgba(67, 111, 95, 0.10), transparent 55%),
    radial-gradient(760px 680px at 4% 64%, rgba(67, 111, 95, 0.08), transparent 56%),
    linear-gradient(180deg, #fffaf3 0%, #fbfdfa 48%, #eef6f1 100%);
}

.page-om .section {
  padding: 58px 0;
}
.page-om .om-quote-section {
  padding: 40px 0 50px;
}

.page-content {
  max-width: none;
  margin: 0;
}

.page-content .content-area,
.page-content .content-container,
.page-content .site-container,
.page-content .site-main,
.page-content .content-wrap,
.page-content .entry,
.page-content .entry-content-wrap,
.page-content .entry-content,
.page-content .single-content {
  display: contents;
}

.page-content section {
  position: relative;
  max-width: none;
  margin: 0;
}

.page-content section:first-of-type {
  padding-top: 88px !important;
}

.page-content section:first-of-type::before {
  display: none;
}

.page-content section > div,
.page-content > div,
.page-content > ul {
  width: min(var(--container), calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.page-content h1 {
  max-width: 880px;
  margin: 0 0 22px;
  color: var(--ink) !important;
  font-size: clamp(40px, 5vw, 60px) !important;
  font-weight: 800;
  line-height: 1.04 !important;
}

.page-content h2 {
  max-width: 860px;
  margin: 54px 0 18px;
  color: var(--ink) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 800;
  line-height: 1.14 !important;
}

.page-content h3 {
  margin: 28px 0 10px;
  color: var(--ink) !important;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.page-content h4 {
  margin: 24px 0 8px;
  font-size: 18px;
}

.page-content p,
.page-content li {
  max-width: 760px;
  color: #514946;
  font-size: 18px;
  line-height: 1.74;
}

.page-content p {
  margin: 0 0 18px;
}

.page-content ul,
.page-content ol {
  max-width: 820px;
  margin: 18px 0 34px;
  padding-left: 24px;
}

.page-content li + li {
  margin-top: 10px;
}

.page-content a:not(.button):not(.post-more-link):not(.wpcf7-submit) {
  color: var(--sage-dark);
  font-weight: 800;
}

.page-content a[href*="kontakt"],
.page-content a[href*="tjanster"],
.page-content .wpcf7-submit {
  color: #fff !important;
}

.page-content [style*="color:#3C2F2F"],
.page-content [style*="color: #3C2F2F"] {
  color: var(--ink) !important;
}

.page-content [style*="color:#5A4D4D"],
.page-content [style*="color: #5A4D4D"] {
  color: #514946 !important;
}

.page-content [style*="color:#8C7A6B"],
.page-content [style*="color: #8C7A6B"] {
  color: var(--muted) !important;
}

.page-content [style*="color:#A67C52"],
.page-content [style*="color: #A67C52"] {
  color: var(--sage-dark) !important;
}

.page-content [style*="background:#FEF9F1"],
.page-content [style*="background: #FEF9F1"] {
  background: var(--paper) !important;
}

.page-content [style*="background:#F8F3EB"],
.page-content [style*="background: #F8F3EB"],
.page-content [style*="background:#F2E9DE"],
.page-content [style*="background: #F2E9DE"] {
  background: var(--warm) !important;
}

.page-content [style*="background:#A67C52"],
.page-content [style*="background: #A67C52"],
.page-content [style*="background:#CF7B1A"],
.page-content [style*="background: #CF7B1A"],
.page-content [style*="background:#43655B"],
.page-content [style*="background: #43655B"] {
  background: var(--sage) !important;
}

.page-content [style*="background:#3C2F2F"],
.page-content [style*="background: #3C2F2F"],
.page-content [style*="background:#4D3D3D"],
.page-content [style*="background: #4D3D3D"] {
  background: var(--sage-dark) !important;
}

.page-content [style*="background:#3C2F2F"] h2,
.page-content [style*="background: #3C2F2F"] h2,
.page-content [style*="background:#3C2F2F"] h3,
.page-content [style*="background: #3C2F2F"] h3,
.page-content [style*="background:#3C2F2F"] p,
.page-content [style*="background: #3C2F2F"] p,
.page-content [style*="background:#3C2F2F"] span,
.page-content [style*="background: #3C2F2F"] span {
  color: rgba(255, 255, 255, 0.86) !important;
}

.page-content [style*="background:#3C2F2F"] a,
.page-content [style*="background: #3C2F2F"] a {
  color: #fff !important;
}

.page-content [style*="background:#3C2F2F"] h2,
.page-content [style*="background: #3C2F2F"] h2,
.page-content [style*="background:#3C2F2F"] h3,
.page-content [style*="background: #3C2F2F"] h3 {
  color: #fff !important;
}

.page-content [style*="background:#3C2F2F"] a[href*="kontakt"],
.page-content [style*="background: #3C2F2F"] a[href*="kontakt"] {
  background: #fff !important;
  color: var(--sage-dark) !important;
  box-shadow: none;
}

.page-content img {
  max-width: 100%;
  overflow: hidden;
  border: 12px solid rgba(255, 253, 248, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.page-om .page-content img {
  max-height: 580px;
  object-fit: cover;
  object-position: 50% 30%;
}

.page-content .rr-card,
.page-content .entry-list-item,
.page-content .loop-entry,
.page-content .wpcf7-form {
  border: 1px solid rgba(234, 223, 210, 0.94);
  border-radius: var(--radius);
  padding: 32px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-content .rr-card__icon,
.page-content .kadence-svg-iconset {
  display: none;
}

.page-content .rr-card {
  display: block;
  width: auto;
  min-height: 100%;
  margin: 0;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.page-content .rr-card:hover {
  border-color: rgba(67, 111, 95, 0.28);
  box-shadow: 0 22px 46px rgba(74, 58, 48, 0.12);
  transform: translateY(-4px);
}

.visual-placeholder {
  display: grid;
  min-height: 310px;
  width: min(100%, 430px);
  place-items: center;
  border: 1px solid rgba(67, 111, 95, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(239, 224, 209, 0.82), rgba(255, 250, 243, 0.92));
  color: var(--muted);
  font-weight: 750;
  box-shadow: var(--shadow-soft);
}

.page-content .rr-card p {
  font-size: 16px;
  line-height: 1.62;
}

.page-content .rr-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
}

.page-content .rr-logos span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(67, 111, 95, 0.14);
  border-radius: 999px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.86);
  color: #47403e;
  font-size: 14px;
  font-weight: 750;
}

.page-content .entry-list-item {
  max-width: none;
  list-style: none;
}

.page-content .kadence-posts-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  padding: 96px 0 112px;
}

.page-content .entry-title {
  margin-top: 0;
}

.page-content .entry-title a {
  color: var(--ink);
  font-size: 28px;
  line-height: 1.16;
}

.page-content .entry-meta {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.page-content .post-more-link {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: var(--sage-dark);
  font-weight: 850;
}

.page-content > div:first-child,
.page-content .single-content > div:first-child {
  padding-top: 96px !important;
  padding-bottom: 112px !important;
}

.page-artiklar-vad-ar-seo-guide-sokmotoroptimering .page-content .single-content > div,
.page-integritetspolicy .page-content .single-content > div {
  width: min(860px, calc(100% - 48px));
  max-width: 860px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.page-artiklar-vad-ar-seo-guide-sokmotoroptimering .page-content .single-content > div > p:first-child {
  max-width: 810px;
  color: #433b38 !important;
  font-size: 20px !important;
  line-height: 1.78 !important;
}

.page-artiklar-vad-ar-seo-guide-sokmotoroptimering .page-content h2 {
  margin-top: 64px !important;
}

.page-kontakt .page-content .wpcf7-form {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.screen-reader-text,
.screen-reader-response,
.hidden-fields-container,
.wpcf7-spinner,
.wpcf7-response-output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.wpcf7-form {
  max-width: 620px;
}

.wpcf7-form p {
  max-width: none;
  margin-bottom: 18px;
  color: var(--ink);
  font-weight: 750;
}

.wpcf7-form label {
  display: grid;
  gap: 8px;
}

.wpcf7-form input,
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid rgba(67, 111, 95, 0.18);
  border-radius: var(--radius);
  padding: 14px 15px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7-submit {
  width: auto;
}

.site-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1080px) {
  .hero-grid,
  .about-grid,
  .why-layout,
  .faq-panel,
  .section-heading,
  .cta-box {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portrait-card,
  .about-image {
    max-width: 520px;
  }

  .brand-strip-inner {
    grid-template-columns: 1fr;
  }

  .brand-list {
    justify-content: flex-start;
  }

  .why-intro {
    position: static;
  }
}

@media (max-width: 760px) {
  .nav-shell,
  .container {
    width: min(100% - 32px, var(--container));
  }

  .nav-links {
    display: none;
  }

  .hero h1 {
    font-size: 42px;
  }

  /* .page-main är bara en omslutande behållare, sektionerna inuti
     har egen padding. Med padding här uppstod ett ljust band mellan
     headern och heron på alla undersidor. */
  .hero,
  .section {
    padding: 64px 0;
  }

  .service-grid,
  .why-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .faq-panel {
    padding: 30px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* static hover dropdown */
.nav-item.has-dropdown{position:relative}
.nav-item.has-dropdown .dropdown-menu{display:none;position:absolute;top:100%;left:0}
.nav-item.has-dropdown:hover .dropdown-menu,.nav-item.has-dropdown:focus-within .dropdown-menu{display:block}


/* Rund hero-bild */
.portrait-card{ border-radius:50%; padding:10px; aspect-ratio:1; display:grid; place-items:center; background:rgba(255,253,248,.92); }
.portrait-card img{ width:100%; height:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:50% 28%; }


/* === Tjänstesida === */
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.button-ghost{ background:#fff; color:var(--sage-dark); border:1px solid rgba(67,111,95,.28); box-shadow:none; }
.button-ghost:hover, .button-ghost:focus-visible{ background:var(--warm); color:var(--sage-dark); }
.page-seo-konsult .service-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.why-copy p{ max-width:640px; color:#514946; font-size:18px; }
.why-copy p + p{ margin-top:16px; }
.steps-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.step-card{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:var(--paper); box-shadow:var(--shadow-soft); }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:var(--sage); color:#fff; font-weight:800; font-size:18px; margin-bottom:18px; }
@media (max-width:980px){ .page-seo-konsult .service-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .steps-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){ .page-seo-konsult .service-grid{ grid-template-columns:1fr; } }

.hero-visual{ filter: drop-shadow(0 22px 50px rgba(74,58,48,.12)); }
.hero-visual svg{ width:100%; height:auto; display:block; }
@media (max-width:1080px){ .page-seo-konsult .hero-visual{ max-width:460px; margin-top:8px; } }

/* Varumärkesrad (tjänstesida) */
.brands-section{ padding:50px 0; background:rgba(227,238,231,.40); border-top:1px solid rgba(67,111,95,.10); border-bottom:1px solid rgba(67,111,95,.10); }
.brands-label{ text-align:center; margin:0 0 22px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.brand-list--center{ justify-content:center; }

/* länkar i brödtext */
.faq-item p a, .why-copy p a, .section-heading p a{ color:var(--sage-dark); font-weight:700; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.faq-item p a:hover, .why-copy p a:hover{ color:var(--sage); }

/* Konverterande block */
.convert-section{ padding-top:0; }
.convert-block{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:44px; align-items:center; padding:44px 48px; border-radius:14px; background:linear-gradient(135deg, var(--sage-soft), #fffaf3); border:1px solid rgba(67,111,95,.16); box-shadow:var(--shadow-soft); }
.convert-copy h2{ font-size:28px; margin-bottom:10px; }
.convert-copy p{ margin:0; max-width:560px; color:#514946; font-size:17px; line-height:1.6; }
.convert-action{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.convert-note{ color:var(--muted); font-size:14px; }
@media (max-width:860px){ .convert-block{ grid-template-columns:1fr; gap:22px; padding:32px 26px; } }

/* === Tjänster-sida === */
.highlights-section{ background:linear-gradient(180deg,#fffaf3,rgba(227,238,231,.35)); }
.highlight-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.highlight-card{ background:var(--sage-soft); border:1px solid rgba(67,111,95,.16); border-radius:var(--radius); padding:28px; }
.highlight-icon{ display:grid; width:48px; height:48px; margin-bottom:20px; place-items:center; border-radius:10px; background:#fff; color:var(--sage-dark); }
.highlight-icon svg{ width:25px; height:25px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.highlight-card h3{ margin-bottom:8px; font-size:18px; }
.highlight-card p{ margin:0; color:#4f4843; font-size:15px; line-height:1.55; }
.cta-light{ background:var(--sage-soft); color:var(--ink); }
.cta-light p{ color:#514946; }
.cta-light .button{ background:var(--sage); color:#fff; box-shadow:0 14px 28px rgba(67,111,95,.22); }
.cta-light .button:hover{ background:var(--sage-dark); }
@media (max-width:980px){ .highlight-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .highlight-grid{ grid-template-columns:1fr; } }

/* Tjänster hero-yta */
.page-tjanster .hero{ position:relative; overflow:hidden; padding-top:128px; padding-bottom:96px;
  background:
    radial-gradient(circle at 86% 18%, rgba(67,111,95,.15), transparent 44%),
    radial-gradient(circle at 10% 92%, rgba(197,141,103,.13), transparent 46%),
    linear-gradient(135deg, var(--warm) 0%, #fffaf3 52%, var(--sage-soft) 100%); }
.page-tjanster .hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(67,111,95,.10) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%, transparent 72%);
  mask-image:linear-gradient(to bottom,#000 0%, transparent 72%); opacity:.6; }
.page-tjanster .hero .container{ position:relative; z-index:2; }
.hero-deco{ position:absolute; top:-150px; right:-120px; width:620px; max-width:72%; z-index:1; pointer-events:none; opacity:.9; }
.hero-deco svg{ width:100%; height:auto; display:block; }
@media (max-width:760px){ .hero-deco{ top:-150px; right:-130px; width:430px; opacity:.5; } .page-tjanster .hero{ padding-top:88px; } }

/* === Lokal SEO: orter === */
.towns-section{ background:linear-gradient(180deg,#fffaf3,rgba(227,238,231,.40)); padding-top:28px; }
.town-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.town-card{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--paper); box-shadow:var(--shadow-soft); transition:transform .17s ease, box-shadow .17s ease, border-color .17s ease; }
.town-card:hover{ transform:translateY(-4px); border-color:rgba(67,111,95,.28); box-shadow:0 18px 38px rgba(74,58,48,.10); }
.town-pin{ display:grid; width:40px; height:40px; place-items:center; border-radius:10px; background:var(--sage-soft); color:var(--sage-dark); margin-bottom:14px; }
.town-pin svg{ width:21px; height:21px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.town-card h3{ font-size:18px; margin-bottom:6px; }
.town-card p{ margin:0; font-size:14px; color:#514946; line-height:1.5; }
@media (max-width:980px){ .town-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .town-grid{ grid-template-columns:1fr; } }

/* === Lokal SEO: hero + whatis === */
.page-lokal-seo .hero{ position:relative; overflow:hidden; padding-top:120px; padding-bottom:84px;
  background:
   radial-gradient(circle at 88% 12%, rgba(67,111,95,.14), transparent 46%),
   radial-gradient(circle at 6% 94%, rgba(197,141,103,.12), transparent 48%),
   linear-gradient(135deg, var(--warm) 0%, #fffaf3 54%, var(--sage-soft) 100%); }
.page-lokal-seo .hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(67,111,95,.09) 1.4px, transparent 1.4px); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%); mask-image:linear-gradient(to bottom,#000,transparent 72%); opacity:.55; }
.page-lokal-seo .hero .container{ position:relative; z-index:2; }
.hero-map{ filter:drop-shadow(0 22px 50px rgba(74,58,48,.13)); }
.hero-map svg{ width:100%; height:auto; display:block; }
.whatis-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:center; }
.whatis-copy p{ color:#514946; font-size:18px; line-height:1.7; margin:0; }
.whatis-points{ list-style:none; margin:0; padding:26px; display:grid; gap:14px; background:var(--sage-soft); border:1px solid rgba(67,111,95,.16); border-radius:12px; }
.whatis-points li{ display:flex; gap:13px; align-items:center; font-weight:600; color:var(--ink); font-size:15px; }
.whatis-points .wp-ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#fff; color:var(--sage-dark); }
.whatis-points .wp-ic svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1080px){ .page-lokal-seo .hero-map{ max-width:460px; margin-top:8px; } }
@media (max-width:880px){ .whatis-grid{ grid-template-columns:1fr; gap:28px; } }

/* Lokal SEO: foto + overlay */
.page-lokal-seo .hero-photo-wrap{ position:relative; }
.hero-photo{ border-radius:16px; overflow:hidden; border:1px solid rgba(67,111,95,.16); box-shadow:0 22px 52px rgba(74,58,48,.17); }
.hero-photo img{ display:block; width:100%; height:auto; }
.hero-inset{ position:absolute; right:-16px; bottom:-18px; width:160px; background:#fffdf8; border:1px solid rgba(67,111,95,.14); border-radius:15px; padding:8px; box-shadow:0 16px 34px rgba(74,58,48,.22); }
.hero-inset svg{ display:block; width:100%; height:auto; border-radius:9px; }
@media (max-width:1080px){ .page-lokal-seo .hero-photo-wrap{ max-width:520px; } .hero-inset{ width:140px; } }
@media (max-width:560px){ .hero-inset{ width:116px; right:-8px; bottom:-12px; } }

/* Orter: regioner + taggar */
.town-regions{ display:grid; gap:28px; }
.town-region-title{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; margin:0 0 14px; }
.town-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.town-tag{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink); line-height:1; }
.town-tag--page{ background:var(--sage-soft); border-color:rgba(67,111,95,.30); color:var(--sage-dark); cursor:pointer; transition:background .15s ease; }
.town-tag--page:hover{ background:#d6e7dc; }
.town-tag .tt-arrow{ font-weight:800; }

/* Orter: rubrik-yta */
.towns-head{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:center; margin-bottom:44px; }
.towns-head-copy h2{ font-size:38px; line-height:1.08; margin-bottom:16px; }
.towns-head-copy p{ margin:0; color:#514946; font-size:18px; line-height:1.7; max-width:560px; }
.towns-head-visual svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 16px 36px rgba(74,58,48,.10)); }
@media (max-width:900px){ .towns-head{ grid-template-columns:1fr; gap:24px; } .towns-head-visual{ max-width:420px; } }

/* AI SEO: intro-split + GEO-callout */
.intro-split{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:56px; align-items:center; }
.intro-split--reverse{ grid-template-columns:minmax(0,1fr) 360px; }
.intro-split-visual svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 40px rgba(74,58,48,.10)); }
.intro-split-copy h2{ font-size:38px; line-height:1.08; margin-bottom:16px; }
.intro-split-copy p{ color:#514946; font-size:18px; line-height:1.7; margin:0; max-width:560px; }
.intro-split-copy p + p{ margin-top:14px; }
.geo-callout{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; align-items:center; padding:34px 40px; border-radius:14px; background:var(--sage-soft); border:1px solid rgba(67,111,95,.18); }
.geo-callout-icon{ width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:#fff; color:var(--sage-dark); }
.geo-callout-icon svg{ width:28px; height:28px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.geo-callout-copy h2{ font-size:24px; margin-bottom:6px; }
.geo-callout-copy p{ margin:0; color:#4f4843; font-size:16px; line-height:1.6; max-width:640px; }
.geo-callout .button{ white-space:nowrap; }
@media (max-width:900px){ .intro-split, .intro-split--reverse{ grid-template-columns:1fr; gap:26px; } .intro-split-visual{ max-width:360px; } .geo-callout{ grid-template-columns:1fr; gap:18px; text-align:left; } }

/* GEO: vs-jämförelse */
.compare-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.compare-card{ border-radius:14px; padding:32px 30px; border:1px solid var(--line); background:var(--paper); }
.compare-card--geo{ background:var(--sage-soft); border-color:rgba(67,111,95,.2); }
.compare-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.compare-tag{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:#fff; color:var(--muted); border:1px solid var(--line); }
.compare-card--geo .compare-tag{ background:var(--sage); color:#fff; border-color:transparent; }
.compare-head h3{ margin:0; font-size:21px; }
.compare-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.compare-list li{ display:flex; gap:12px; align-items:flex-start; color:#4f4843; font-size:15.5px; line-height:1.55; }
.compare-list .ci{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#fff; color:var(--sage-dark); margin-top:1px; }
.compare-card--geo .compare-list .ci{ background:#fff; color:var(--sage); }
.compare-list .ci svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:760px){ .compare-grid{ grid-template-columns:1fr; } }

/* Breadcrumbs (nivå 2 och nedåt) */
.page-geo .hero{ padding-top:78px; }
.hero:has(.breadcrumbs){ padding-top:78px; }
.breadcrumbs{ margin-bottom:14px; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:14px; }
.breadcrumbs li{ display:flex; align-items:center; gap:9px; color:var(--muted); }
.breadcrumbs a{ color:var(--sage-dark); text-decoration:none; font-weight:600; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs li[aria-current="page"]{ color:var(--muted); font-weight:500; }
.breadcrumbs .bc-sep{ width:6px; height:6px; flex:0 0 auto; }
.breadcrumbs .bc-sep svg{ width:6px; height:6px; stroke:var(--line); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* SEO-skribent: levande hero + avsnitt */
.page-seo-skribent .hero{ position:relative; overflow:hidden; }
.skribent-rotator{ display:inline-grid; vertical-align:bottom; color:var(--sage-dark); }
.skribent-rotator .sr-word{ grid-area:1 / 1; white-space:nowrap; opacity:0; transform:translateY(8px); animation:srCycle 9s infinite; }
.skribent-rotator .sr-word:nth-child(1){ animation-delay:0s; }
.skribent-rotator .sr-word:nth-child(2){ animation-delay:3s; }
.skribent-rotator .sr-word:nth-child(3){ animation-delay:6s; }
@keyframes srCycle{ 0%{opacity:0;transform:translateY(8px);} 4%{opacity:1;transform:translateY(0);} 30%{opacity:1;transform:translateY(0);} 36%{opacity:0;transform:translateY(-8px);} 100%{opacity:0;transform:translateY(-8px);} }

.write-mock{ background:#fffdf8; border:1px solid rgba(67,111,95,.16); border-radius:16px; box-shadow:0 22px 50px rgba(74,58,48,.12); padding:22px; }
.write-mock-bar{ display:flex; align-items:center; gap:7px; margin-bottom:18px; }
.write-mock-bar i{ width:10px; height:10px; border-radius:50%; background:#e6d9c8; display:block; }
.write-mock-bar span{ margin-left:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.write-line{ height:11px; border-radius:6px; background:#ece2d5; margin:0 0 14px; }
.write-line.is-head{ height:15px; width:62%; background:#cfe1d5; margin-bottom:20px; }
.write-line.w-90{ width:90%; } .write-line.w-80{ width:80%; } .write-line.w-70{ width:70%; }
.write-typing{ position:relative; display:flex; align-items:center; }
.write-typing .wt-fill{ height:11px; border-radius:6px; background:#9cc1ad; width:0; animation:wtType 9s steps(40,end) infinite; }
.write-typing .wt-caret{ width:2px; height:18px; background:var(--sage); margin-left:3px; animation:wtBlink 1s steps(1) infinite; }
@keyframes wtType{ 0%{width:0;} 45%{width:58%;} 60%{width:58%;} 62%{width:0;} 100%{width:0;} }
@keyframes wtBlink{ 50%{opacity:0;} }
.write-meta{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.write-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--sage-dark); background:var(--sage-soft); border-radius:999px; padding:6px 13px; }
.write-chip svg{ width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion: reduce){
  .skribent-rotator .sr-word, .write-typing .wt-fill, .write-typing .wt-caret{ animation:none; }
  .skribent-rotator .sr-word:nth-child(1){ opacity:1; transform:none; }
  .skribent-rotator .sr-word:nth-child(2), .skribent-rotator .sr-word:nth-child(3){ opacity:0; }
  .write-typing .wt-fill{ width:58%; }
}

/* Om-sidan: tidslinje + värderingskort */
.timeline{ position:relative; max-width:100%; margin:0; padding-left:46px; }
.timeline::before{ content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--sage), var(--sage-soft)); }
.timeline-item{ position:relative; padding:0 0 38px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-46px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--paper); border:3px solid var(--sage); box-shadow:0 0 0 5px var(--sage-soft); }
.timeline-year{ font-family:"Inter",sans-serif; font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--sage-dark); text-transform:uppercase; margin-bottom:4px; }
.timeline-item h3{ margin:0 0 6px; font-size:19px; }
.timeline-item p{ margin:0; color:#4f4843; font-size:15.5px; line-height:1.6; }

.values-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.value-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:28px 26px; }
.value-card .value-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--sage-soft); color:var(--sage-dark); margin-bottom:16px; }
.value-card .value-icon svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.value-card h3{ margin:0 0 8px; font-size:18px; }
.value-card p{ margin:0; color:#4f4843; font-size:15px; line-height:1.6; }

.om-stats{ display:flex; gap:18px; margin-top:26px; flex-wrap:wrap; }
.om-stat{ flex:1 1 140px; background:var(--sage-soft); border-radius:14px; padding:20px 22px; }
.om-stat b{ display:block; font-family:"Inter",sans-serif; font-size:30px; font-weight:800; color:var(--sage-dark); line-height:1; }
.om-stat span{ display:block; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--muted); }

@media (max-width:760px){ .values-grid{ grid-template-columns:1fr; } }

/* Om-sidan: citat-band */
.om-quote-section .container{ display:flex; justify-content:center; }
.om-quote{ position:relative; margin:0; max-width:880px; text-align:center; padding:8px 0; }
.om-quote-mark{ display:block; font-family:"Inter",sans-serif; font-size:64px; line-height:.6; font-weight:800; color:var(--sage); opacity:.45; margin-bottom:10px; }
.om-quote p{ margin:0; font-family:"Inter",sans-serif; font-size:27px; line-height:1.42; font-weight:700; color:var(--sage-dark); letter-spacing:-.01em; }
.om-quote cite{ display:block; margin-top:18px; font-style:normal; font-size:14px; font-weight:600; color:var(--muted); }
@media (max-width:760px){ .om-quote p{ font-size:21px; } }

/* Om-sidan: centrerad rubrik + expertis-moln */
.section-heading.is-center{ display:block; text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
.section-heading.is-center p{ margin-left:auto; margin-right:auto; }
.expertise-cloud{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:760px; margin:0 auto; }
.expertise-cloud .town-tag{ font-size:15px; padding:11px 18px; }

/* Om-sidan: verktygslåda */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; max-width:920px; margin:0 auto; }
.tool-card{ display:flex; align-items:center; gap:13px; padding:14px 16px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:12px; transition:border-color .15s ease, background .15s ease; }
.tool-card:hover{ border-color:rgba(67,111,95,.3); background:#fff; }
.tool-mono{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--sage-soft); color:var(--sage-dark); display:grid; place-items:center; font-family:"Inter",sans-serif; font-weight:800; font-size:14px; letter-spacing:.02em; }
.tool-card span{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.25; }
@media (max-width:520px){ .tools-grid{ grid-template-columns:1fr 1fr; } }

/* Artiklar: samlingssida */
.art-cover{ position:relative; display:grid; place-items:center; min-height:170px; overflow:hidden; }
.art-cover svg{ width:66px; height:66px; position:relative; z-index:1; }
.art-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-cover--sage{ background:linear-gradient(140deg,#e3eee7,#cfe1d5 70%); }
.art-cover--clay{ background:linear-gradient(140deg,#f4e6d8,#ecd6c0 70%); }
.art-cover--warm{ background:linear-gradient(140deg,#eef6f1,#dde9e0 70%); }
.art-cover::after{ content:""; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.30); top:-70px; right:-60px; }
.art-cover:has(img)::after{ display:none; }

.article-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:24px; }
.article-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease; }
.article-card:hover{ box-shadow:0 18px 40px rgba(74,58,48,.12); transform:translateY(-2px); }
.ac-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.article-tag{ display:inline-flex; align-items:center; align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sage-dark); background:var(--sage-soft); padding:5px 11px; border-radius:999px; margin-bottom:13px; }
.ac-body h3{ font-size:19px; line-height:1.25; margin:0 0 10px; }
.ac-body p{ margin:0; color:#4f4843; font-size:14.5px; line-height:1.55; flex:1; }
.article-meta{ margin-top:16px; font-size:13.5px; color:var(--muted); font-weight:600; }

/* Artiklar: hero-bakgrund (diskret pricknät) */
.page-artiklar .hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 90% 12%, rgba(67,111,95,.14), transparent 46%),
    radial-gradient(circle at 6% 96%, rgba(197,141,103,.12), transparent 48%),
    linear-gradient(120deg, var(--warm) 0%, #fffaf3 54%, var(--sage-soft) 100%); }
.page-artiklar .hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(67,111,95,.10) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%, transparent 74%);
  mask-image:linear-gradient(to bottom,#000 0%, transparent 74%); opacity:.55; }
.page-artiklar .hero .container{ position:relative; z-index:2; }

/* Artikel (enskild sida) */
.article-wrap{ max-width:none; margin:0; }
.article-prose h2{ font-size:26px; line-height:1.2; margin:44px 0 14px; }
.article-prose h2:first-child{ margin-top:0; }
.article-prose p{ font-size:17px; line-height:1.78; color:#3f3a37; margin:0 0 18px; }
.article-prose p.lead{ font-size:19px; line-height:1.7; color:#4f4843; margin-bottom:8px; }
.article-prose a:not(.button){ color:var(--sage-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.article-prose ul{ margin:4px 0 22px; padding-left:0; list-style:none; display:grid; gap:11px; }
.article-prose ul li{ position:relative; padding-left:26px; font-size:16.5px; line-height:1.6; color:#3f3a37; }
.article-prose ul li::before{ content:""; position:absolute; left:5px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--sage); }
.article-block{ margin:26px 0 30px; }
.article-figure{ margin:26px 0 30px; padding:28px 26px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.article-figure svg{ display:block; width:100%; height:auto; }
.article-figcaption{ margin-top:14px; text-align:center; font-size:13.5px; color:var(--muted); }
.article-prose .faq-panel{ display:block; margin-top:8px; padding:30px 34px; }
.article-prose .faq-item:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; }

/* Integritetspolicy */
.page-integritet .article-wrap{ max-width:760px; }
.legal-meta{ font-size:14.5px; color:var(--muted); font-weight:600; margin-top:8px; }
.legal-contact{ margin-top:10px; padding:20px 24px; background:var(--sage-soft); border:1px solid rgba(67,111,95,.16); border-radius:12px; }
.legal-contact p{ margin:0; }

/* Kontakt */
.contact-grid{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1fr); gap:52px; align-items:start; }
.contact-methods{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.contact-method{ display:flex; align-items:center; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.contact-method:hover{ border-color:rgba(67,111,95,.3); transform:translateY(-1px); }
.cm-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:10px; background:var(--sage-soft); color:var(--sage-dark); display:grid; place-items:center; }
.cm-icon svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cm-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cm-value{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.contact-steps{ background:var(--sage-soft); border:1px solid rgba(67,111,95,.14); border-radius:14px; padding:26px 28px; }
.contact-steps h2{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-dark); margin:0 0 18px; }
.contact-steps ol{ list-style:none; margin:0; padding:0; display:grid; gap:15px; counter-reset:cs; }
.contact-steps li{ display:flex; gap:14px; align-items:flex-start; color:#4f4843; font-size:15px; line-height:1.55; }
.contact-steps li::before{ counter-increment:cs; content:"0" counter(cs); font-family:"Inter",sans-serif; font-weight:800; color:var(--sage); min-width:24px; }
.contact-form-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px; box-shadow:0 14px 36px rgba(74,58,48,.07); }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.form-field .opt{ font-weight:500; color:var(--muted); }
.form-field .req{ color:var(--clay); font-weight:700; }
.form-field input, .form-field textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-soft); }
.form-field textarea{ resize:vertical; min-height:128px; }
.contact-form-card .button{ width:100%; justify-content:center; border:0; cursor:pointer; font-size:16px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* === Bildkomponenter === */
.media-band{ border-radius:16px; overflow:hidden; border:1px solid rgba(67,111,95,.14); box-shadow:var(--shadow); }
.media-band img{ width:100%; display:block; aspect-ratio:21/9; object-fit:cover; }
.media-band--tall img{ aspect-ratio:16/7; }
.media-figure{ border-radius:16px; overflow:hidden; border:1px solid rgba(67,111,95,.14); box-shadow:var(--shadow); margin:0; }
.media-figure img{ width:100%; display:block; }
.media-figure--wide img{ aspect-ratio:3/2; object-fit:cover; }
.media-figure--portrait img{ aspect-ratio:3/4; object-fit:cover; }
.media-figure--incopy{ margin-top:32px; }
.media-split{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:56px; align-items:center; }
.media-split-copy h2{ font-size:38px; line-height:1.08; margin:0 0 16px; }
.media-split-copy p{ color:#514946; font-size:18px; line-height:1.7; margin:0; max-width:640px; }
.media-section{ padding-top:0; }
@media (max-width:900px){
  .media-split{ grid-template-columns:1fr; gap:28px; }
  .media-figure--portrait{ max-width:360px; }
  .media-band img{ aspect-ratio:16/9; }
  .media-split-copy h2{ font-size:30px; }
}

/* === Artikel: innehållsförteckning === */
.toc{ background:var(--sage-soft); border:1px solid rgba(67,111,95,.18); border-radius:14px; padding:26px 30px; margin:34px 0 40px; }
.toc-title{ font-family:Inter,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--sage-dark); margin-bottom:14px; }
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:36px; }
.toc li{ margin-bottom:8px; break-inside:avoid; font-size:16px; }
.toc a{ color:#3c5a4f; text-decoration:underline; text-decoration-color:rgba(67,111,95,.3); text-underline-offset:3px; }
.toc a:hover{ text-decoration-color:var(--sage); }
@media (max-width:640px){ .toc ol{ columns:1; } }

/* === Artikel: sökintention === */
.intent-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.intent-card{ border:1px solid var(--line); border-radius:12px; padding:22px 20px; background:var(--paper); }
.intent-tag{ display:inline-block; font-family:Inter,sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-dark); background:var(--sage-soft); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
.intent-card h3{ font-size:17px; margin:0 0 8px; }
.intent-card p{ margin:0; font-size:15px; line-height:1.55; color:#514946; }
.intent-card .ex{ display:block; margin-top:10px; font-size:14px; color:var(--muted); font-style:italic; }
@media (max-width:900px){ .intent-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .intent-grid{ grid-template-columns:1fr; } }

/* === Artikel: vanliga misstag === */
.mistakes{ display:grid; gap:14px; }
.mistake{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; border:1px solid var(--line); border-left:4px solid var(--clay); border-radius:12px; padding:20px 24px; background:var(--paper); }
.mistake-num{ font-family:Inter,sans-serif; font-size:14px; font-weight:800; color:var(--clay); padding-top:2px; }
.mistake h3{ font-size:17px; margin:0 0 6px; }
.mistake p{ margin:0; font-size:15.5px; line-height:1.6; color:#514946; }

/* === Artikel: läs vidare === */
.next-reads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.next-read{ display:block; border:1px solid var(--line); border-radius:12px; padding:22px 24px; background:var(--paper); transition:border-color .18s, transform .18s; }
.next-read:hover{ border-color:rgba(67,111,95,.42); transform:translateY(-2px); }
.next-read h3{ font-size:17px; margin:0 0 6px; color:var(--sage-dark); }
.next-read p{ margin:0; font-size:15px; line-height:1.55; color:#514946; }
.next-read .arrow{ display:inline-block; margin-top:10px; font-size:14.5px; font-weight:600; color:var(--sage); }
@media (max-width:640px){ .next-reads{ grid-template-columns:1fr; } }

/* === Interaktiv SEO-hälsokoll === */
.tool{ border:1px solid rgba(67,111,95,.22); border-radius:16px; background:var(--paper-soft); box-shadow:var(--shadow-soft); overflow:hidden; }
.tool-head{ background:var(--sage-soft); border-bottom:1px solid rgba(67,111,95,.16); padding:24px 30px; }
.tool-head h3{ margin:0 0 6px; font-size:20px; }
.tool-head p{ margin:0; font-size:15px; color:#4f4843; }
.tool-body{ padding:10px 30px 26px; }
.tool-q{ border-bottom:1px solid var(--line); padding:18px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.tool-q:last-of-type{ border-bottom:0; }
.tool-q .qt{ font-size:16px; line-height:1.5; color:var(--ink); }
.tool-opts{ display:flex; gap:6px; flex:0 0 auto; }
.tool-opts button{ font-family:inherit; font-size:14px; font-weight:600; color:#5d534d; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:all .15s; }
.tool-opts button:hover{ border-color:var(--sage); color:var(--sage-dark); }
.tool-opts button[aria-pressed="true"]{ background:var(--sage); border-color:var(--sage); color:#fff; }
.tool-foot{ border-top:1px solid var(--line); padding:22px 30px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.tool-progress{ font-size:14.5px; color:var(--muted); }
.tool-result{ padding:0 30px 30px; }
.tool-score{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.tool-score b{ font-family:Inter,sans-serif; font-size:38px; font-weight:800; color:var(--sage-dark); line-height:1; }
.tool-score span{ font-size:15px; color:var(--muted); }
.tool-verdict{ font-size:17px; line-height:1.6; margin:0 0 22px; color:#4a423e; }
.tool-actions{ display:grid; gap:12px; }
.tool-action{ border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:10px; padding:16px 20px; background:#fff; }
.tool-action h4{ margin:0 0 5px; font-size:16px; }
.tool-action p{ margin:0; font-size:15px; line-height:1.55; color:#514946; }
.tool-action a{ color:var(--sage-dark); text-decoration:underline; text-underline-offset:3px; }
.tool-hidden{ display:none; }
@media (max-width:620px){
  .tool-head,.tool-body,.tool-foot,.tool-result{ padding-left:20px; padding-right:20px; }
  .tool-q{ grid-template-columns:1fr; gap:12px; }
  .tool-opts{ width:100%; }
  .tool-opts button{ flex:1; }
}

/* === Artikel: datatabell === */
.spec-table{ width:100%; border-collapse:collapse; font-size:15.5px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.spec-table th{ text-align:left; font-family:Inter,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-dark); background:var(--sage-soft); padding:14px 18px; border-bottom:1px solid rgba(67,111,95,.18); }
.spec-table td{ padding:14px 18px; border-bottom:1px solid var(--line); color:#514946; vertical-align:top; }
.spec-table tr:last-child td{ border-bottom:0; }
.spec-table td:first-child{ font-weight:600; color:var(--ink); }
.pill{ display:inline-block; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.pill--good{ background:#e3eee7; color:#31564c; }
.pill--mid{ background:#faf0e2; color:#8a6a51; }
.pill--bad{ background:#f6e2dd; color:#8f4b3c; }
.table-scroll{ overflow-x:auto; }

/* === Artikel: checklista === */
.check-group{ margin-bottom:26px; }
.check-group h3{ font-size:18px; margin:0 0 4px; }
.check-group .cg-note{ font-size:14.5px; color:var(--muted); margin:0 0 14px; }
.check-item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:var(--paper); margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s; }
.check-item:hover{ border-color:rgba(67,111,95,.4); }
.check-item.is-done{ background:var(--sage-soft); border-color:rgba(67,111,95,.3); }
.check-box{ width:20px; height:20px; border:2px solid #cbbfae; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; margin-top:2px; background:#fff; }
.check-item.is-done .check-box{ background:var(--sage); border-color:var(--sage); }
.check-box svg{ width:12px; height:12px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.check-item.is-done .check-box svg{ opacity:1; }
.check-item .ci-t{ font-size:15.5px; line-height:1.5; color:var(--ink); }
.check-item .ci-d{ display:block; font-size:14px; color:var(--muted); margin-top:3px; line-height:1.5; }
.check-bar{ position:sticky; bottom:16px; margin-top:22px; background:var(--sage-dark); color:#fff; border-radius:12px; padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 14px 32px rgba(49,86,76,.3); }
.check-bar b{ font-family:Inter,sans-serif; font-size:19px; }
.check-track{ flex:1; height:7px; background:rgba(255,255,255,.24); border-radius:99px; overflow:hidden; max-width:340px; }
.check-fill{ height:100%; width:0; background:#a8d0ba; border-radius:99px; transition:width .25s; }
.check-reset{ background:none; border:0; color:rgba(255,255,255,.8); font-family:inherit; font-size:14px; cursor:pointer; text-decoration:underline; padding:0; }
@media (max-width:600px){ .check-bar{ flex-wrap:wrap; } .check-track{ order:3; max-width:none; width:100%; } }

/* === Artikel: kalkylator === */
.calc-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.calc-row:last-of-type{ border-bottom:0; }
.calc-row label{ font-size:16px; color:var(--ink); }
.calc-row .cr-note{ display:block; font-size:14px; color:var(--muted); margin-top:3px; }
.calc-row input[type=number], .calc-row select{ font-family:inherit; font-size:15.5px; padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); min-width:150px; }
.calc-row input:focus, .calc-row select:focus{ outline:2px solid rgba(67,111,95,.4); outline-offset:1px; }
.calc-out{ background:var(--sage-soft); border-top:1px solid rgba(67,111,95,.18); padding:26px 30px; }
.calc-big{ font-family:Inter,sans-serif; font-size:36px; font-weight:800; color:var(--sage-dark); line-height:1.1; margin-bottom:6px; }
.calc-sub{ font-size:15.5px; color:#4f4843; margin:0; line-height:1.6; }
.calc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.calc-stat{ background:#fff; border:1px solid rgba(67,111,95,.16); border-radius:10px; padding:15px 18px; }
.calc-stat b{ display:block; font-family:Inter,sans-serif; font-size:22px; color:var(--sage-dark); }
.calc-stat span{ font-size:13.5px; color:var(--muted); }
@media (max-width:620px){
  .calc-row{ grid-template-columns:1fr; gap:10px; }
  .calc-grid{ grid-template-columns:1fr; }
  .calc-out{ padding:22px 20px; }
}

/* === Artikel: prismodeller === */
.model-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.model-card{ border:1px solid var(--line); border-radius:14px; padding:26px 28px; background:var(--paper); }
.model-card h3{ font-size:19px; margin:0 0 4px; }
.model-card .mc-range{ font-family:Inter,sans-serif; font-size:14px; font-weight:700; color:var(--sage-dark); background:var(--sage-soft); border-radius:999px; padding:4px 12px; display:inline-block; margin-bottom:12px; }
.model-card p{ margin:0 0 10px; font-size:15.5px; line-height:1.6; color:#514946; }
.model-card .mc-fit{ font-size:14.5px; color:var(--muted); margin:0; }
@media (max-width:700px){ .model-grid{ grid-template-columns:1fr; } }

/* === Artikel: exempelruta === */
.example{ border:1px solid rgba(197,141,103,.35); border-left:4px solid var(--clay); border-radius:12px; background:#fdf7f0; padding:22px 26px; }
.example .ex-tag{ font-family:Inter,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8a6a51; margin-bottom:8px; }
.example p:last-child{ margin-bottom:0; }
.art-cover--mist{ background:linear-gradient(140deg,#eaf1ec,#d6e5db 70%); }
.art-cover--sand{ background:linear-gradient(140deg,#f6efe4,#eadfcc 70%); }

/* === Artikel: värdet av hjälp === */
.beyond{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4px; }
.beyond-card{ border:1px solid var(--line); border-radius:12px; padding:22px 24px; background:var(--paper); }
.beyond-card h3{ font-size:16.5px; margin:0 0 6px; display:flex; align-items:center; gap:9px; }
.beyond-card h3 .bi{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--sage-soft); color:var(--sage-dark); display:grid; place-items:center; }
.beyond-card h3 .bi svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.beyond-card p{ margin:0; font-size:15px; line-height:1.6; color:#514946; }
@media (max-width:640px){ .beyond{ grid-template-columns:1fr; } }

/* === Artikelsidor: bakgrundsvariation === */
/* Grundton per artikel, subtil skillnad mellan sidorna */
.art-guide  { background:linear-gradient(180deg,#fffaf3 0%,#fbfdfa 60%,#f2f8f4 100%); }
.art-sokord { background:linear-gradient(180deg,#fffaf3 0%,#fdfaf5 58%,#f6f0e7 100%); }
.art-analys { background:linear-gradient(180deg,#fffaf3 0%,#f8fcf9 60%,#eef6f1 100%); }
.art-teknisk{ background:linear-gradient(180deg,#fffaf3 0%,#fbfcf8 58%,#f1f4ec 100%); }
.art-pris   { background:linear-gradient(180deg,#fffaf3 0%,#fdfaf4 60%,#f6f0e6 100%); }

/* Artikeltexten delas i flera sektioner, som på tjänstesidorna.
   Sektioner som ska bryta av får en tonad bakgrund i full bredd. */
.article-section{ padding:0; }

/* Tonat band. Padding ger luft mellan linjen och texten, marginalen
   ger luft mot de vanliga sektionerna över och under. */
.section.article-band{
  background:rgba(227,238,231,.42);
  border-top:1px solid rgba(67,111,95,.10);
  border-bottom:1px solid rgba(67,111,95,.10);
  padding:58px 0;
  margin:52px 0;
}
.section.article-band--clay{
  background:rgba(244,230,216,.46);
  border-color:rgba(197,141,103,.14);
}
/* Första sektionen under heron behöver egen luft, annars klistras
   ingressen mot linjen. */
.hero + .article-section{ padding-top:44px; }

/* Bara inuti ett band nollas marginalerna, så avståndet till linjen
   blir exakt det paddingen säger. I vanliga sektioner får rubrikernas
   egna marginaler skapa rytmen mellan avsnitten. */
.section.article-band > .container > .article-prose > *:first-child{ margin-top:0; }
.section.article-band > .container > .article-prose > *:last-child{ margin-bottom:0; }

@media (max-width:760px){
  .section.article-band{ padding:40px 0; margin:36px 0; }
}

/* === Artikel: värdet av hjälp === */
.beyond{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4px; }
.beyond-card{ border:1px solid var(--line); border-radius:12px; padding:22px 24px; background:var(--paper); }
.beyond-card h3{ font-size:16.5px; margin:0 0 6px; display:flex; align-items:center; gap:9px; }
.beyond-card h3 .bi{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--sage-soft); color:var(--sage-dark); display:grid; place-items:center; }
.beyond-card h3 .bi svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.beyond-card p{ margin:0; font-size:15px; line-height:1.6; color:#514946; }
@media (max-width:640px){ .beyond{ grid-template-columns:1fr; } }

/* === Artikelsidor: bakgrundsvariation === */

/* === Artikel: värdet av hjälp === */
.beyond{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4px; }
.beyond-card{ border:1px solid var(--line); border-radius:12px; padding:22px 24px; background:var(--paper); }
.beyond-card h3{ font-size:16.5px; margin:0 0 6px; display:flex; align-items:center; gap:9px; }
.beyond-card h3 .bi{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--sage-soft); color:var(--sage-dark); display:grid; place-items:center; }
.beyond-card h3 .bi svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.beyond-card p{ margin:0; font-size:15px; line-height:1.6; color:#514946; }
@media (max-width:640px){ .beyond{ grid-template-columns:1fr; } }


/* Ortstagg som länk ska inte få understruken text */
a.town-tag{ text-decoration:none; }
a.town-tag--page:hover{ background:#d6e7dc; }

/* Stockholm-sidan */
.page-stockholm{
  background:linear-gradient(180deg,#fffaf3 0%,#fbfdfa 58%,#eef6f1 100%);
}

/* Löpande brödtext i en tjänstesektion, en kolumn */
.section-prose{ max-width:780px; }
.section-prose h2{ font-size:38px; line-height:1.1; margin:0 0 20px; }
@media (max-width:760px){ .section-prose h2{ font-size:29px; } }
.section-prose p{ font-size:18px; line-height:1.75; color:#514946; margin:0 0 16px; }
.section-prose p:last-child{ margin-bottom:0; }

/* === Mobilmeny === */
.nav-toggle{ display:none; }

@media (max-width:760px){
  .site-header{ position:sticky; }
  .nav-shell{ position:relative; height:68px; }

  .nav-toggle{
    display:grid; place-items:center;
    width:44px; height:44px; padding:0;
    background:#fff; border:1px solid rgba(67,111,95,.28);
    border-radius:10px; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s, border-color .15s;
  }
  .nav-toggle:hover{ background:var(--warm); }
  .nav-toggle:focus-visible{
    background:var(--warm);
    outline:2px solid var(--sage);
    outline-offset:2px;
  }
  .nav-toggle-bars{ display:grid; gap:5px; width:20px; }
  .nav-toggle-bars span{
    display:block; height:2px; width:100%;
    background:var(--sage-dark); border-radius:2px;
    transition:transform .22s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Panelen: samma nav-element, annan skepnad */
  .nav-links{
    display:none;
    position:absolute; top:100%; left:-16px; right:-16px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 44px rgba(74,58,48,.16);
    padding:8px 20px 20px;
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
  }
  .nav-links.is-open{ display:flex; }

  .nav-links > a,
  .nav-item.has-dropdown > a{
    display:block; padding:14px 4px;
    border-bottom:1px solid var(--line);
    font-size:17px;
  }
  .nav-item.has-dropdown{ display:block; }
  .nav-item.has-dropdown > a .chevron{ display:none; }

  /* Undermenyn ligger utfälld direkt, inget extra klick.
     Desktop-läget döljer den med opacity och pointer-events,
     så de måste nollställas här. */
  .nav-item.has-dropdown .dropdown-menu{
    display:block; position:static;
    background:transparent; border:0; box-shadow:none;
    padding:0 0 0 16px; min-width:0;
    opacity:1; pointer-events:auto; transform:none; transition:none;
  }
  .nav-item.has-dropdown .dropdown-menu::before{ display:none; }
  .nav-item.has-dropdown .dropdown-menu a{
    display:block; padding:12px 4px; font-size:15.5px;
    color:var(--muted); border-bottom:1px solid var(--line);
  }

  .nav-contact{
    margin-top:16px; text-align:center;
    border-bottom:0 !important;
    background:var(--sage); color:#fff;
    border-radius:999px; padding:13px 18px !important;
    font-weight:700;
  }
}

/* I en kolumn finns ingen diagonal, låt korten alternera i stället */
@media (max-width:760px){
  .why-card:nth-child(3){ background:#477463; color:#fff; }
  .why-card:nth-child(3) p{ color:rgba(255,255,255,.86); }
  .why-card:nth-child(3) .why-icon{ background:rgba(255,255,255,.13); color:#fff; }
  .why-card:nth-child(4){ background:rgba(255,253,248,.96); color:var(--ink); }
  .why-card:nth-child(4) p{ color:var(--muted); }
  .why-card:nth-child(4) .why-icon{ background:linear-gradient(135deg,var(--warm-2),#fffaf3); color:var(--sage); }
}

/* Headertexten är längre nu, krymp den något på riktigt smala skärmar
   så att den aldrig krockar med menyknappen */
@media (max-width:400px){
  .brand{ font-size:16px; }
}

/* === Verktygssida === */
.tool-badge{
  display:inline-block; font-family:Inter,sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase; color:#fff; background:var(--sage);
  border-radius:999px; padding:6px 14px; margin-bottom:16px;
}
.art-verktyg{ background:linear-gradient(180deg,#fffaf3 0%,#f8fcf9 55%,#eaf3ee 100%); }

.tool-note{
  border:1px solid rgba(197,141,103,.32); border-left:4px solid var(--clay);
  border-radius:12px; background:#fdf7f0; padding:22px 26px; margin:0 0 40px;
}
.tool-note p{ margin:0; font-size:16px; line-height:1.65; color:#5c5049; }
.tool-note a{ color:var(--sage-dark); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* Länkkort till verktyget, används i guiderna */
.tool-promo{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center;
  border:1px solid rgba(67,111,95,.26); border-radius:14px;
  background:var(--sage-soft); padding:22px 26px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.tool-promo:hover{
  border-color:rgba(67,111,95,.5); transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(74,58,48,.12);
}
.tool-promo-icon{
  display:grid; place-items:center; width:52px; height:52px; flex:0 0 auto;
  border-radius:12px; background:#fff; border:1px solid rgba(67,111,95,.2);
}
.tool-promo-icon svg{ width:26px; height:26px; stroke:var(--sage); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tool-promo-copy strong{ display:block; font-family:Inter,sans-serif; font-size:17.5px; color:var(--sage-dark); margin-bottom:3px; }
.tool-promo-copy span{ display:block; font-size:15px; line-height:1.55; color:#514946; }
.tool-promo-arrow{ font-size:20px; color:var(--sage); font-weight:700; }
@media (max-width:600px){
  .tool-promo{ grid-template-columns:auto minmax(0,1fr); gap:16px; padding:20px; }
  .tool-promo-arrow{ display:none; }
}

/* Verktygskortet på artikellistan */
.article-card--tool .art-cover{ background:linear-gradient(140deg,#436f5f,#31564c 70%); }
.article-card--tool .art-cover::after{ background:rgba(255,255,255,.12); }
.article-card--tool .article-tag{ background:var(--sage); color:#fff; }

/* === Formulärets statusmeddelande === */
.form-status{
  margin:0 0 16px; padding:14px 18px; border-radius:10px;
  font-size:15.5px; line-height:1.55; border:1px solid transparent;
}
.form-status.is-ok{ background:var(--sage-soft); border-color:rgba(67,111,95,.3); color:var(--sage-dark); }
.form-status.is-err{ background:#faeceb; border-color:rgba(160,80,64,.28); color:#8f4b3c; }
.contact-form-card button[disabled]{ opacity:.65; cursor:default; }