/* ==========================================================================
   Ridgeback · sektioner på startsidan
   ========================================================================== */

/* --- Hero: Väggen som helbild ----------------------------------------
   Bokstäverna RBD är motivet och får aldrig ha text över sig. Bilden
   beskärs så att hela RBD syns i överkant. Texten står på en tonplatta
   i Natt längs underkanten, under bokstäverna (manualen s. 35–36). */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--rbd-natt);
  height: min(60vw, calc(100svh - var(--nav-h)), 920px);
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 64px clamp(36px, 5vh, 56px);
  /* tonplatta: 0 → 85 % Natt på de översta 40 px, sedan 85 % */
  background: linear-gradient(to bottom, rgb(12 26 35 / 0), rgb(12 26 35 / .85) 40px, rgb(12 26 35 / .85));
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
}
.hero h1 { margin: 0; font-size: clamp(40px, 4.4vw, 64px); }
.hero .rbd-kicker { margin-bottom: 14px; }
.hero .rbd-ingress { margin: 0 0 24px; color: var(--rbd-krita); font-size: clamp(18px, 1.6vw, 22px); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero .rbd-textlank { color: var(--rbd-vit); }

/* Mindre skärmar: bilden hel överst, texten under på Natt */
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; display: block; }
  .hero__bild { position: static; aspect-ratio: 4 / 3; height: auto; }
  .hero__text { background: var(--rbd-natt); padding-block: 36px 48px; }
  .hero__grid { grid-template-columns: 1fr; }
}

/* --- Gemensamt ------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.rbd-sektion h2 { max-width: 18em; }

/* --- Growth Model ---------------------------------------------------- */
.gm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.gm__flikar { display: grid; gap: 0; margin: 8px 0 24px; border-top: 1px solid var(--rbd-linje); }
.gm__flik {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--rbd-linje);
  font: inherit; text-align: left; cursor: pointer; color: var(--rbd-gra); position: relative;
}
.gm__flik::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--rbd-djupbla);
                   transform: scaleX(0); transform-origin: left; }
.gm__flik[aria-selected="true"]::after { transform: scaleX(1); transition: transform var(--gm-tid, 6s) linear; }
.gm.is-pausad .gm__flik[aria-selected="true"]::after { transition: none; }
.gm__nr { font-weight: var(--rbd-light); font-size: 18px; color: var(--rbd-massing); min-width: 28px; }
.gm__namn { font-weight: var(--rbd-bold); font-size: 22px; letter-spacing: var(--rbd-ls-rubrik); }
.gm__flik[aria-selected="true"] .gm__namn, .gm__flik:hover .gm__namn { color: var(--rbd-skiffer); }
.gm__panel h3 { font-size: 20px; margin-bottom: 8px; }
.gm__panel p { color: var(--rbd-gra); margin: 0; }

.gm__trappa { position: relative; aspect-ratio: 1 / .78; display: flex; align-items: flex-end; gap: 0; padding-bottom: 6%; }
.gm__lager {
  position: relative; flex: 1; display: flex; align-items: flex-start; padding: 18px;
  color: var(--rbd-vit); font: var(--rbd-medium) 12px/1.3 var(--rbd-font); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase;
  transform-origin: bottom; transform: scaleY(.02);
  transition: transform .9s var(--rbd-ease), box-shadow .4s var(--rbd-ease), filter .4s;
}
.gm__lager span { opacity: 0; transition: opacity .4s .6s; }
.gm__lager--1 { height: 46%; background: var(--rbd-steg-4); color: var(--rbd-skiffer); z-index: 1; }
.gm__lager--2 { height: 72%; background: var(--rbd-steg-3); z-index: 2; margin-left: -6%; transition-delay: .15s; }
.gm__lager--3 { height: 100%; background: var(--rbd-steg-1); z-index: 3; margin-left: -6%; transition-delay: .3s; }
.gm__golv { position: absolute; left: 4%; right: -2%; bottom: 3%; height: 6%; background: radial-gradient(closest-side, rgb(12 26 35 / .16), transparent); z-index: 0; }
.gm.is-synlig .gm__lager { transform: none; }
.gm.is-synlig .gm__lager span { opacity: 1; }
/* Aktivt lager lyfts till nivå R, de andra vilar */
.gm__trappa .gm__lager { box-shadow: var(--rbd-niva-b); }
.gm__trappa[data-aktiv="1"] .gm__lager--1,
.gm__trappa[data-aktiv="2"] .gm__lager--2,
.gm__trappa[data-aktiv="3"] .gm__lager--3 { box-shadow: var(--rbd-niva-r); translate: 0 -12px; }
.gm__trappa[data-aktiv] .gm__lager { transition: transform .9s var(--rbd-ease), box-shadow .4s var(--rbd-ease), translate .5s var(--rbd-ease); }
@media (max-width: 900px) {
  .gm__grid { grid-template-columns: 1fr; gap: 40px; }
  .gm__trappa { order: -1; max-width: 520px; }
}

