/* ── Language toggle ─────────────────────────────────────────── */

.lang-toggle {
   display: flex;
   align-items: center;
   gap: var(--sp-1);
}

.lang-option {
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.06em;
   color: var(--text-secondary);
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease);
}

.lang-option:hover {
   color: var(--text-primary);
}

.lang-option--active {
   color: var(--text-primary);
   font-weight: 700;
}

.lang-divider {
   font-size: 0.65rem;
   color: var(--text-tertiary);
   user-select: none;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-3) var(--sp-6);
   font-family: var(--ff-button);
   font-size: var(--fs-base);
   font-weight: 600;
   letter-spacing: 0.04em;
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   transition:
      background var(--duration-fast) var(--ease),
      border-color var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease);
   cursor: pointer;
   white-space: nowrap;
   text-align: center;
   user-select: none;
   text-decoration: none;

   will-change: background, border-color, color, box-shadow, transform;
}

.btn--primary:hover {
   transform: translateY(-1px);
}

.btn:active {
   transform: translateY(1px);
}

/* Primary */
.btn--primary {
   background: var(--clr-accent);

   color: var(--text-button);
   border-color: var(--clr-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
   background: var(--clr-accent-light);
   border-color: var(--clr-accent-light);
   box-shadow: var(--shadow-accent);
}

.btn--primary.btn--active {
   box-shadow: 0 0 0 3px var(--clr-accent-glow);
}

/* Ghost */
.btn--ghost {
   background: transparent;
   color: var(--text-title);
   border-color: var(--border-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
   border-color: var(--clr-accent);
}

/* Text-only */
.btn--text {
   background: transparent;
   color: var(--clr-accent);
   padding-inline: 0;
   border: none;
   gap: var(--sp-2);
}

.btn--text:hover {
   color: var(--clr-accent-light);
}

/* Sizes */
.btn--sm {
   padding: var(--sp-2) var(--sp-4);
   font-size: var(--fs-sm);
}

.btn--small {
   padding: var(--sp-2) var(--sp-4);
   font-size: var(--fs-sm);
}

.btn--lg {
   padding: var(--sp-4) var(--sp-8);
   font-size: var(--fs-lg);
}

/* Arrow icon in button */
.btn__arrow {
   transition: transform var(--duration-fast) var(--ease);
}

.btn:hover .btn__arrow {
   transform: translateX(3px);
}

/* ── Cards ───────────────────────────────────────────────────── */

.card {
   background: var(--bg-raised);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-lg);
   padding: var(--sp-6);
   transition:
      border-color var(--duration-normal) var(--ease),
      background var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease);

   will-change: border-color, background, box-shadow, transform;
}

.card:hover {
   background: var(--bg-hover);
   border-color: var(--border-accent);
   box-shadow: var(--shadow-md);
}

.card--link {
   display: block;
   text-decoration: none;
}

.card--link:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

.card--overlay {
   position: relative;
   overflow: hidden;
   padding: 0;
}

.card__image {
   width: 100%;
   height: auto;
   display: block;
}

.card__body {
   padding: var(--sp-5) var(--sp-6);
}

.card__tag {
   display: inline-block;
   font-size: var(--fs-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--badge-accent-text);
   margin-bottom: var(--sp-3);
}

.card__title {
   font-family: var(--ff-heading);
   font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
   color: var(--text-title);
   line-height: 1.2;
   margin-bottom: var(--sp-3);
}

.card__excerpt {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   line-height: 1.6;
   position: relative;
   max-height: 4.8em; /* 3 lines */
   overflow: hidden;
}

.card__excerpt::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3.2em; /* fade over last 2 lines */
   background: linear-gradient(to bottom, transparent, var(--bg-raised));
   pointer-events: none;
}

.card:hover .card__excerpt::after {
   background: linear-gradient(to bottom, transparent, var(--bg-hover));
}

.card:active {
   box-shadow: 0 0 0 transparent;
   background: var(--bg-raised);
   transform: translateY(1px);
}

.why-item {
   padding: var(--sp-2) 0;
}

.why-item__title {
   font-family: var(--ff-heading);
   font-size: var(--fs-xl);
   color: var(--text-title);
   margin-bottom: var(--sp-2);
}

.why-item__text {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   line-height: 1.6;
}

.card__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 3.25rem;
   height: 3.25rem;
   border-radius: var(--radius-md);
   background: var(--bg-subtle);
   color: var(--badge-accent-text);
   margin-bottom: var(--sp-4);
}

.card__icon svg {
   width: 2rem;
   height: 2rem;
   display: block;
}

/* ── Service icons ───────────────────────────────────────────── */

.service-icon {
   width: 4.5rem;
   height: 4.5rem;
   color: var(--text-primary);
   display: inline-flex;
}

.service-icon svg {
   width: 100%;
   height: 100%;
   display: block;
}

.service-icon__soft {
   opacity: 0.08;
}

.service-icon__muted {
   opacity: 0.35;
}

.service-icon__line {
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ── Service cards ───────────────────────────────────────────── */

.service-card {
   background: transparent;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-lg);
   padding: var(--sp-8);
   display: flex;
   flex-direction: column;
   gap: var(--sp-4);
   transition:
      background var(--duration-normal) var(--ease),
      border-color var(--duration-normal) var(--ease),
      transform var(--duration-normal) var(--ease);
}




.service-card__num {
   font-family: var(--ff-heading);
   font-size: var(--fs-xs);
   font-weight: 700;
   color: var(--badge-accent-text);
   letter-spacing: 0.1em;
}

.service-card__title {
   font-family: var(--ff-heading);
   font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
   color: var(--text-title);
   line-height: 1.2;
   margin-bottom: 0;
}

