/* LMI Custom – Quiz-widget i programsidans sidebar */

.lmi-quiz-widget {
  background: #fff;
  padding: 8px;
  font-family: Intertight, Arial, sans-serif;
}

/* Voortgang */
.lmi-quiz-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.lmi-quiz-progress-bar {
  flex: 1;
  height: 4px;
  background: #ededea;
  border-radius: 100px;
  overflow: hidden;
}

.lmi-quiz-progress-fill {
  height: 100%;
  background: #001f60;
  border-radius: 100px;
  transition: width 0.3s ease;
}

.lmi-quiz-step-label {
  font-size: 11px;
  font-weight: 600;
  color: #03030f80;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* Inline formulär */
.lmi-quiz-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.lmi-quiz-form-field {
  width: 100%;
}

.lmi-quiz-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid #cfd1da;
  border-radius: 8px;
  background: #f7f7f4;
  font-family: Intertight, Arial, sans-serif;
  font-size: 14px;
  color: #03030f;
  outline: none;
  transition: border-color 0.15s;
}

.lmi-quiz-input:focus {
  border-color: #001f60;
  background: #fff;
}

.lmi-quiz-input::placeholder {
  color: #03030f66;
}

/* Tack-vy */
.lmi-quiz-success {
  padding: 8px 0;
}

.lmi-quiz-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #001f60;
  margin-bottom: 10px;
}

.lmi-quiz-question {
  font-size: 18px;
  font-weight: 600;
  color: #03030f;
  line-height: 1.35;
  margin-bottom: 20px;
}

/* Roll-toggle */
.lmi-quiz-toggle {
  display: flex;
  gap: 0;
  background: #f7f7f4;
  border: 1.5px solid #001f60;
  border-radius: 100px;
  padding: 3px;
  margin-bottom: 24px;
  width: fit-content;
}

.lmi-quiz-toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 100px;
  padding: 8px 20px;
  font-family: Intertight, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #001f60;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.lmi-quiz-toggle-btn.active {
  background: #001f60;
  color: #fff;
}

.lmi-quiz-toggle-btn:not(.active):hover {
  background: rgba(0, 31, 96, 0.07);
}

/* Fortsätt-knapp steg 1 */
.lmi-quiz-next-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  background: #001f60;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 13px 24px;
  font-family: Intertight, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.18s;
}

.lmi-quiz-next-btn:hover {
  opacity: 0.88;
}

/* Svarsrader steg 2 */
.lmi-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lmi-quiz-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #f7f7f4;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 13px 16px;
  font-family: Intertight, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #03030f;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.lmi-quiz-option-row:hover {
  border-color: #001f60;
  background: rgba(0, 31, 96, 0.04);
}

.lmi-quiz-option-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.lmi-quiz-option-text {
  flex: 1;
  line-height: 1.4;
}

.lmi-quiz-option-arrow {
  color: #001f60;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.16s, transform 0.16s;
}

.lmi-quiz-option-row:hover .lmi-quiz-option-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Resultat steg 3 */
.lmi-quiz-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #001f60;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.lmi-quiz-result-text {
  font-size: 15px;
  color: #03030fb3;
  line-height: 1.65;
  margin-bottom: 24px;
}

.lmi-quiz-result-text strong {
  color: #03030f;
  font-weight: 600;
}

.lmi-quiz-result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.lmi-quiz-cta-btn {
  width: 100%;
  justify-content: center;
}

.lmi-quiz-secondary-btn {
  width: 100%;
  justify-content: center;
  background: transparent !important;
  border: 2px solid #001f60 !important;
}

.lmi-quiz-restart-btn {
  background: none;
  border: none;
  font-family: Intertight, Arial, sans-serif;
  font-size: 13px;
  color: #001f60;
  cursor: pointer;
  opacity: 0.65;
  padding: 0;
  transition: opacity 0.15s;
}

.lmi-quiz-restart-btn:hover {
  opacity: 1;
}

/* Mobilresponsiv */
@media (max-width: 767px) {
  .lmi-quiz-widget {
    padding: 22px 18px;
  }
  .lmi-quiz-toggle-btn {
    padding: 8px 16px;
  }
}

/* LMI Custom – FAQ padding */
.faq {
  padding-bottom: var(--_responsive---padding--padding-120-px);
}

/* LMI Custom – FAQ accordion: dölj svar på stängda frågor.
   Webflow CSS sätter bara overflow:hidden på .faq-answer-wrap men ingen
   display:none, vilket gör att alla svar syns om Webflow.js inte hinner
   initialisera. Denna regel ser till att bara den aktiva (.w--current)
   visar sitt svar oavsett JS-timing. */