/* --- Tjänstehjulet --------------------------------------------------- */
.tj__rubrik { margin-bottom: 48px; }
.tj__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
/* Tjänstehjulet: solida tårtbitar som går ända in, vald bit skjuts ut i Djupblå. Följer grafiska profilen. */
.hjul-scen { position: relative; max-width: 540px; margin-inline: auto; }
.hjul { width: 100%; height: auto; display: block; overflow: visible; }

.hjul__bitar { filter: drop-shadow(0 16px 32px rgb(12 26 35 / .10)); }
.hjul__seg { cursor: pointer; outline: none; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .5s; }
.hjul__bit { fill: var(--rbd-vit); transition: fill .35s; }
.hjul__seg .hjul__ikon { color: var(--rbd-djupbla); transition: color .35s; }
.hjul__seg text { font: var(--rbd-medium) 14px var(--rbd-font); fill: var(--rbd-skiffer); transition: fill .35s; }
.hjul__seg:hover .hjul__bit { fill: var(--rbd-ljusbla-30); }
.hjul__seg:hover { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)); }
.hjul__seg:focus-visible .hjul__bit { stroke: var(--rbd-steg-2); stroke-width: 2; }

/* Vald bit: skjuts ut, Djupblå, ikon i Mässing, skugga nedåt höger */
.hjul__seg[aria-pressed="true"] { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(6px 14px 18px rgb(12 26 35 / .2)); }
.hjul__seg[aria-pressed="true"] .hjul__bit { fill: var(--rbd-djupbla); }
.hjul__seg[aria-pressed="true"] .hjul__ikon { color: var(--rbd-massing); }
.hjul__seg[aria-pressed="true"] text { fill: var(--rbd-vit); }

/* Förloppslinje Djupblå till Mässing */
.hjul__spar { fill: none; stroke: var(--rbd-linje); stroke-width: 3; }
.hjul__forlopp { fill: none; stroke: url(#hjul-regnbage); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; transition: opacity .4s; }
.hjul-scen.is-auto .hjul__forlopp { opacity: 1; animation: hjul-forlopp var(--hjul-tid, 4.5s) linear forwards; }
.hjul-scen.is-paus .hjul__forlopp { animation-play-state: paused; }
@keyframes hjul-forlopp { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }

/* Inflygning */
.js .hjul-scen:not(.is-synlig) .hjul__seg { opacity: 0; transform: scale(.9); }
.js .hjul-scen.is-synlig:not(.is-klar) .hjul__seg { transition-delay: calc(var(--i) * 70ms); }

/* Informationskortet */
.tj__info { --farg: var(--rbd-djupbla); border-top: 4px solid var(--rbd-massing); }
.tj__panel .rbd-kicker { color: var(--rbd-massing); }
.tj__punkter .rbd-ikon { color: var(--rbd-djupbla); }

@media (prefers-reduced-motion: reduce) {
  .js .hjul-scen .hjul__seg { opacity: 1; transition: none; }
  .hjul__forlopp { display: none; }
}

.tj__panel .rbd-kicker { color: var(--farg); }
.tj__panel h3 .rbd-ikon { color: var(--rbd-djupbla); }
.tj__punkter .rbd-ikon { color: var(--farg); }

@media (prefers-reduced-motion: reduce) {
  .js .hjul-scen .hjul__seg { opacity: 1; transition: none; }
  .hjul__forlopp { display: none; }
}

.tj__info { padding: clamp(28px, 4vw, 48px); min-height: 520px; display: flex; }
.tj__panel { display: flex; flex-direction: column; gap: 0; width: 100%; animation: tj-in .45s var(--rbd-ease); }
.tj__panel[hidden] { display: none; }
@keyframes tj-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tj__panel h3 { display: flex; align-items: center; gap: 14px; font-size: 30px; margin-bottom: 14px; }
.tj__panel h3 .rbd-ikon { color: var(--rbd-djupbla); }
.tj__panel > p { color: var(--rbd-skiffer); margin-bottom: 20px; }
.tj__punkter { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.tj__punkter li { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 16px; }
.tj__punkter .rbd-ikon { width: 20px; height: 20px; color: var(--rbd-steg-2); }
.tj__citat { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; padding: 20px 0; margin: auto 0 20px;
             border-top: 1px solid var(--rbd-linje); }
.tj__citat img { width: 64px; height: 64px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--rbd-dimma); }
.tj__citat blockquote { border: 0; padding: 0; margin: 0 0 6px; font-size: 18px; line-height: 1.4; max-width: none; }
.tj__citat figcaption { margin: 0; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .06em; color: var(--rbd-gra); }
@media (max-width: 960px) {
  .tj__grid { grid-template-columns: 1fr; gap: 32px; }
  .tj__info { min-height: 0; }
  .hjul-scen { max-width: 440px; }
}


/* --- Långsiktighet och case -------------------------------------------- */
.lang__topp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-bottom: 64px; }
.lang__risk { display: grid; gap: 28px; padding-top: 8px; }
.lang__case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.case { display: flex; flex-direction: column; padding: 32px 28px; background: var(--rbd-vit); }
.case h3 { font-size: 22px; margin-bottom: 10px; }
.case p { font-size: 15px; line-height: 1.55; color: var(--rbd-gra); margin-bottom: 28px; }
.case > :last-child { margin-top: auto; }
.case.rbd-niva-r { translate: 0 -16px; }
.case__siffra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; color: var(--rbd-djupbla); }
.case__siffra span { font-size: 56px; font-weight: var(--rbd-light); line-height: 1; }
.case__siffra i { font-style: normal; font-size: 28px; color: var(--rbd-massing); }
.case__siffra small { flex-basis: 100%; font-size: 14px; color: var(--rbd-gra); }
.case__tid li { padding-top: 26px; }
.case__tid strong { font-size: 14px; }
.case__ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rbd-dimma); color: var(--rbd-djupbla); }
.lang__citat { margin: 80px 0 0 auto; max-width: 34em; }
@media (max-width: 960px) {
  .lang__topp { grid-template-columns: 1fr; gap: 32px; }
  .lang__case { grid-template-columns: 1fr; }
  .case.rbd-niva-r { translate: none; }
  .lang__citat { margin: 56px 0 0; }
}