.service-card__desc {
   color: var(--text-secondary);
   font-size: var(--fs-sm);
   line-height: 1.6;
   flex: 1;
}

.service-card__list {
   display: flex;
   flex-direction: column;
   gap: var(--sp-1);
}

.service-card__list li {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   padding-left: var(--sp-4);
   position: relative;
}

.service-card__list li::before {
   content: '—';
   position: absolute;
   left: 0;
   color: var(--badge-accent-text);
   font-size: var(--fs-xs);
}

.service-card__cta {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   color: var(--clr-accent);
   font-size: var(--fs-sm);
   font-weight: 600;
   text-decoration: none;
   margin-top: var(--sp-2);
   transition:
      gap var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease);
}

.service-card__cta:hover {
   gap: var(--sp-3);
}

/* ── Badges / status pills ───────────────────────────────────── */

.badge {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
   border-radius: var(--radius-sm);
   font-size: var(--fs-xs);
   font-weight: 600;
   width: fit-content;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   border: 1px solid transparent;

}

.badge--accent {
   background: var(--badge-accent-bg);
   color: var(--badge-accent-text);
   border-color: var(--badge-accent-border);
}

.badge--success {
   background: var(--badge-success-bg);
   color: var(--clr-success);
   border-color: var(--badge-success-border);
}

.badge--warning {
   background: var(--badge-warning-bg);
   color: var(--clr-warning);
   border-color: var(--badge-warning-border);
}

.badge--error {
   background: var(--badge-error-bg);
   color: var(--clr-error);
   border-color: var(--badge-error-border);
}

.badge--muted {
   background: var(--bg-overlay);
   color: var(--text-muted);
   border-color: var(--border);
}

/* ── Tech tags ───────────────────────────────────────────────── */

.tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-2);
}

.tag {
   font-size: var(--fs-xs);
   color: var(--text-secondary);
   background: var(--bg-overlay);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-1) var(--sp-2);
   font-weight: 500;
}

.cs-tech-tags {
   margin-bottom: var(--sp-6);
}

/* ── Forms ───────────────────────────────────────────────────── */

.form-group {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
}

.form-label {
   font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--text-secondary);
   letter-spacing: 0.03em;
}

.form-input,
.form-textarea,
.form-select {
   background: var(--bg-base);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: var(--sp-3) var(--sp-4);
   color: var(--text-primary);
   font-size: var(--fs-base);
   font-family: var(--ff-body);
   width: 100%;
   transition: border-color var(--duration-fast) var(--ease);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
   background: var(--bg-raised);

   outline: none;
   border-color: var(--clr-accent);
}

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

.form-input::placeholder,
.form-textarea::placeholder {
   color: var(--text-muted);
}

.form-input--error,
.form-textarea--error {
   border-color: var(--clr-error);
}

.form-group__error {
   font-size: var(--fs-xs);
   color: var(--clr-error);
   display: none;
}

.form-group__error:not(:empty) {
   display: block;
}

.form-label__required {
   color: var(--clr-accent);
}

/* Contact step: service choice cards */
.service-choice-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--sp-4);
}

.service-choice {
   position: relative;
   cursor: pointer;
   display: flex;
   width: 100%;
}

.service-choice input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.service-choice__card {
   display: flex;
   flex-direction: column;
   gap: var(--sp-1);
   height: 100%;
   width: 100%;
   padding: var(--sp-5) var(--sp-6);
   background: transparent;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition:
      background var(--duration-fast) var(--ease),
      border-color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease);
}

.service-choice__card:hover {
   background: var(--bg-hover);
   border-color: var(--border-strong);
}

.service-choice__card:active {
   background: var(--bg-overlay);
   transform: scale(0.98);
}

.service-choice input:checked+.service-choice__card {
   border-color: var(--clr-accent);
   background: var(--clr-accent-subtle);
}

.service-choice__title {
   font-family: var(--ff-body);
   font-size: var(--fs-lg);
   color: var(--text-primary);
}

.service-choice__desc {
   font-size: var(--fs-xs);
   color: var(--text-muted);
}


/* Budget / timeline radio pills */
.pill-group {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-2);
}

.pill-option {
   position: relative;
   cursor: pointer;
}

.pill-option input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.pill-option__label {
   display: block;
   padding: var(--sp-2) var(--sp-4);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   cursor: pointer;
   transition:
      border-color var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease),
      background var(--duration-fast) var(--ease);
}

.pill-option input:checked+.pill-option__label {
   border-color: var(--clr-accent);
   color: var(--text-title);
   background: var(--badge-accent-bg);
}

.pill-option__label:hover {
   border-color: var(--border-accent);
   color: var(--text-primary);
   background: var(--bg-hover);
}

/* Contact form steps */
.contact-step {
   display: none;
}

.contact-step.active {
   display: block;
}

@media (width > 480px) {
   .contact-box {
      border: 1px solid var(--border-strong);
      background: var(--bg-raised);
      border-radius: var(--radius-lg);
      padding: var(--sp-4);
      overflow: hidden; /* klipper step-timeline-remsan vid rundade hörn */
   }
}

/* ── Image placeholder ───────────────────────────────────────── */

.img-placeholder {
   background: var(--bg-overlay);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   font-size: var(--fs-sm);
   aspect-ratio: 16/10;
   width: 100%;
}

/* ── Cookie banner ───────────────────────────────────────────── */

.cookie-banner {
   position: fixed;
   bottom: var(--sp-4);
   left: var(--sp-4);
   right: var(--sp-4);
   max-width: 480px;
   background: var(--bg-overlay);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-5) var(--sp-6);
   box-shadow: var(--shadow-lg);
   z-index: 1000;
}

.cookie-banner.show {
   animation: cookie-in 240ms var(--ease) forwards;
}