.faq-item:not(.w--current) .faq-answer-wrap {
  display: none;
}

/* LMI Custom – Fix Webflow hero slider (mask-3) on self-hosted site.
   Desktop mask is 660px wide. Slide 2 starts at x=680px which is within
   the 1163px section width, so the section's overflow:hidden does NOT help.
   Only the mask itself can clip inactive slides. !important overrides the
   Webflow default overflow:visible even through browser CSS cache. */
.mask-3 {
  overflow: hidden !important;
}

/* LMI Custom – Sticky navbar (visa vid scroll upp, göm vid scroll ner)
   cms-inject.js lindar .lmi-topbar + .navbar i denna wrapper. */
.lmi-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.lmi-nav-hidden {
  transform: translateY(-100%);
}

/* LMI Custom – Telefonikon i "Ring oss nu"-knapp (FAQ-sektioner)
   Speglar ikonen så handlaget pekar åt rätt håll.
   På hover: button-01-arrow-box får blå bakgrund via Webflow – ikonen
   ska bli vit. currentColor ärver CSS color-prop från föräldraelementet. */
.button-01 .button-01-arrow-box svg {
  transform: scaleX(-1);
  display: block;
}
.button-01:hover .button-01-arrow-box svg,
.button-01.w--current .button-01-arrow-box svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* ============================================================
   LMI Custom – Logo-karusell v2

   Keyframe translateX(-50%): när wrappern innehåller exakt två
   identiska strips (max-content = 2×strip) scrollas exakt en strip
   per cykel — sömlös loop utan JS-beroende för själva rörelsen.

   Hastighet: JS (cms-inject.js initLogoMarquee) mäter varje strips
   faktiska pixel-bredd och sätter --marquee-dur = bredd/50px per sekund.
   Utan JS används 60s som säkert fallback-värde.

   om-oss: Webflow lade felaktigt .customer-loop-items.second nästlad
   inuti .customer-loop-items.first. Dölj dessa så att rad 1 bara
   innehåller rad 1-logos och rad 2 (i .second-wrappern) bara rad 2.
   ============================================================ */

/* Keyframe: -50% = exakt en strip-bredd (två identiska strips) */
@keyframes lmi-logo-marquee-v2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* om-oss struktur-fix: dölj .second-strips som är nästlade inuti .first-strips */
.customer-loop-items.first > .customer-loop-items.second {
  display: none !important;
}

/* Strip-items: flex istället för grid (slår igenom w-layout-grid) */
.logos-wrapper .customer-loop-items {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  gap: 48px !important;
  padding-right: 48px !important;
  grid-template-columns: unset !important;
}

/* Wrapper: nollställ 80px-gap, använd JS-mätt --marquee-dur för lika px/s-hastighet */
.logos-wrapper .customers-loop-wrapper {
  column-gap: 0 !important;
  animation: lmi-logo-marquee-v2 var(--marquee-dur, 60s) linear infinite !important;
  animation-play-state: running !important;
}

/* Rad 2 rör sig åt höger */
.logos-wrapper .customers-loop-wrapper.second {
  animation-direction: reverse !important;
}

/* Hover pausar båda raderna */
.logos-wrapper:hover .customers-loop-wrapper {
  animation-play-state: paused !important;
}

/* Bredare overlay-gradient för tydlig slide-in-effekt på bägge raderna */
.logos-wrapper .logos-overlay {
  width: 120px !important;
}

/* Göm Webflows inbyggda cookie-banner — lmi-cookie-banner hanterar allt */
.cw-cookies { display: none !important; }

/* ================================================
   LMI COOKIE BANNER
   ================================================ */
#lmi-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #fff;
  border-top: 1px solid #e8e8e4;
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: Intertight, Arial, sans-serif;
}
#lmi-cookie-banner .lmi-cb-text { flex: 1; min-width: 0; }
#lmi-cookie-banner .lmi-cb-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px;
}
#lmi-cookie-banner .lmi-cb-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
}
#lmi-cookie-banner .lmi-cb-desc a { color: #001f60; text-decoration: underline; }
#lmi-cookie-banner .lmi-cb-btns { display: flex; gap: 12px; flex-shrink: 0; }
#lmi-btn-necessary,
#lmi-btn-accept-all {
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-family: Intertight, Arial, sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid #001f60;
}
#lmi-btn-necessary {
  background: transparent;
  color: #001f60;
  border-color: transparent;
}
#lmi-btn-accept-all {
  background: #001f60;
  color: #fff;
  font-weight: 600;
}
#lmi-btn-necessary:hover { background: #f5f5f3; }
#lmi-btn-accept-all:hover { background: #00297a; border-color: #00297a; }
@media (max-width: 767px) {
  #lmi-cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 28px;
    gap: 16px;
  }
  #lmi-cookie-banner .lmi-cb-btns { width: 100%; }
  #lmi-btn-necessary, #lmi-btn-accept-all { flex: 1; text-align: center; }
}