/* --- Nyckeltal ----------------------------------------------------------- */
.siffror { padding-block: clamp(56px, 8vw, 96px); }
.siffror__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.siffror .rbd-nyckeltal__varde { font-size: clamp(56px, 6vw, 88px); }
.siffror .rbd-nyckeltal__etikett { color: var(--rbd-steg-4); max-width: 16em; }
@media (max-width: 760px) { .siffror__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

/* --- Teamet --------------------------------------------------------------- */
.team__topp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.team__topp .rbd-ingress { margin: 0; }
.team__grid { list-style: none; padding: 0; margin: 0 0 80px; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.person { position: relative; margin: 0; overflow: hidden; background: var(--rbd-dimma); outline: none; cursor: default; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--rbd-ease); }
.person__info {
  position: absolute; inset: auto 0 0 0; padding: 48px 20px 20px;
  background: linear-gradient(to top, rgb(12 26 35 / .85) 60%, rgb(12 26 35 / 0));
  color: var(--rbd-vit);
  transform: translateY(calc(100% - 76px));
  transition: transform .45s var(--rbd-ease);
}
.person__info strong { display: block; font-size: 17px; }
.person__roll { display: block; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .06em; color: var(--rbd-massing); margin-top: 2px; }
.person__info p { font-size: 14px; line-height: 1.45; color: var(--rbd-krita); margin: 14px 0 10px; opacity: 0; transition: opacity .3s; }
.person__info a { font-size: 13px; color: var(--rbd-steg-4); opacity: 0; transition: opacity .3s; }
.person:hover .person__info, .person:focus-within .person__info, .person:focus .person__info { transform: none; }
.person:hover .person__info p, .person:hover .person__info a,
.person:focus-within .person__info p, .person:focus-within .person__info a { opacity: 1; }
.person:hover img { transform: scale(1.03); }
.person:focus-visible { outline: 2px solid var(--rbd-steg-2); outline-offset: 3px; }
@media (hover: none) {
  .person__info { transform: none; }
  .person__info p { display: none; }
  .person__info a { opacity: 1; }
}
@media (max-width: 900px) {
  .team__topp { grid-template-columns: 1fr; gap: 16px; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

.rekry { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--rbd-vit); overflow: hidden; }
.rekry__video { background: var(--rbd-vit); display: grid; place-items: center; }
.rekry__video video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
.rekry__text { padding: clamp(28px, 4vw, 56px); }
.rekry__text h3 { font-size: 28px; }
.rekry__text p { color: var(--rbd-gra); }
.rekry__lista { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.rekry__lista li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; }
@media (max-width: 900px) { .rekry { grid-template-columns: 1fr; } }

/* --- Tankar och insikter ------------------------------------------------- */
.insikter__topp { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.insikter__topp h2 { margin: 0; }
.insikter__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.artikel { display: flex; flex-direction: column; padding: 28px; color: var(--rbd-skiffer); text-decoration: none;
           transition: box-shadow .3s var(--rbd-ease), translate .3s var(--rbd-ease); }
.artikel:hover { box-shadow: var(--rbd-niva-r); translate: -1px -3px; }
.artikel__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .06em; color: var(--rbd-gra); margin-bottom: 18px; }
.artikel__meta .rbd-ikon { width: 20px; height: 20px; }
.artikel h3 { font-size: 22px; margin-bottom: 10px; }
.artikel p { font-size: 15px; line-height: 1.55; color: var(--rbd-gra); margin-bottom: 24px; }
.artikel .rbd-textlank { margin-top: auto; color: var(--rbd-djupbla); }
.nyhetsbrev { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: center;
              padding: clamp(24px, 4vw, 40px); background: var(--rbd-ljusbla-30); }
.nyhetsbrev h3 { margin-bottom: 6px; }
.nyhetsbrev p { margin: 0; color: var(--rbd-gra); font-size: 15px; }
.nyhetsbrev__falt { display: flex; gap: 8px; }
.nyhetsbrev__falt input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--rbd-steg-4);
                          border-radius: var(--rbd-radie); background: var(--rbd-vit); color: var(--rbd-skiffer); }