.cookie-banner.hiding {
   animation: cookie-out 140ms var(--ease) forwards;
}

.cookie-banner__header {
   display: flex;
   align-items: center;
   gap: var(--sp-3);
   margin-bottom: var(--sp-3);
}

.cookie-banner__icon {
   display: flex;
   flex-shrink: 0;
   color: var(--badge-accent-text);
}

.cookie-banner__icon svg {
   width: 1.75rem;
   height: 1.75rem;
}

.cookie-banner__title {
   font-family: var(--ff-heading);
   font-size: var(--fs-lg);
   font-weight: 500;
   color: var(--text-primary);
   margin: 0;
}

.cookie-banner__text {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   margin-bottom: var(--sp-4);
   max-width: 100%;
}

.cookie-banner__actions {
   display: flex;
   gap: var(--sp-2);
   flex-wrap: wrap;
   justify-content: flex-end;
}

/* ── Toast ───────────────────────────────────────────────────── */

.toast {
   position: fixed;
   bottom: var(--sp-4);
   right: var(--sp-4);
   max-width: 360px;
   padding: var(--sp-4) var(--sp-5);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   background: var(--bg-overlay);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: var(--text-primary);
   z-index: 1100;
   animation: toast-in var(--duration-slow) var(--ease);
}

.toast__title {
   font-size: var(--fs-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin: 0 0 var(--sp-1);
}

.toast__body {
   font-size: var(--fs-base);
   line-height: 1.4;
   margin: 0;
}

.toast--success {
   border-color: rgba(34, 197, 94, 0.5);
   background: rgba(34, 197, 94, 0.1);
   color: var(--text-primary);
}

.toast--error {
   border-color: rgba(239, 68, 68, 0.5);
   background: rgba(239, 68, 68, 0.1);
   color: var(--text-primary);
}

[data-theme="light"] .toast--success {
   border-color: rgba(22, 163, 74, 0.45);
   background: rgba(22, 163, 74, 0.08);
}

[data-theme="light"] .toast--error {
   border-color: rgba(220, 38, 38, 0.45);
   background: rgba(220, 38, 38, 0.08);
}

.toast--warn {
   border-color: color-mix(in srgb, var(--clr-warning) 50%, transparent);
   background: color-mix(in srgb, var(--clr-warning) 10%, transparent);
   color: var(--text-primary);
}

@keyframes cookie-in {
   from { transform: translateX(calc(-100% - var(--sp-4))) translateY(2rem); }
   to   { transform: translateX(0) translateY(0); }
}

@keyframes cookie-out {
   from { opacity: 1; transform: translateX(0) translateY(0); }
   to   { opacity: 0; transform: translateX(calc(-100% - var(--sp-4))) translateY(2rem); }
}

@keyframes toast-in {
   from { transform: translateX(3rem) translateY(2rem); }
   to   { transform: translateX(0) translateY(0); }
}

@keyframes toast-out {
   from { opacity: 1; transform: translateX(0) translateY(0); }
   to   { opacity: 0; transform: translateX(3rem) translateY(2rem); }
}

.toast--hiding {
   animation: toast-out var(--duration-slow) var(--ease) forwards;
}

@media (min-width: 768px) {
   .toast {
      bottom: var(--sp-10);
      right: var(--sp-10);
   }

   .cookie-banner {
      bottom: var(--sp-10);
      left: var(--sp-10);
   }
}

/* ── Process steps ───────────────────────────────────────────── */

.process-list {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.process-item {
   display: grid;
   grid-template-columns: 3rem 1fr;
   gap: var(--sp-4);
   padding-block: var(--sp-6);
   border-bottom: 1px solid var(--border);
   position: relative;
}

.process-item:last-child {
   border-bottom: none;
}

.process-item__num {
   font-family: var(--ff-heading);
   font-size: var(--fs-2xl);
   font-weight: 700;
   color: var(--badge-accent-text);
   line-height: 1;
   padding-top: var(--sp-1);
}

.process-item__title {
   font-family: var(--ff-heading);
   font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
   color: var(--text-primary);
   margin-bottom: var(--sp-2);
}

.process-item__desc {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   max-width: 55ch;
}

/* ── Testimonial card ────────────────────────────────────────── */

.testimonial-card {
   background: var(--bg-raised);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-8);
   display: flex;
   flex-direction: column;
   gap: var(--sp-5);
}

.testimonial-card__quote {
   font-size: var(--fs-lg);
   color: var(--text-primary);
   line-height: 1.6;
   max-width: 100%;
}

.testimonial-card__quote::before {
   content: '\201C';
   color: var(--badge-accent-text);
}

.testimonial-card__quote::after {
   content: '\201D';
   color: var(--badge-accent-text);
}

.testimonial-card__author {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.testimonial-card__name {
   font-family: var(--ff-heading);
   font-size: var(--fs-base);
   color: var(--text-primary);
}

.testimonial-card__role {
   font-size: var(--fs-sm);
   color: var(--text-muted);
}

/* ── CTA strip ───────────────────────────────────────────────── */

.cta-strip {
   text-align: center;
   padding-block: clamp(var(--sp-12), 8vw, var(--sp-24));
   border-top: 1px solid var(--border);
   background: var(--bg-surface);
}

.cta-strip__title {
   font-family: var(--ff-heading);
   font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
   margin-bottom: var(--sp-4);
   max-width: 22ch;
   margin-inline: auto;
   line-height: 1.1;
   text-wrap: balance;
}

.cta-strip__sub {
   color: var(--text-secondary);
   margin-bottom: var(--sp-8);
   max-width: 50ch;
   margin-inline: auto;
}

.cta-strip__actions {
   display: flex;
   justify-content: center;
   gap: var(--sp-4);
   flex-wrap: wrap;
}

/* ── Positioning strip ───────────────────────────────────────── */

.positioning-strip {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding-block: var(--sp-5);
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--sp-8);
}

.positioning-strip__item {
   font-family: var(--ff-heading);
   font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.12em;
   white-space: nowrap;
}

/* ── Case study hero ─────────────────────────────────────────── */

.cs-hero {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--sp-12);
   align-items: center;
}