/* =====================================================================
   LMI Custom – Diagnostisk symptom-quiz (lmi-diagnostic-quiz.js)
   Monteras nära toppen på /, /program, /ledarutveckling-distans,
   /ledarutveckling-foretag.
===================================================================== */
.lmi-diag-section {
  padding: 56px 0;
  background: #f7f7f4;
}

.lmi-diag-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 18px 48px rgba(0, 31, 96, 0.08);
  font-family: Intertight, Arial, sans-serif;
}

.lmi-diag-intro {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ededea;
}

.lmi-diag-intro-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #001f60;
  margin-bottom: 10px;
}

.lmi-diag-intro-title {
  font-size: 28px;
  font-weight: 600;
  color: #03030f;
  line-height: 1.2;
  margin: 0 0 10px;
}

.lmi-diag-intro-text {
  font-size: 15px;
  color: #03030fb3;
  line-height: 1.6;
  margin: 0;
}

/* Progress */
.lmi-diag-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.lmi-diag-progress-bar {
  flex: 1;
  height: 5px;
  background: #ededea;
  border-radius: 100px;
  overflow: hidden;
}

.lmi-diag-progress-fill {
  height: 100%;
  background: #001f60;
  border-radius: 100px;
  transition: width 0.3s ease;
}

.lmi-diag-step-label {
  font-size: 12px;
  font-weight: 600;
  color: #03030f80;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.lmi-diag-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #001f60;
  margin-bottom: 10px;
}

.lmi-diag-question {
  font-size: 21px;
  font-weight: 600;
  color: #03030f;
  line-height: 1.3;
  margin-bottom: 22px;
}

/* Options */
.lmi-diag-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lmi-diag-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: #f7f7f4;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: Intertight, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #03030f;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.lmi-diag-option:hover {
  border-color: #001f60;
  background: rgba(0, 31, 96, 0.04);
}

.lmi-diag-option-text {
  flex: 1;
  line-height: 1.4;
}

.lmi-diag-option-arrow {
  color: #001f60;
  flex-shrink: 0;
  opacity: 0.4;
  display: inline-flex;
  transition: opacity 0.16s, transform 0.16s;
}

.lmi-diag-option:hover .lmi-diag-option-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.lmi-diag-back {
  margin-top: 18px;
  background: none;
  border: none;
  font-family: Intertight, Arial, sans-serif;
  font-size: 13px;
  color: #001f60;
  cursor: pointer;
  opacity: 0.65;
  padding: 0;
  transition: opacity 0.15s;
}

.lmi-diag-back:hover { opacity: 1; }

/* Result */
.lmi-diag-result-badge {
  display: inline-flex;
  align-items: center;
  background: #001f60;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 16px;
}

.lmi-diag-result-title {
  font-size: 26px;
  font-weight: 600;
  color: #03030f;
  line-height: 1.25;
  margin-bottom: 14px;
}

.lmi-diag-result-text {
  font-size: 15px;
  color: #03030fb3;
  line-height: 1.65;
  margin-bottom: 26px;
}

.lmi-diag-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.lmi-diag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  padding: 14px 26px;
  font-family: Intertight, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s, background 0.18s, color 0.18s;
}

.lmi-diag-btn-primary {
  background: #001f60;
  color: #fff;
  border: 2px solid #001f60;
}

.lmi-diag-btn-primary:hover { opacity: 0.88; }

.lmi-diag-btn-secondary {
  background: transparent;
  color: #001f60;
  border: 2px solid #001f60;
}

.lmi-diag-btn-secondary:hover {
  background: #001f60;
  color: #fff;
}

.lmi-diag-alt {
  font-size: 14px;
  color: #03030f99;
  margin-bottom: 18px;
}

.lmi-diag-alt a {
  color: #001f60;
  font-weight: 600;
  text-decoration: none;
}

.lmi-diag-alt a:hover { text-decoration: underline; }

.lmi-diag-restart {
  background: none;
  border: none;
  font-family: Intertight, Arial, sans-serif;
  font-size: 13px;
  color: #001f60;
  cursor: pointer;
  opacity: 0.65;
  padding: 0;
  transition: opacity 0.15s;
}

.lmi-diag-restart:hover { opacity: 1; }