.nyhetsbrev__falt input:focus { outline: none; border-color: var(--rbd-djupbla); box-shadow: 0 0 0 3px var(--rbd-ljusbla-30); }
.nyhetsbrev__svar { grid-column: 1 / -1; font-weight: var(--rbd-medium); color: var(--rbd-skiffer) !important; }
.nyhetsbrev__svar:empty { display: none; }
@media (max-width: 900px) {
  .insikter__grid { grid-template-columns: 1fr; }
  .nyhetsbrev { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .nyhetsbrev__falt { flex-direction: column; } }

/* --- Om Ridgeback ---------------------------------------------------------- */
.om__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.om__grid p:not(.rbd-ingress) { color: var(--rbd-skiffer); }
.om__bild { padding-right: 28px; }
.om__bild img { aspect-ratio: 2508 / 1536; object-fit: cover; background: var(--rbd-vit); }
.om__varden { margin-top: 96px; }
.om__varden h3 { margin-bottom: 24px; }
.om__varden-lista { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.om__varden-lista li { margin: 0; padding: 24px 20px; background: var(--rbd-vit); border-top: 2px solid var(--rbd-djupbla); }
.om__varden-lista strong { display: block; font-size: 18px; margin-bottom: 8px; color: var(--rbd-skiffer); }
.om__varden-lista span { font-size: 14px; line-height: 1.5; color: var(--rbd-gra); }
.om__tid { margin-top: 80px; }
@media (max-width: 1000px) { .om__varden-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .om__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) { .om__varden-lista { grid-template-columns: 1fr; } }

/* --- Kontakt ------------------------------------------------------------------ */
.kontakt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.kontakt__adress { display: grid; gap: 14px; margin: 8px 0 32px; color: var(--rbd-krita); }
.kontakt__adress > div { display: flex; gap: 14px; align-items: flex-start; }
.kontakt__adress a { color: var(--rbd-vit); }
.kontakt__karta { display: grid; gap: 12px; }
.kontakt__karta iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; background: var(--rbd-skiffer); filter: grayscale(.4) contrast(.95); }
.kontakt__form { background: var(--rbd-vit); padding: clamp(24px, 4vw, 44px);
  --rbd-text: var(--rbd-skiffer); --rbd-text-rubrik: var(--rbd-skiffer); --rbd-text-sekundar: var(--rbd-gra);
  --rbd-kicker: var(--rbd-djupbla); --rbd-knapp-bg: var(--rbd-djupbla); --rbd-knapp-text: var(--rbd-vit); color: var(--rbd-skiffer); }
.kontakt__form .rbd-knapp:hover { background: var(--rbd-skiffer); border-color: var(--rbd-skiffer); color: var(--rbd-vit); }
.kontakt__val { border: 0; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.kontakt__val legend { padding: 0; margin-bottom: 12px; }
.kontakt__chip { cursor: pointer; }
.kontakt__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kontakt__chip span { display: inline-block; padding: 9px 14px; font-size: 14px; font-weight: var(--rbd-medium); border: 1px solid var(--rbd-steg-4);
                      border-radius: var(--rbd-radie); color: var(--rbd-skiffer); transition: background .2s, color .2s, border-color .2s; }
.kontakt__chip input:checked + span { background: var(--rbd-djupbla); border-color: var(--rbd-djupbla); color: var(--rbd-vit); }
.kontakt__chip input:focus-visible + span { outline: 2px solid var(--rbd-steg-2); outline-offset: 2px; }
.kontakt__rad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kontakt__svar { margin: 16px 0 0; font-weight: var(--rbd-medium); }
.kontakt__svar:empty { display: none; }
@media (max-width: 900px) { .kontakt__grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 520px) { .kontakt__rad { grid-template-columns: 1fr; } }

/* --- Sidfot ------------------------------------------------------------------ */
.sidfot { background: var(--rbd-vit); }
.sidfot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.sidfot__marke img { width: 282px; max-width: 100%; height: auto; margin-bottom: 20px; }
.sidfot__marke p { font-size: 15px; line-height: 1.55; color: var(--rbd-gra); max-width: 30em; margin-bottom: 24px; }
.sidfot h4 { font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-gra); margin-bottom: 16px; }
.sidfot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sidfot li { margin: 0; }
.sidfot ul a, .sidfot address a { color: var(--rbd-skiffer); text-decoration: none; font-size: 15px; }
.sidfot ul a:hover, .sidfot address a:hover { color: var(--rbd-djupbla); text-decoration: underline; }
.sidfot address { font-size: 15px; line-height: 1.6; color: var(--rbd-skiffer); margin-bottom: 20px; }
.sidfot__social { margin-top: 4px; }
.sidfot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 20px 0 28px;
                 border-top: 1px solid var(--rbd-linje); font-size: 13px; color: var(--rbd-gra); }