.cs-hero__image {
   width: 100%;
   display: block;
   border-radius: var(--radius-lg);
   object-fit: cover;
   box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
   .cs-hero {
      grid-template-columns: 1fr;
   }
}

/* ── Breadcrumb ──────────────────────────────────────────────── */

.breadcrumb {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
   font-size: var(--fs-sm);
   color: var(--text-muted);
   margin-bottom: var(--sp-6);
   flex-wrap: wrap;
}

.breadcrumb a {
   color: var(--text-secondary);
   transition: color var(--duration-fast);
}

.breadcrumb a:hover {
   color: var(--badge-accent-text);
}

.breadcrumb__sep {
   color: var(--text-secondary);
   opacity: 0.8;
}

.breadcrumb__current {
   color: var(--text-secondary);
}

/* ── Section border variant ──────────────────────────────────── */

.section--border-top {
   border-top: 1px solid var(--border);
}

/* ── Section titles ──────────────────────────────────────────── */

.section-title {
   line-height: 1.05;
   margin-top: 0;
   margin-bottom: var(--sp-12);
}

/* ── Section CTA wrapper ─────────────────────────────────────── */

.section-cta {
   margin-top: var(--sp-10);
}

/* ── Section header row ──────────────────────────────────────── */

.section-header-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--sp-10);
   flex-wrap: wrap;
   gap: var(--sp-4);
}

/* ── Featured cover image ────────────────────────────────────── */

.featured-img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--radius-lg);
}

/* ── Placeholder card ────────────────────────────────────────── */

.card--placeholder {
   opacity: 0.6;
}

/* ── Home: section-specific overrides ───────────────────────── */

#services .section-title {
   max-width: 24ch;
}

#featured-work .grid-golden {
   margin-top: var(--sp-10);
}

#featured-work .section-title {
   max-width: 16ch;
   margin-bottom: var(--sp-4);
}

#featured-work .badge {
   margin-bottom: var(--sp-4);
   display: block;
}

#featured-work p {
   margin-bottom: var(--sp-6);
}

#featured-work span.tag-list {
   margin-bottom: var(--sp-8);
   width: 200px;
   background: red !important;
}

#selected-work .section-title {
   max-width: 18ch;
}

#process .grid-golden {
   margin-top: var(--sp-2);
}

#process .section-title {
   max-width: 14ch;
   margin-bottom: var(--sp-4);
}

#why-kwebb .section-title {
   max-width: 20ch;
}

#blog .section-title {
   max-width: 18ch;
   margin-bottom: 0;
   margin-top: var(--sp-2);
}

/* ── 404 page ────────────────────────────────────────────────── */

.page-404 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: calc(100vh - 68px);
   margin-top: 68px;
   padding: var(--sp-8) 0;
   text-align: center;
}

.page-404__code {
   font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--badge-accent-text);
   margin-bottom: var(--sp-4);
   max-width: 100%;
}

.page-404__title {
   max-width: 100%;

   margin-bottom: var(--sp-4);
}

.page-404__sub {
   margin-bottom: var(--sp-12);
   max-width: 100%;

}

.page-404__actions {
   max-width: 100%;

   display: flex;
   gap: var(--sp-4);
   justify-content: center;
   flex-wrap: wrap;
}

/* ── Page heading (h1 on listing/content pages) ──────────────── */

.page-h1 {
   max-width: 20ch;
   margin-bottom: 1.5rem;
}

.page-h1--lg-mb {
   margin-bottom: 4rem;
}

.page-h1--prose {
   max-width: none;
   margin-bottom: 2rem;
}

.page-h1--narrow {
   max-width: 16ch;
}

/* ── Lead variants ───────────────────────────────────────────── */

.lead--lg-mb {
   margin-bottom: 4rem;
}

/* ── About portrait ──────────────────────────────────────────── */

.about-portrait {
   width: 100%;
   border-radius: var(--radius-lg);
   aspect-ratio: 4/5;
   object-fit: cover;
   max-height: 500px;
}

/* ── Card date ───────────────────────────────────────────────── */

.card__date {
   font-size: var(--fs-xs);
   color: var(--text-muted);
   margin-top: var(--sp-3);
}

/* ── Tag list variants ───────────────────────────────────────── */

.tag-list--mt {
   margin-top: var(--sp-3);
}

.tag-list--footer {
   margin-top: var(--sp-12);
   padding-top: var(--sp-6);
   border-top: 1px solid var(--border);
}

/* ── Article date ────────────────────────────────────────────── */

.article-date {
   font-size: var(--fs-sm);
   color: var(--text-muted);
}

/* ── Article footer ──────────────────────────────────────────── */

.article-footer {
   margin-top: var(--sp-12);
}

/* ── Page hero (blog-single, case-study-single) ──────────────── */

.page-hero {
   padding-top: 8rem;
   padding-bottom: 4rem;
   background: var(--bg-raised);
   border-bottom: 1px solid var(--border);
}

.page-hero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-3);
   align-items: center;
   margin-top: var(--sp-6);
   margin-bottom: var(--sp-4);
}

.page-hero__cover {
   background: var(--bg-base);
   border-bottom: 1px solid var(--border);
}

.page-hero__cover .container {
   padding-block: 0;
}