@media (max-width: 767px) {
  .lmi-diag-section { padding: 36px 0; }
  .lmi-diag-card { padding: 28px 22px; border-radius: 16px; }
  .lmi-diag-intro-title { font-size: 23px; }
  .lmi-diag-question { font-size: 18px; }
  .lmi-diag-result-title { font-size: 22px; }
  .lmi-diag-btn { width: 100%; }
}

/* ── Landing page hero: push text content down ── */
.home-hero-wrap.landingpage .home-hero-text-wrap {
  padding-top: 56px;
}

/* ── Contact page: form first, info block second ── */
.contact-left  { order: 2; }
.contact-right { order: 1; }

/* ── Hero-variant quiz card (ledarutveckling-foretag / distans) ── */
.home-hero-wrap:has(.lmi-diag-hero-card) {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.home-hero-wrap:has(.lmi-diag-hero-card) .home-hero-text-wrap {
  flex: 1 1 0;
  min-width: 0;
}
.lmi-diag-hero-card {
  flex: 0 0 460px;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 6px 32px rgba(0, 31, 96, 0.22);
  align-self: center;
}
.lmi-diag-intro--compact {
  margin-bottom: 16px;
}
.lmi-diag-intro--compact .lmi-diag-intro-title {
  font-size: 20px;
  margin-bottom: 6px;
  color: #001f60;
}
.lmi-diag-intro--compact .lmi-diag-intro-text {
  font-size: 14px;
  color: #4a5568;
  margin: 0;
}
@media (max-width: 991px) {
  .home-hero-wrap:has(.lmi-diag-hero-card) {
    flex-direction: column;
  }
  .lmi-diag-hero-card {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* Footer: utökad till 4 kolumner (Huvudsidor, Företaget, Målgrupper, Branscher) */
.footer-v1-top-right {
  width: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 991px) {
  .footer-v1-top-right {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .footer-v1-top-right {
    grid-template-columns: 1fr;
  }
}

/* ── Quiz slot inside service-grid-card (programs section) ── */
#lmi-quiz-programs-slot .lmi-diag-option {
  background: #fff;
  border: 1.5px solid #e0e4ef;
}
#lmi-quiz-programs-slot .lmi-diag-option:hover {
  background: rgba(0, 31, 96, 0.04);
  border-color: #001f60;
}
#lmi-quiz-programs-slot .lmi-diag-intro-title {
  font-size: 18px;
  margin-bottom: 6px;
}
#lmi-quiz-programs-slot .lmi-diag-intro-text {
  font-size: 13px;
}
#lmi-quiz-programs-slot .lmi-diag-step-label {
  font-size: 12px;
}
#lmi-quiz-programs-slot .lmi-diag-question {
  font-size: 16px;
}

/* ── LP – Passar det dig? – vita kort på grå bakgrund ── */
.our-process .core-value-right._01.landingpage {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

/* ── LP – Kontaktsektion ── */
.lp-kontakt-section {
  padding: 80px 0;
  background: #f7f7f4;
}
.lp-kontakt-wrap {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.lp-kontakt-left {
  flex: 1 1 0;
  min-width: 0;
}
.lp-kontakt-lead {
  color: #555;
  max-width: 440px;
  margin-top: 16px;
  line-height: 1.7;
}
.lp-kontakt-right {
  flex: 0 0 400px;
}
.lp-kontakt-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.lp-kontakt-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lp-kontakt-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,31,96,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #001f60;
}
.lp-kontakt-divider {
  height: 1px;
  background: #e8e8e4;
  margin: 20px 0;
}
.lp-kontakt-link {
  font-size: 17px;
  font-weight: 600;
  color: #001f60;
  text-decoration: none;
}
.lp-kontakt-link:hover { text-decoration: underline; }
.lp-kontakt-cta-btn {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}
@media (max-width: 991px) {
  .lp-kontakt-wrap { flex-direction: column; }
  .lp-kontakt-right { flex: none; width: 100%; }
}

/* ── LP navbar – phone button (ersätter button-02 för att undvika dubbel-ikon-animation) ── */
.lp-nav-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #001f60;
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  padding: 10px 10px 10px 18px;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s;
  white-space: nowrap;
}
.lp-nav-phone-btn:hover { background: #00297a; }
.lp-nav-phone-text { color: #fff; }
.lp-nav-phone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s;
}
.lp-nav-phone-btn:hover .lp-nav-phone-icon { background: rgba(255,255,255,0.28); }

/* ── Coaches "Se alla" toggle-knapp ── */
.lmi-coaches-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid #001f60;
  color: #001f60;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.lmi-coaches-toggle-btn:hover {
  background: #001f60;
  color: #fff;
}