.sidfot__legal a { color: var(--rbd-gra); }
@media (max-width: 900px) { .sidfot__grid { grid-template-columns: 1fr 1fr; } .sidfot__marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sidfot__grid { grid-template-columns: 1fr; } }

/* Väggbandet på mobil: visa gatan, så att meningen inte hamnar på bokstäverna */
@media (max-width: 720px) {
  .rbd-vaggband > img { object-position: 0% 50%; }
  .rbd-vaggband__text { max-width: 15ch; }
}

/* Hjulpanelens länkar */
.tj__lankar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.nav__tjanst[aria-current] strong { color: var(--rbd-djupbla); }
.nav__tjanst[aria-current] { background: var(--rbd-dimma); }

/* ==========================================================================
   Element som bryter staplingen
   ========================================================================== */

/* --- Statement: stort citat, förskjutet, orden tänds vid scroll -------- */
.statement { padding-block: clamp(80px, 12vw, 176px); background: var(--rbd-vit); overflow: hidden; }
.statement__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  grid-template-areas: "tecken ." "text kalla";
  gap: 0 64px;
  align-items: end;
}
/* Citatet i vänsterkanten, citattecknet ovanför */
.statement__tecken { grid-area: tecken; justify-self: start; margin: 0 0 12px -0.06em; font-size: clamp(96px, 11vw, 160px); line-height: .7;
                     font-weight: var(--rbd-bold); font-style: italic; color: var(--rbd-massing); user-select: none; }
.statement__text { grid-area: text; margin: 0; padding: 0; border: 0; max-width: 20em;
                   font-size: clamp(30px, 4.2vw, 60px); line-height: 1.12; font-weight: var(--rbd-light); letter-spacing: -0.02em; color: var(--rbd-skiffer); }
.js .statement__text[data-ord] .ord { color: var(--rbd-steg-4); transition: color .35s var(--rbd-ease); }
.js .statement__text[data-ord] .ord.is-tand { color: var(--rbd-skiffer); }
/* Kicker och länk till höger, i linje med citatets sista rad */
.statement__kalla { grid-area: kalla; justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
                    margin: 0; padding: 0 0 .6em 32px; border-left: 1px solid var(--rbd-linje); }