.page-hero__cover-img {
   width: 100%;
   display: block;
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.page-hero__title {
   margin-bottom: var(--sp-4);
}

/* ── Case study hero ─────────────────────────────────────────── */

.hero-section {
   padding-top: 8rem;
   padding-bottom: 4rem;
   background: var(--bg-raised);
   position: relative;
}



/* ── Scroll hint arrow ───────────────────────────────────────── */

@keyframes cs-scroll-bounce {

   0%,
   100% {
      transform: translateX(-50%) translateY(0);
      opacity: 0.5;
   }

   50% {
      transform: translateX(-50%) translateY(6px);
      opacity: 1;
   }
}

.cs-scroll-hint {
   position: fixed;
   bottom: 1.5rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--badge-accent-text);
   text-decoration: none;
   animation: cs-scroll-bounce 2s ease-in-out infinite;
   transition: opacity var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
   z-index: 100;
}

.cs-scroll-hint:hover {
   color: var(--clr-accent-light);
   animation-play-state: paused;
}

.cs-scroll-hint.is-hidden {
   opacity: 0;
   pointer-events: none;
   animation: none;
   transition: opacity 0.4s var(--ease);
}

.cs-scroll-hint__icon {
   width: 3.5rem;
   height: 3.5rem;
   stroke-width: 1;
}

.cs-hero__title {
   margin-top: var(--sp-6);
   margin-bottom: var(--sp-4);
}

.cs-hero__lead {
   margin-bottom: var(--sp-8);
}

.cs-meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-8);
   padding-top: var(--sp-6);
   border-top: 1px solid var(--border);
   font-size: var(--fs-sm);
}

.cs-meta__label {
   color: var(--text-muted);
   display: block;
   margin-bottom: var(--sp-1);
}

.cs-meta__value {
   font-weight: 600;
}

.cs-section {
   margin-bottom: 3.5rem;
}

.cs-section__result-link {
   margin-top: var(--sp-6);
}

/* ── Case study section with side image ─────────────────────── */

.cs-section-media {
   display: grid;
   grid-template-columns: 1.618fr 1fr;
   gap: var(--sp-10);
   align-items: start;
}

.cs-section-media--left {
   grid-template-columns: 1fr 1.618fr;
}

.cs-section-media__img {
   width: 100%;
   display: block;
   border-radius: var(--radius-md);
   height: auto;
   box-shadow: var(--shadow-md);
   cursor: zoom-in;
}

@media (max-width: 768px) {
   .cs-section-media,
   .cs-section-media--left {
      grid-template-columns: 1fr;
   }

   .cs-section-media--left .cs-section-media__img {
      order: -1;
   }
}

/* ── Case study section heading (h2 + floating icon) ─────────── */

.cs-section-heading {
   font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
   font-family: var(--ff-heading);
   line-height: 1.2;
   color: var(--text-title);
   margin-bottom: var(--sp-6);
   position: relative;
}

.cs-section-heading__icon {
   position: absolute;
   left: -2.5rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
   display: flex;
   align-items: center;
   line-height: 0;
   pointer-events: none;
}

.cs-section-heading__icon svg {
   width: 1.25rem;
   height: 1.25rem;
}

@media (max-width: 768px) {
   .cs-section-heading__icon {
      display: none;
   }
}

/* ── Case study section nav ──────────────────────────────────── */

/* Mobile default: horizontal sticky bar */
.cs-sidenav {
   position: sticky;
   top: var(--sidenav-top, 4rem);
   z-index: 40;
   background: var(--nav-timeline-bg);
   border-bottom: 1px solid var(--border);
   opacity: 0;
   pointer-events: none;
   backdrop-filter: blur(4px);
   transition: opacity 350ms var(--ease);
}

.cs-sidenav--visible {
   opacity: 1;
   pointer-events: auto;
}