/* ── Kontaktformulär på LP (/ledarutveckling m.fl.) ── */
#kontakt .top-fields-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
#kontakt .form-field-wrap {
  width: 100%;
}
#kontakt .text-field-contact-form,
#kontakt .dropdown-contact-form {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 15px;
}
#kontakt .form-3 {
  gap: 16px;
}
#kontakt .contact-form-submit-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-image: none;
  background-color: #001f60;
  text-align: center;
  padding: 16px 24px;
  border-radius: 100px;
  color: #fff;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  letter-spacing: 0.01em;
  margin-top: 8px;
  transition: background-color 0.2s;
}
#kontakt .contact-form-submit-button:hover {
  background-color: #00297a;
}
@media (max-width: 600px) {
  #kontakt .top-fields-form {
    grid-template-columns: 1fr;
  }
}

/* ── LP Navbar — mobil-fix ── */
.hero-nav-wrap .navbar-container {
  padding: 12px 20px;
}
@media (max-width: 767px) {
  .hero-nav-wrap .navbar {
    padding-top: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero-nav-wrap .navbar-container {
    padding: 10px 16px;
  }
  .lp-nav-phone-text {
    display: none;
  }
  .lp-nav-phone-btn {
    padding: 8px;
    gap: 0;
  }
  .lp-nav-phone-icon {
    width: 36px;
    height: 36px;
  }
}

/* ── Hero-innehåll täcks av sticky navbar – mobil-fix ── */

/* Startsidan: ge lite extra luft vid liten skärm */
@media (max-width: 479px) {
  .home-hero-wrap {
    padding-top: 160px;
  }
}

/* LP-sidor (landingpage): pill-navbar är ~60-70px på mobil —
   Webflow sätter bara 40px på medium → innehållet döljs bakom navbar */
@media (max-width: 991px) {
  .home-hero-wrap.landingpage {
    padding-top: 100px;
  }
}
@media (max-width: 479px) {
  .home-hero-wrap.landingpage {
    padding-top: 90px;
  }
}

/* ── Vilket program passar mig? — kort (program.html + vilket-program-sidan) ── */
.qp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 0;
}
@media (max-width: 767px) { .qp-grid { grid-template-columns: 1fr; } }

.qp-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 36px 32px;
  border: 1px solid #e8e8e4;
  box-shadow: 0 4px 20px #0000000a;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.25s ease;
}
.qp-card:hover { box-shadow: 0 24px 64px #001f6024; }

.qp-card__icon {
  width: 48px; height: 48px;
  background: #f3f3ff;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; flex-shrink: 0;
}
.qp-card__icon svg { width: 24px; height: 24px; stroke: #001f60; }

.qp-card__tag {
  font-size: 12px; font-weight: 500; color: #001f60;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px; font-family: Intertight, Arial, sans-serif;
}
.qp-card__problem {
  font-size: 22px; font-weight: 600; color: #03030f;
  line-height: 1.25; margin-bottom: 16px; font-family: Intertight, Arial, sans-serif;
}
.qp-card__body {
  font-size: 15px; color: #03030fb3; line-height: 1.65; margin-bottom: 28px; flex: 1;
}
.qp-card__program-label {
  font-size: 12px; font-weight: 600; color: #03030f;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 12px; font-family: Intertight, Arial, sans-serif;
}

.qp-unsure {
  background: #f7f7f4;
  padding: 60px 0;
}
.qp-unsure-inner {
  background: #fff; border: 1px solid #e8e8e4; border-radius: 16px;
  padding: 40px 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
}
@media (max-width: 767px) {
  .qp-unsure-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
.qp-unsure-text h3 {
  font-size: 22px; font-weight: 600; color: #03030f;
  margin-bottom: 8px; font-family: Intertight, Arial, sans-serif;
}
.qp-unsure-text p { font-size: 15px; color: #03030fb3; line-height: 1.6; max-width: 480px; }

/* Wrapper-sektion som ersätter guide-bannern på /program */
.lmi-program-quiz-section {
  padding: 80px 0 0;
}
.lmi-program-quiz-section .lmi-quiz-intro {
  margin-bottom: 48px;
}
.lmi-program-quiz-section .lmi-quiz-intro .tag-wrap {
  margin-bottom: 12px;
}
.lmi-program-quiz-section .lmi-quiz-intro h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: #03030f;
  font-family: Intertight, Arial, sans-serif; margin-bottom: 12px;
}
.lmi-program-quiz-section .lmi-quiz-intro p {
  font-size: 16px; color: #03030fb3; line-height: 1.6; max-width: 560px;
}