.statement__kalla .rbd-kicker { margin: 0; }
@media (max-width: 860px) {
  .statement__inner { grid-template-columns: 1fr; grid-template-areas: "tecken" "text" "kalla"; }
  .statement__kalla { justify-self: start; margin-top: 32px; padding: 0; border: 0; }
}

/* --- Väggbandet med överlappande citatkort ------------------------------ */
.vagg { overflow: visible; z-index: 2; }
.vagg > img { clip-path: inset(0); }
.vagg__kort {
  position: absolute; right: max(var(--rbd-gutter), calc((100vw - var(--rbd-max)) / 2 + var(--rbd-gutter)));
  bottom: 0; translate: 0 45%;
  width: min(420px, 40vw); margin: 0;
  display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center;
  padding: 24px 26px; background: var(--rbd-vit); color: var(--rbd-skiffer);
}
.vagg__kort img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--rbd-dimma); }
.vagg__kort blockquote { margin: 0 0 8px; padding: 0; border: 0; font-size: 19px; line-height: 1.35; max-width: none; color: var(--rbd-skiffer); }
.vagg__kort figcaption { margin: 0; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .06em; color: var(--rbd-gra); }
.vagg + .lang { padding-top: calc(var(--rbd-sektion) + 64px); }
@media (max-width: 900px) {
  .vagg { --vagg-h: clamp(240px, 56vw, 380px); display: block; min-height: 0; padding-top: var(--vagg-h); }
  .vagg > img, .vagg::before { inset: 0 0 auto 0; height: var(--vagg-h); }
  .vagg .rbd-vaggband__text { position: absolute; top: 0; left: 0; right: 0; height: var(--vagg-h); display: flex; align-items: flex-end; padding-bottom: 64px; }
  .vagg__kort { position: relative; right: auto; bottom: auto; translate: none; width: auto; margin: -40px var(--rbd-gutter) 0; }
  .vagg + .lang { padding-top: var(--rbd-sektion); }
}

/* --- Mosaik: case, citat och siffror i olika storlekar ------------------ */
.mosaik {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
  grid-template-areas:
    "stor stor citat siffra"
    "stor stor case  case"
    "rost rost rost  cta";
  gap: 20px;
}
.mosaik__ruta { margin: 0; padding: 28px; position: relative; overflow: hidden; }
.mosaik__ruta h3 { font-size: 22px; margin-bottom: 8px; }
.mosaik__ruta p { font-size: 15px; line-height: 1.55; margin-bottom: 16px; }

.mosaik__stor { grid-area: stor; min-height: 520px; display: flex; align-items: flex-end; background: var(--rbd-natt); color: var(--rbd-vit); padding: 40px; }
.mosaik__stor > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: transform 1.2s var(--rbd-ease); }
.mosaik__stor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 26 35 / .85) 25%, rgb(12 26 35 / 0) 75%); }
.mosaik__stor:hover > img { transform: scale(1.03); }
.mosaik__stor-text { position: relative; z-index: 1; max-width: 30em; }
.mosaik__stor .rbd-kicker { color: var(--rbd-massing); }
.mosaik__stor h3 { color: var(--rbd-vit); font-size: 30px; }
.mosaik__stor p { color: var(--rbd-krita); }
.mosaik__stor .rbd-textlank { color: var(--rbd-vit); }
.mosaik__tre { display: flex; align-items: baseline; gap: 16px; margin: 4px 0 16px; color: var(--rbd-vit); }
.mosaik__tre span { font-size: clamp(64px, 7vw, 104px); font-weight: var(--rbd-light); line-height: .9; }
.mosaik__tre i { font-style: normal; font-size: 36px; color: var(--rbd-massing); }

.mosaik__citat { grid-area: citat; background: var(--rbd-krita); display: flex; flex-direction: column; justify-content: space-between; }
.mosaik__citat::before { content: "\201D"; font-size: 64px; line-height: .7; font-weight: var(--rbd-bold); font-style: italic; color: var(--rbd-djupbla); }
.mosaik__citat blockquote { margin: 16px 0; padding: 0; border: 0; font-size: 22px; line-height: 1.3; max-width: none; }
.mosaik__citat figcaption { margin: 0; font-size: 11px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-gra); }

.mosaik__siffra { grid-area: siffra; background: var(--rbd-djupbla); color: var(--rbd-vit); display: flex; flex-direction: column; }
.mosaik__siffra .rbd-kicker { color: var(--rbd-steg-4); }
.mosaik__tal { font-size: 88px !important; line-height: .9 !important; font-weight: var(--rbd-light); margin: 8px 0 12px !important; color: var(--rbd-vit); }
.mosaik__tal small { font-size: 20px; font-weight: var(--rbd-roman); }
.mosaik__siffra p { color: var(--rbd-vit); }
.mosaik__siffra .rbd-textlank { margin-top: auto; color: var(--rbd-vit); }