.cs-sidenav__list {
   list-style: none;
   margin: 0;
   padding: 0 var(--sp-4);
   display: flex;
   flex-direction: row;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.cs-sidenav__list::-webkit-scrollbar {
   display: none;
}

.cs-sidenav__item {
   flex-shrink: 0;
}

.cs-sidenav__link {
   display: flex;
   align-items: center;
   padding: var(--sp-3) var(--sp-3);
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition:
      color 180ms ease,
      border-color 180ms ease;
   outline-offset: -2px;
}

.cs-sidenav__link:focus-visible {
   outline: 2px solid var(--clr-accent);
   outline-offset: -2px;
}

.cs-sidenav__dot {
   display: none;
}

.cs-sidenav__label {
   font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 14ch;
   user-select: none;
   transition: color 180ms ease;
}

.cs-sidenav__link:hover .cs-sidenav__label {
   color: var(--text-title);
}

.cs-sidenav__link[aria-current] {
   border-bottom-color: var(--clr-accent);
}

.cs-sidenav__link[aria-current] .cs-sidenav__label {
   color: var(--text-title);
}

/* Desktop: fixed vertical sidebar */
@media (min-width: 1280px) {
   .cs-sidenav {
      position: fixed;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      backdrop-filter: none;
      border-bottom: none;
      overflow: visible;
      z-index: 50;
      opacity: 1;
      pointer-events: auto;
   }

   .cs-sidenav--hidden {
      opacity: 0;
      pointer-events: none;
   }

   .cs-sidenav__list {
      flex-direction: column;
      overflow: visible;
      padding: 0;
      position: relative;
   }

   /* Vertical track line — centered on 1rem (16px) dots */
   .cs-sidenav__list::before {
      content: '';
      position: absolute;
      right: 7px;
      width: 2px;
      top: 18px;
      bottom: 18px;
      background: var(--border-strong);
      border-radius: 1px;
   }

   .cs-sidenav__item {
      flex-shrink: unset;
   }

   .cs-sidenav__link {
      justify-content: flex-end;
      gap: var(--sp-3);
      padding: 10px 0;
      border-bottom: none;
      outline-offset: 2px;
   }

   .cs-sidenav__link:focus-visible {
      outline-offset: 4px;
   }

   .cs-sidenav__dot {
      display: block;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background: var(--bg-base);
      border: 2px solid var(--border-strong);
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      transition:
         background 220ms var(--ease),
         border-color 220ms var(--ease),
         transform 220ms var(--ease),
         box-shadow 220ms var(--ease);
   }

   .cs-sidenav__link:hover .cs-sidenav__dot {
      border-color: var(--clr-accent);
      background: var(--badge-accent-bg);
      transform: scale(1.2);
   }

   .cs-sidenav__link[aria-current] .cs-sidenav__dot {
      background: var(--clr-accent);
      border-color: var(--clr-accent);
      transform: scale(1.35);
      box-shadow: 0 0 0 5px var(--clr-accent-glow);
   }

   .cs-sidenav__label {
      font-size: 11px;
      opacity: 0;
      transform: translateX(6px);
      transition:
         opacity 180ms ease,
         transform 180ms ease,
         color 180ms ease;
   }

   .cs-sidenav:hover .cs-sidenav__label {
      opacity: 1;
      transform: translateX(0);
      color: var(--text-muted);
      max-width: none;
   }

   .cs-sidenav__link:hover .cs-sidenav__label,
   .cs-sidenav__link:focus-visible .cs-sidenav__label {
      color: var(--text-title);
   }

   .cs-sidenav__link[aria-current] .cs-sidenav__label {
      opacity: 1;
      transform: translateX(0);
      color: var(--text-title);
   }
}

/* ── Contact page ────────────────────────────────────────────── */

.contact-success {
   max-width: 560px;
   margin: 4rem auto;
   text-align: center;
   padding: var(--sp-12);
   background: var(--bg-raised);
   border: 1px solid var(--border-accent);
   border-radius: var(--radius-lg);
}

.contact-success__title {
   margin-bottom: var(--sp-4);
}

.contact-success__text {
   margin-bottom: var(--sp-8);
   max-width: 100%;
}

.contact-info {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.contact-info__label {
   font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--text-muted);
   font-weight: 600;
}

.contact-info__value {
   max-width: 100%;
   margin-top: var(--sp-1);
}

.contact-desc {
   margin-bottom: 2.5rem;
   max-width: 40ch;
}

/* ── Contact form steps ──────────────────────────────────────── */

.step-heading {
   font-size: clamp(var(--fs-xl), 1.125vw, var(--fs-3xl));
   margin-top: var(--sp-1);
   margin-bottom: var(--sp-2);
   font-weight: 600;
   letter-spacing: 0.03em;
   text-transform: uppercase;
}

.step-desc {
   margin-bottom: 1.5rem;
   max-width: 100%;
}

.step-fields {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   margin-bottom: var(--sp-8);
}

.step-nav {
   display: flex;
   gap: var(--sp-4);
   margin-top: var(--sp-8);
}

.step-nav--wrap {
   flex-wrap: wrap;
}

/* ── Form label hint ─────────────────────────────────────────── */

.form-label__hint {
   color: var(--text-muted);
   font-weight: 400;
}

/* ── Form group margin variants ──────────────────────────────── */

.form-group--mb {
   margin-bottom: var(--sp-6);
}

.form-group--mb-lg {
   margin-bottom: var(--sp-8);
}

/* ── Checkbox field ──────────────────────────────────────────── */

.checkbox-field {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--sp-3);
   cursor: pointer;
   user-select: none;
}

.checkbox-field input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
}

.checkbox-field__box {
   flex-shrink: 0;
   width: 1.125rem;
   height: 1.125rem;
   border: 1.5px solid var(--border-strong);
   border-radius: 3px;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 2px;
   transition:
      border-color var(--duration-fast) var(--ease),
      background var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
   color: var(--badge-accent-text);
}

.checkbox-field__check {
   width: 0.65rem;
   height: 0.65rem;
   display: block;
   opacity: 0;
   transform: scale(0.5);
   transition:
      opacity var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease);
}

.checkbox-field input:checked ~ .checkbox-field__box {
   border-color: var(--clr-accent);
   background: var(--clr-accent-subtle);
   box-shadow: 0 0 0 3px var(--clr-accent-glow);
}

.checkbox-field input:checked ~ .checkbox-field__box .checkbox-field__check {
   opacity: 1;
   transform: scale(1);
}

.checkbox-field__label {
   font-size: var(--fs-sm);
   color: var(--text-secondary);
   line-height: 1.5;
}

.checkbox-field:focus-within .checkbox-field__box {
   outline: 2px solid var(--clr-accent);
   outline-offset: 2px;
}

.checkbox-field--error .checkbox-field__box {
   border-color: var(--clr-error);
}

.form-verify {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 0;
   width: 0;
   z-index: -1;
   pointer-events: none;
}

/* ── Full-width buttons on mobile (home) ─────────────────────── */

@media (max-width: 600px) {
   .hero-actions,
   .section-cta,
   .cta-strip__actions {
      flex-direction: column;
   }

   .hero-actions .btn,
   .section-cta .btn,
   .cta-strip__actions .btn {
      width: 100%;
      justify-content: center;
   }
}

/* ── Case studies list ───────────────────────────────────────── */

.cs-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
}

.cs-list > li {
   margin: 0;
   padding: 0;
}

.cs-list-item {
   display: flex;
   align-items: center;
   gap: var(--sp-5);
   padding: var(--sp-4);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--bg-raised);
   text-decoration: none;
   transition:
      border-color var(--duration-fast) var(--ease),
      background var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
}