.mosaik__case { grid-area: case; background: var(--rbd-vit); display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
.mosaik__ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--rbd-dimma); color: var(--rbd-djupbla); }
.mosaik__case p { color: var(--rbd-gra); }

.mosaik__rost { grid-area: rost; background: var(--rbd-dimma); display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: center; padding: 0 40px 0 0; }
.mosaik__rost img { width: 140px; height: 100%; min-height: 200px; object-fit: cover; object-position: top; }
.mosaik__rost blockquote { margin: 0 0 10px; padding: 0; border: 0; max-width: 26em; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: var(--rbd-light); color: var(--rbd-skiffer); }
.mosaik__rost figcaption { margin: 0; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .06em; color: var(--rbd-gra); }

.mosaik__cta { grid-area: cta; background: var(--rbd-massing-30); color: var(--rbd-skiffer); text-decoration: none; display: flex; flex-direction: column; gap: 12px;
               transition: background .3s var(--rbd-ease); }
.mosaik__cta strong { font-size: 20px; line-height: 1.3; }
.mosaik__cta .rbd-kicker { margin: 0; color: var(--rbd-skiffer); }
.mosaik__cta .rbd-textlank { margin-top: auto; color: var(--rbd-djupbla); }
.mosaik__cta:hover { background: var(--rbd-massing-60); }

@media (max-width: 1000px) {
  .mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "stor stor" "citat siffra" "case case" "rost rost" "cta cta"; }
  .mosaik__stor { min-height: 440px; }
}
@media (max-width: 600px) {
  .mosaik { grid-template-columns: 1fr; grid-template-areas: "stor" "citat" "siffra" "case" "rost" "cta"; }
  .mosaik__stor { padding: 28px; min-height: 420px; }
  .mosaik__rost { grid-template-columns: 96px 1fr; gap: 20px; padding-right: 20px; }
  .mosaik__rost img { width: 96px; min-height: 160px; }
  .mosaik__case { grid-template-columns: 1fr; }
}

/* --- Horisontell rad: Det här står vi för ------------------------------- */
.tror { margin-top: 96px; }
.tror__topp { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.tror__topp h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); }
.tror__pilar { display: flex; gap: 8px; }
.tror__pil { width: 48px; height: 48px; display: grid; place-items: center; background: var(--rbd-vit); border: 1px solid var(--rbd-steg-4);
             border-radius: 50%; cursor: pointer; color: var(--rbd-skiffer); transition: background .2s, color .2s, border-color .2s; }
.tror__pil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tror__pil:hover:not(:disabled) { background: var(--rbd-djupbla); border-color: var(--rbd-djupbla); color: var(--rbd-vit); }
.tror__pil:disabled { opacity: .35; cursor: default; }
.tror__rad {
  list-style: none; margin: 0; max-width: none;
  display: flex; gap: 20px; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px max(var(--rbd-gutter), calc((100vw - var(--rbd-max)) / 2 + var(--rbd-gutter))) 56px;
  scroll-padding-inline: max(var(--rbd-gutter), calc((100vw - var(--rbd-max)) / 2 + var(--rbd-gutter)));
  cursor: grab;
}
.tror__rad::-webkit-scrollbar { display: none; }
.tror__rad.is-drar { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tror__rad:focus-visible { outline: 2px solid var(--rbd-steg-2); outline-offset: -2px; }
.tror__kort { flex: 0 0 min(340px, 78vw); min-height: 300px; margin: 0; padding: 32px 28px; scroll-snap-align: start;
              display: flex; flex-direction: column; background: var(--rbd-vit); box-shadow: var(--rbd-niva-b); }
/* Trappsteg: varannat kort ligger lite lägre, som lagren i märket */
.tror__kort:nth-child(even) { margin-top: 40px; }
.tror__nr { font-size: 20px; font-weight: var(--rbd-light); color: var(--rbd-massing); margin-bottom: auto; }
.tror__kort strong { display: block; font-size: 32px; letter-spacing: var(--rbd-ls-rubrik); line-height: 1.1; margin: 48px 0 12px; color: var(--rbd-skiffer); }
.tror__kort p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rbd-gra); }
.tror__kort--bla { background: var(--rbd-djupbla); }
.tror__kort--bla strong, .tror__kort--bla p { color: var(--rbd-vit); }
.tror__kort--bla .tror__nr { color: var(--rbd-steg-4); }
.tror__kort--varm { background: var(--rbd-krita); }
.tror__kort--bild { position: relative; padding: 0; overflow: hidden; justify-content: flex-end; min-height: 380px; }
.tror__kort--bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tror__kort--bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 26 35 / .85), rgb(12 26 35 / 0) 55%); }
.tror__kort--bild span { position: relative; z-index: 1; padding: 28px; color: var(--rbd-vit); font-weight: var(--rbd-bold); font-size: 24px; line-height: 1.15; }
.om .tror + .rbd-wrap .om__tid { margin-top: 40px; }
@media (max-width: 600px) { .tror__pilar { display: none; } .tror__kort:nth-child(even) { margin-top: 24px; } }
@media (max-width: 900px) {
  .vagg .rbd-vaggband__text { margin: 0; max-width: 16ch; padding-left: var(--rbd-gutter); font-size: 24px; }
}