.cs-list-item:hover {
   border-color: var(--border-accent);
   background: var(--bg-hover);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

.cs-list-item:active {
   transform: translateY(1px);
   box-shadow: none;
}

.cs-list-item__image {
   width: 220px;
   flex-shrink: 0;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   border-radius: var(--radius-md);
   display: block;
}

.cs-list-item__image--placeholder {
   background: var(--bg-overlay);
   border: 1px solid var(--border);
}

.cs-list-item__body {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
   min-width: 0;
}

.cs-list-item__eyebrow {
   font-size: var(--fs-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--badge-accent-text);
   margin: 0;
}

.cs-list-item__title {
   font-family: var(--ff-heading);
   font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
   color: var(--text-primary);
   line-height: 1.2;
   margin: 0;
}

@media (max-width: 480px) {
   .cs-list-item {
      gap: var(--sp-3);
      padding: var(--sp-3);
   }

   .cs-list-item__image {
      width: 110px;
   }

   .cs-list-item__title {
      font-size: var(--fs-base);
   }
}

.card:has(.card__image) {
   padding: var(--sp-4);
   border-radius: calc(var(--radius-md) + var(--sp-4));
}

.card:has(.card__image) .card__image {
   border-radius: var(--radius-md);
}

.card:has(.card__image) .card__body {
   padding-inline: 0;
   padding-top: var(--sp-4);
   padding-bottom: 0;
}

@media (max-width: 640px) {
   .blog-grid {
      grid-template-columns: 1fr;
      gap: var(--sp-2);
   }

   .blog-grid .card--link {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
   }

   .blog-grid .card__image {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
      border-radius: var(--radius-md);
      object-fit: cover;
   }

   .blog-grid .card:has(.card__image) .card__body,
   .blog-grid .card__body {
      padding: 0;
      display: grid;
      grid-template-areas:
         "tag date"
         "title title";
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--sp-1) var(--sp-2);
   }

   .blog-grid .card__tag {
      grid-area: tag;
      margin-bottom: 0;
   }

   .blog-grid .card__title {
      grid-area: title;
      font-size: var(--fs-base);
      margin-bottom: 0;
   }

   .blog-grid .card__date {
      grid-area: date;
      margin-top: 0;
   }

   .blog-grid .card__excerpt {
      display: none;
   }
}

/* ─────────────────────────────────────────────────────────
   Trusted By — logo marquee strip
   Always dark background (#0e0b12) regardless of theme,
   so logos never need to change between light/dark mode.
───────────────────────────────────────────────────────── */
.trusted-by {
   --tb-bg: #ffffff;             /* always white — same in both themes */
   background: var(--tb-bg);
   padding-block: var(--sp-12);
   border-top: 1px solid var(--border);
   text-align: center;
}

.trusted-by .container {
   display: flex;
   justify-content: center;
}

.trusted-by__label {
   font-size: var(--fs-xs);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: var(--sp-8);
   text-align: center;
}

/* Clip the scrolling track */
.trusted-by__logos {
   overflow: hidden;
   position: relative;
}