/* Färgfälten runt hjulet får inte ge sidledsscroll */
.tj { overflow-x: clip; }

/* ==========================================================================
   Insiktskort (startsidan, bloggen och artikelsidorna)
   ========================================================================== */
.ins__grid { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ik { margin: 0; display: flex; }
.ik[hidden] { display: none; }
.ik__lank { position: relative; display: flex; flex-direction: column; width: 100%; padding: 28px; background: var(--rbd-vit);
            color: var(--rbd-skiffer); text-decoration: none; box-shadow: var(--rbd-niva-b);
            transition: box-shadow .3s var(--rbd-ease), translate .3s var(--rbd-ease); }
.ik__lank:hover { box-shadow: var(--rbd-niva-r); translate: -1px -3px; }
.ik__lank:focus-visible { outline: 2px solid var(--rbd-steg-2); outline-offset: 3px; }
.ik__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rbd-dimma); color: var(--rbd-djupbla); margin-bottom: 20px; }
.ik__taggar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ik h3 { font-size: 22px; margin-bottom: 10px; }
.ik p { font-size: 15px; line-height: 1.55; color: var(--rbd-gra); margin-bottom: 24px; }
.ik__fot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ik__fot .rbd-textlank { color: var(--rbd-djupbla); }
.ik__las { font-size: 13px; color: var(--rbd-gra); }
.tagg { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .02em; line-height: 1.4;
        background: var(--rbd-dimma); color: var(--rbd-skiffer); border-radius: var(--rbd-radie); text-decoration: none; }
a.tagg:hover { background: var(--rbd-ljusbla-30); color: var(--rbd-djupbla); }
@media (max-width: 900px) { .ins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ins__grid { grid-template-columns: 1fr; } }

/* ===================== STATEMENT: följemening ===================== */
.statement__inner { grid-template-areas: "tecken ." "text kalla" "under ."; }
.statement__under { grid-area: under; margin: 32px 0 0; max-width: 34em;
                    font-size: var(--rbd-fs-underrubrik); line-height: var(--rbd-lh-ingress); font-weight: var(--rbd-light); color: var(--rbd-gra); }
@media (max-width: 860px) {
  .statement__inner { grid-template-areas: "tecken" "text" "under" "kalla"; }
}

/* ===================== VÄGAR IN: fyra sätt att börja ===================== */
.vagar__topp { max-width: 46em; margin-bottom: 48px; }
.vagar__grid { list-style: none; margin: 0; padding: 0; max-width: none;
               display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vag { display: flex; flex-direction: column; margin: 0; padding: 32px 28px; border-radius: var(--rbd-radie); color: var(--rbd-skiffer); }
.vag .rbd-ikon { color: var(--rbd-djupbla); margin-bottom: 20px; }
.vag .rbd-kicker { margin-bottom: 8px; }
.vag h3 { font-size: 22px; line-height: var(--rbd-lh-rubrik); margin: 0 0 12px; color: var(--rbd-skiffer); }
.vag p { font-size: 15px; line-height: 1.55; color: var(--rbd-gra); margin: 0 0 24px; }
.vag__fot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vag--framhavd { box-shadow: var(--rbd-niva-r), inset 0 3px 0 var(--rbd-massing); }
.vagar__not { margin: 40px 0 0; max-width: 46em; font-size: 17px; line-height: 1.6; color: var(--rbd-skiffer); }
@media (max-width: 1100px) { .vagar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vagar__grid { grid-template-columns: 1fr; } .vag { padding: 28px 24px; } }