/* Gradient fade at each edge — uses same fixed dark colour */
.trusted-by__logos::before,
.trusted-by__logos::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: clamp(40px, 8vw, 100px);
   z-index: 1;
   pointer-events: none;
   transition: opacity var(--duration-normal) var(--ease);
}
.trusted-by__logos::before {
   left: 0;
   background: linear-gradient(to right, #fff, transparent);
}
.trusted-by__logos::after {
   right: 0;
   background: linear-gradient(to left, #fff, transparent);
}
/* Hide fades when content fits (static mode) */
.trusted-by__logos--static::before,
.trusted-by__logos--static::after {
   opacity: 0;
   pointer-events: none;
}

/* The scrolling row — width: max-content keeps all items on one line */
.trusted-by__track {
   display: flex;
   align-items: center;
   gap: clamp(var(--sp-12), 6vw, var(--sp-24));
   width: max-content;
   animation: trustedByMarquee 20s linear infinite;
}

/* Static mode: stop animation, center items, hide duplicates */
.trusted-by__logos--static .trusted-by__track {
   animation: none;
   justify-content: center;
   width: 100%;
   flex-wrap: wrap;
   gap: clamp(var(--sp-10), 6vw, var(--sp-24));
}
.trusted-by__logos--static .trusted-by__item[aria-hidden="true"] {
   display: none;
}

@keyframes trustedByMarquee {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
   .trusted-by__track {
      animation: none !important;
   }
   .trusted-by__logos--static .trusted-by__item[aria-hidden="true"] {
      display: none;
   }
}

.trusted-by__item {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.trusted-by__item img {
   height: 36px;
   width: auto;
   max-width: 160px;
   object-fit: contain;
   /* --tb-color is 0–1, set by JS based on how centred the section is */
   filter: grayscale(calc((1 - var(--tb-color, 0)) * 100%));
   opacity: calc(0.35 + var(--tb-color, 0) * 0.65);
   transition: filter 0.25s ease, opacity 0.25s ease;
}

/* ── Contact: step timeline ──────────────────────────────────── */

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Vägskyltar-stil: 3 lika breda block, full höjd, grid 1fr 1fr 1fr */
.step-timeline {
   margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-5);
   padding: 0;
   background: transparent;
   border-bottom: 1px solid var(--border);
}

.step-timeline__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   height: 48px;
}

.step-timeline__item {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: var(--sp-2);
   height: 100%;
   position: relative;
   
   padding: 0 var(--sp-3);
   transition: background var(--duration-normal) var(--ease);
}

/* Tunn separator-linje mellan segmenten */
.step-timeline__item:not(:last-child) {
   border-right: 1px solid var(--border);
}

/* Ta bort gammal text-separator ::before */
.step-timeline__item:not(:first-child)::before {
   display: none;
   content: '';
}

/*
   Pil-chevron på de två första segmenten.
   Roterad fyrkant med enbart border-right + border-top = ">" som pekar höger.
   Sitter centrerat på höger kant, z-index 3 för att ligga ovanpå gränsen.
*/
.step-timeline__item:not(:last-child)::after {
   content: '';
   position: absolute;
   right: -8px;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   width: 14px;
   height: 14px;
   border-right: 1.5px solid var(--border);
   border-top: 1.5px solid var(--border);
   background: var(--bg-raised);   /* matchar contact-box-bakgrunden */
   z-index: 3;
   pointer-events: none;
}

/* Aktivt/klart segment: pil fylls i med samma ljusa bakgrund (högre specificitet) */
.step-timeline__item--active:not(:last-child)::after,
.step-timeline__item--done:not(:last-child)::after {
   background: var(--clr-accent-subtle-solid);
   z-index: 1;
}

/* Litet nummer/checkmark-badge */
.step-timeline__node {
   position: relative;
   width: 1.375rem;
   height: 1.375rem;
   border-radius: 50%;
   border: 1.5px solid var(--border);
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition:
      border-color var(--duration-normal) var(--ease),
      background var(--duration-normal) var(--ease);
}

.step-timeline__number {
   font-family: var(--ff-heading);
   font-size: 0.65rem;
   font-weight: 700;
   color: var(--text-muted);
   line-height: 0;
   transition: opacity var(--duration-normal) var(--ease);
}

.step-timeline__check {
   position: absolute;
   width: 0.625rem;
   height: 0.625rem;
   color: var(--text-primary);
   opacity: 0;
   transform: scale(0.5);
   transition:
      opacity var(--duration-fast) var(--ease),
      transform var(--duration-fast) var(--ease);
}

.step-timeline__label {
   font-size: var(--fs-xs);
   font-weight: 500;
   color: var(--text-muted);
   white-space: nowrap;
   transition: color var(--duration-normal) var(--ease);
}

/* Aktivt steg — segment + badge fylls */
.step-timeline__item--active {
   background: var(--clr-accent-subtle-solid);
}

.step-timeline__item--active .step-timeline__node {
   border-color: var(--clr-accent);
   background: var(--clr-accent);
}

.step-timeline__item--active .step-timeline__number {
   color: var(--clr-always-white);
}

.step-timeline__item--active .step-timeline__label {
   color: var(--badge-accent-text);
   font-weight: 600;
}

/* Avslutat steg — hela segmentet fyllt + vit checkmark i badge */
.step-timeline__item--done {
   background: var(--clr-accent-subtle-solid);
}

.step-timeline__item--done .step-timeline__node {
   border-color: transparent;
   background: var(--clr-accent-subtle-solid);
   cursor: pointer;
}

.step-timeline__item--done .step-timeline__node:hover {
   background: var(--clr-accent-subtle-solid);
   border-color: transparent;
}

.step-timeline__item--done .step-timeline__number {
   opacity: 0;
}

.step-timeline__item--done .step-timeline__check {
   opacity: 1;
   transform: scale(1);
}

.step-timeline__item--done .step-timeline__label {
   color: var(--text-secondary);
}

/* Mobil — contact-box har ingen border, så steppen behöver egna kanter */
@media (max-width: 480px) {
   .step-timeline {
      border: 1px solid var(--border);
      border-radius:0;
   }

   .step-timeline__list {
      height: 44px;
   }

   .step-timeline__label {
      font-size: 0.65rem;
   }

   .service-choice-grid {
      grid-template-columns: 1fr;
   }
}

/* Reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
   .step-timeline__node,
   .step-timeline__number,
   .step-timeline__check,
   .step-timeline__label {
      transition: none;
   }
}

/* ── FAQ accordion ────────────────────────────────────────────── */

.faq-list {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--border);
}

#faq .grid-golden {
   margin-top: var(--sp-2);
}

#faq .section-title {
   max-width: 16ch;
   margin-top: 0;
   margin-bottom: var(--sp-4);
}

.faq-item {
   border-bottom: 1px solid var(--border);
}

.faq-item__question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--sp-6);
   padding: var(--sp-5) 0;
   font-size: var(--fs-lg);
   font-weight: 500;
   color: var(--text-primary);
   cursor: pointer;
   list-style: none;
   line-height: 1.4;
   user-select: none;
   transition: color var(--duration-fast) var(--ease);
}

.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { display: none; }

.faq-item__question:hover {
   color: var(--clr-accent);
}

.faq-item__question:hover .faq-item__chevron {
   color: var(--clr-accent);
}

.faq-item__chevron {
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   color: var(--text-muted);
   transition: transform 320ms var(--ease), color var(--duration-fast) var(--ease);
}

.faq-item[open] .faq-item__chevron {
   transform: rotate(180deg);
   color: var(--clr-accent);
}

/* Body — the animated height wrapper */
.faq-item__body {
   overflow: hidden;
}

.faq-item__answer {
   margin: 0;
   padding-bottom: var(--sp-5);
   color: var(--text-secondary);
   line-height: 1.75;
   font-size: var(--fs-base);
}

/* Tablet */
@media (max-width: 768px) {
   .faq-list {
      max-width: 100%;
   }
}

/* Mobile */
@media (max-width: 480px) {
   .faq-item__question {
      font-size: var(--fs-base);
      padding: var(--sp-4) 0;
      gap: var(--sp-4);
   }

   .faq-item__chevron {
      width: 1.125rem;
      height: 1.125rem;
   }
}

@media (prefers-reduced-motion: reduce) {
   .faq-item__chevron {
      transition: color var(--duration-fast) var(--ease);
   }
}