/* ============================================
   LANDING PAGES — Service, Brand, Area, Blog
   ============================================
   Alle værdier bruger tokens fra theme-config.css
   Ingen hardcoded farver — alt er justerbart centralt.
   ============================================ */


/* =============================================
   HERO VARIANT A — Cinematic Dark
   Brugt af: Service-sider, Skadecenter, Biludlejning
   ============================================= */
.hero-cinematic {
  position: relative;
  min-height: var(--hero-a-min-height);
  display: flex;
  align-items: center;
  background: var(--brand-primary);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: clip;
  padding: 56px 0 44px;
}
.hero-cinematic .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-cinematic .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,20,40,0.35) 0%,
    rgba(0,20,40,0.45) 40%,
    rgba(0,20,40,0.72) 100%
  );
}
/* Overlay for workshop pages (bg-image on section) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,20,40,0.35) 0%,
    rgba(0,20,40,0.45) 40%,
    rgba(0,20,40,0.72) 100%
  );
  z-index: 1;
}
/* Ambient accent orb */
.hero-cinematic::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--page-accent-rgb), 0.15) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.hero-cinematic .container {
  position: relative;
  z-index: 2;
}
.hero-cinematic .section-label {
  color: var(--page-accent, rgba(255,255,255,0.9));
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-cinematic h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-a-title-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-lg);
  max-width: 700px;
  color: #fff;
}
.hero-cinematic .hero-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin-bottom: var(--space-xl);
}

/* Quick facts row in hero */
.hero-facts {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.hero-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-fact-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(255,255,255,0.5);
}
.hero-fact-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #fff;
}

/* Accent bar under hero title */
.hero-accent-bar {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--page-accent, var(--brand-cta));
  margin-bottom: var(--space-lg);
}


/* =============================================
   HERO VARIANT B — Split (Content + Image)
   Brugt af: Udvalgte service-sider, bilsalg
   ============================================= */
.hero-split {
  position: relative;
  min-height: var(--hero-b-min-height);
  display: flex;
  align-items: center;
  background: var(--brand-primary);
  color: #fff;
  overflow: clip;
  padding: 60px 0;
}
.hero-split::before {
  content: '';
  position: absolute;
  bottom: -20%; left: -10%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--page-accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-split .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--hero-b-columns);
  gap: var(--hero-b-gap);
  align-items: center;
}
.hero-split h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-b-title-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero-split .hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-xl);
}
.hero-split-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
.hero-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =============================================
   HERO VARIANT C — Brand Hero (med logo)
   Brugt af: Bilmærke-sider
   ============================================= */
.hero-brand {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background: var(--brand-primary);
  color: #fff;
  overflow: clip;
  padding: 60px 0;
}
.hero-brand .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-brand .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,20,40,0.35) 0%,
    rgba(0,20,40,0.45) 40%,
    rgba(0,20,40,0.72) 100%
  );
}
.hero-brand::before {
  content: '';
  position: absolute;
  top: -25%; right: -15%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--page-accent-rgb), 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-brand .container {
  position: relative;
  z-index: 2;
}
.hero-brand-logo {
  height: var(--hero-c-logo-height);
  width: auto;
  margin-bottom: var(--space-lg);
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.hero-brand h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-c-title-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin-bottom: var(--space-md);
}
/* Accent underline */
.hero-brand h1::after {
  content: '';
  display: block;
  width: 80px;
  height: var(--hero-c-accent-bar);
  background: var(--page-accent, var(--brand-cta));
  border-radius: 2px;
  margin-top: var(--space-md);
}
.hero-brand .hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-bottom: var(--space-xl);
}

/* Expert badge in brand hero */
.hero-brand-expert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  padding: 6px 16px 6px 6px;
  margin-bottom: var(--space-lg);
}
.hero-brand-expert img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.hero-brand-expert span {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
}


/* =============================================
   HERO VARIANT D — Map / Distance (Område)
   ============================================= */
.hero-area {
  position: relative;
  min-height: var(--hero-d-min-height);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #003B5C, #00543E);
  color: #fff;
  overflow: clip;
  padding: 60px 0;
}
.hero-area .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-area .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,40,30,0.38) 0%,
    rgba(0,40,30,0.48) 40%,
    rgba(0,40,30,0.75) 100%
  );
}
.hero-area::before {
  content: '';
  position: absolute;
  bottom: -30%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-area-rgb), 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-area .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-area h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-d-title-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero-area .hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-xl);
}

/* Distance card i hero */
.distance-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.distance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
}
.distance-item-icon {
  font-size: 28px;
  margin-bottom: var(--space-xs);
  color: var(--accent-area);
}
.distance-item-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #fff;
}
.distance-item-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}


/* =============================================
   HERO VARIANT E — Minimal Light
   Brugt af: Blog, generiske sider
   ============================================= */
.hero-minimal {
  background: var(--hero-e-bg);
  border-bottom: var(--hero-e-border);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.hero-minimal h1 {
  font-family: var(--font-heading);
  font-size: var(--hero-e-title-size);
  font-weight: var(--weight-extrabold);
  color: var(--hero-e-title-color);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-sm);
}
.hero-minimal .hero-sub {
  font-size: var(--text-lg);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  max-width: 640px;
}
.hero-minimal .hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--neutral-400);
}


/* =============================================
   CONTENT LAYOUT — Service grid
   ============================================= */
.landing-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--sidebar-gap);
  align-items: start;
}
.landing-main {
  min-width: 0; /* prevent grid blowout */
}
.landing-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
}


/* =============================================
   ANSWER-FIRST BOX
   Moved to consolidated definition below (~line 1230+)
   ============================================= */


/* =============================================
   SIDEBAR COMPONENTS
   ============================================= */

/* Expert card */
.sidebar-expert {
  background: var(--expert-card-bg);
  border: 1px solid var(--expert-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--expert-card-shadow);
  text-align: center;
}
.sidebar-expert-avatar {
  width: var(--expert-avatar-size);
  height: var(--expert-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-md);
  border: 3px solid var(--neutral-100);
}
.sidebar-expert-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.sidebar-expert-role {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: var(--space-md);
}
.sidebar-expert .btn {
  width: 100%;
  justify-content: center;
}

/* Price card */
.sidebar-price {
  background: var(--price-bg);
  border: 1px solid var(--price-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.sidebar-price h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-md);
}
.sidebar-price-range {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.sidebar-price-from {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--page-accent);
}
.sidebar-price-to {
  font-size: var(--text-base);
  color: var(--neutral-500);
}
.sidebar-price-note {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  line-height: var(--leading-normal);
}

/* Trust card */
.sidebar-trust {
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.sidebar-trust img {
  max-width: 140px;
  margin: 0 auto var(--space-sm);
}
.sidebar-trust p {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Benefits list (area sidebar) */
.sidebar-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 0;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
}
.sidebar-benefits li:last-child { border: none; }
.sidebar-benefits li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--page-accent-rgb), 0.1);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%23059669' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}


/* =============================================
   FAQ — Accordion
   ============================================= */
.faq-section {
  padding: var(--section-padding) 0;
}
.faq-section h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xl);
}
.faq-list {
  max-width: var(--container-narrow);
}
.faq-item {
  border-bottom: 1px solid var(--faq-border);
  transition: background var(--duration-fast) ease;
}
.faq-item:hover {
  background: var(--faq-hover-bg);
}
.faq-item[open] {
  background: var(--faq-hover-bg);
}
.faq-question {
  padding: var(--faq-padding);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--faq-marker-color);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-default);
}
.faq-item[open] .faq-question::after {
  content: '−';
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 var(--faq-padding) var(--faq-padding);
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
}
.faq-answer p { margin-bottom: var(--space-sm); }
.faq-answer p:last-child { margin-bottom: 0; }


/* =============================================
   PROCESS / TIMELINE — Service-sider
   ============================================= */
.process-section {
  padding: var(--section-padding) 0;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  counter-reset: step;
}
.process-step {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--neutral-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  counter-increment: step;
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) ease;
}
.process-step:hover {
  transform: var(--hover-lift-small);
  box-shadow: var(--shadow-lg);
}
.process-step::before {
  content: counter(step);
  position: absolute;
  top: -16px;
  left: var(--space-lg);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--page-accent);
  color: var(--neutral-white);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.process-step p {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* =============================================
   COMMON ISSUES — Bilmærke-sider
   ============================================= */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.issue-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}
.issue-card:hover {
  transform: var(--hover-lift-small);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--page-accent-rgb), 0.2);
}
.issue-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--page-accent-rgb), 0.08);
  color: var(--page-accent);
  margin-bottom: var(--space-md);
}
.issue-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.issue-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.issue-card p {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Price table */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
}
.price-table th,
.price-table td {
  padding: 14px var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
}
.price-table th {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
}
.price-table td {
  color: var(--neutral-700);
}
.price-table td:last-child {
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
}
.price-table tbody tr {
  transition: background var(--duration-fast) ease;
}
.price-table tbody tr:hover {
  background: var(--neutral-50);
}


/* =============================================
   TESTIMONIAL — Område-sider
   ============================================= */
.testimonial-block {
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-2xl) 0;
  position: relative;
}
.testimonial-block::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: var(--space-lg);
  font-size: 72px;
  font-family: Georgia, serif;
  color: rgba(var(--page-accent-rgb), 0.15);
  line-height: 1;
}
.testimonial-block p {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
}
.testimonial-block cite {
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
}


/* =============================================
   MAP SECTION — Område-sider
   ============================================= */
.map-section {
  margin: var(--space-2xl) 0;
}
.map-section h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-md);
}
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}


/* =============================================
   CTA BOTTOM — Alle landing pages
   ============================================= */
.cta-bottom {
  background: var(--cta-bottom-bg);
  color: var(--neutral-900);
  padding: var(--space-3xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--neutral-200);
}
.cta-bottom::before {
  content: '';
  position: absolute;
  top: -40%; right: -15%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--cta-bottom-orb);
  pointer-events: none;
}
.cta-bottom .container {
  position: relative;
  z-index: 2;
}
.cta-bottom h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.cta-bottom p {
  font-size: var(--text-lg);
  color: var(--neutral-600);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-bottom .btn-row {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}


/* =============================================
   EXPERT BYLINE — Bilmærke-sider
   ============================================= */
.expert-byline-section {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--neutral-200);
}
.expert-byline {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.expert-byline-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neutral-200);
}
.expert-byline-info strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
}
.expert-byline-info span {
  display: block;
  font-size: var(--text-sm);
  color: var(--neutral-500);
}
.expert-byline-years {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--page-accent);
  background: rgba(var(--page-accent-rgb), 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-top: 4px;
}


/* =============================================
   SCROLL ANIMATIONS — Landing page specific
   Token-based med page-type profiler
   ============================================= */

/* Base hidden state — bruger tokens */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--duration-slower);
  transition-timing-function: var(--ease-default);
  will-change: opacity, transform;
}
[data-animate="fade-up"]    { transform: translateY(var(--anim-distance-up)); }
[data-animate="fade-in"]    { /* bare opacity */ }
[data-animate="slide-left"] { transform: translateX(calc(var(--anim-distance-side) * -1)); }
[data-animate="slide-right"]{ transform: translateX(var(--anim-distance-side)); }
[data-animate="scale-in"]   { transform: scale(var(--anim-scale-from)); }
[data-animate="zoom-in"]    { transform: scale(0.95); filter: blur(4px); transition-property: opacity, transform, filter; }

/* Revealed state */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: none;
}

/* Stagger children med CSS custom prop */
[data-animate][data-delay="1"] { transition-delay: calc(var(--stagger-base) * 1); }
[data-animate][data-delay="2"] { transition-delay: calc(var(--stagger-base) * 2); }
[data-animate][data-delay="3"] { transition-delay: calc(var(--stagger-base) * 3); }
[data-animate][data-delay="4"] { transition-delay: calc(var(--stagger-base) * 4); }
[data-animate][data-delay="5"] { transition-delay: calc(var(--stagger-base) * 5); }
[data-animate][data-delay="6"] { transition-delay: calc(var(--stagger-base) * 6); }

/* Page-type animation profiles (sættes via body class) */
/* Service: professionel, kontrolleret — normal speed */
.page-type-service { --duration-slower: 0.7s; --stagger-base: 0.08s; }

/* Brand: autoritativ, lidt langsommere for gravitas */
.page-type-brand  { --duration-slower: 0.8s; --stagger-base: 0.1s; }

/* Area: venlig, hurtig entry */
.page-type-area   { --duration-slower: 0.6s; --stagger-base: 0.06s; }

/* Blog: hurtig, minimal */
.page-type-blog   { --duration-slower: 0.5s; --stagger-base: 0.05s; }


/* =============================================
   RESPONSIVE — Landing pages
   ============================================= */
@media (max-width: 1024px) {
  .landing-grid {
    grid-template-columns: 1fr;
  }
  .landing-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .hero-split .container {
    grid-template-columns: 1fr;
  }
  .hero-area .container {
    grid-template-columns: 1fr;
  }
  .hero-cinematic h1,
  .hero-brand h1 {
    font-size: var(--text-4xl);
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--section-padding-mobile);
    --sidebar-gap: var(--space-lg);
  }
  .landing-sidebar {
    grid-template-columns: 1fr;
  }
  .hero-cinematic {
    min-height: 400px;
    padding: 60px 0 40px;
  }
  .hero-cinematic h1 {
    font-size: var(--text-3xl);
  }
  .hero-brand h1 {
    font-size: var(--text-3xl);
  }
  .hero-area h1 {
    font-size: var(--text-3xl);
  }
  .hero-facts {
    gap: var(--space-md);
  }
  .distance-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .process-steps {
    grid-template-columns: 1fr;
  }
  .issues-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-cinematic h1,
  .hero-brand h1,
  .hero-area h1 {
    font-size: var(--text-2xl);
  }
  .cta-bottom h2 {
    font-size: var(--text-2xl);
  }
  .hero-brand-logo {
    height: 40px;
  }
}


/* =============================================
   BREADCRUMBS INSIDE HERO — simple text style
   ============================================= */
.hero-cinematic .breadcrumbs,
.hero-split .breadcrumbs,
.hero-brand .breadcrumbs,
.hero-area .breadcrumbs,
.page-hero-v2 .breadcrumbs {
  background: none;
  border: none;
  border-bottom: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-md);
  display: block;
}
.hero-cinematic .breadcrumbs .container,
.hero-split .breadcrumbs .container,
.hero-brand .breadcrumbs .container,
.hero-area .breadcrumbs .container,
.page-hero-v2 .breadcrumbs .container {
  padding: 0;
  max-width: none;
}
/* Pill links in hero — semi-transparent dark pills with rounded corners */
.hero-cinematic .crumb-pill,
.hero-split .crumb-pill,
.hero-brand .crumb-pill,
.hero-area .crumb-pill,
.page-hero-v2 .crumb-pill {
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 20px;
  padding: 5px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-cinematic .crumb-pill:hover,
.hero-split .crumb-pill:hover,
.hero-brand .crumb-pill:hover,
.hero-area .crumb-pill:hover,
.page-hero-v2 .crumb-pill:hover {
  background: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.hero-cinematic .crumb-pill svg,
.hero-split .crumb-pill svg,
.hero-brand .crumb-pill svg,
.hero-area .crumb-pill svg,
.page-hero-v2 .crumb-pill svg {
  opacity: 0.8;
}
.hero-cinematic .crumb-chevron,
.hero-split .crumb-chevron,
.hero-brand .crumb-chevron,
.hero-area .crumb-chevron,
.page-hero-v2 .crumb-chevron {
  color: rgba(255,255,255,0.5);
}
/* Current page name — same pill style, accent text only */
.hero-cinematic .crumb-current,
.hero-split .crumb-current,
.hero-brand .crumb-current,
.hero-area .crumb-current,
.page-hero-v2 .crumb-current {
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 20px;
  padding: 5px 12px;
  color: var(--page-accent, #fff);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Legacy selectors (backwards compat) */
.hero-cinematic .breadcrumb-link,
.hero-split .breadcrumb-link,
.hero-brand .breadcrumb-link,
.hero-area .breadcrumb-link {
  color: rgba(255,255,255,0.6);
}
.hero-cinematic .breadcrumb-link:hover,
.hero-split .breadcrumb-link:hover,
.hero-brand .breadcrumb-link:hover,
.hero-area .breadcrumb-link:hover {
  color: #fff;
}
.hero-cinematic .breadcrumb-sep,
.hero-split .breadcrumb-sep,
.hero-brand .breadcrumb-sep,
.hero-area .breadcrumb-sep {
  color: rgba(255,255,255,0.3);
}
.hero-cinematic .breadcrumb-current,
.hero-split .breadcrumb-current,
.hero-brand .breadcrumb-current,
.hero-area .breadcrumb-current {
  color: var(--page-accent, rgba(255,255,255,0.9));
}


/* =============================================
   HERO MODIFIERS — per service-kategori
   Hver kategori har sin egen gradient + orb-farve
   ============================================= */

/* ── Hero modifiers: dark base med subtil farve-tint ── */

/* Bremse — mørk rød tint */
.hero-cinematic--danger {
  background: linear-gradient(135deg, #1a0505 0%, #0f0a0a 50%, #0a0a0a 100%);
}
.hero-cinematic--danger::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(220,38,38,0.06) 0%, transparent 60%);
}
.hero-cinematic--danger .hero-accent-bar {
  background: var(--accent-bremse);
}

/* Diesel / Varevogn — mørk varm tint */
.hero-cinematic--warm {
  background: linear-gradient(135deg, #1a1005 0%, #0f0d08 50%, #0a0a0a 100%);
}
.hero-cinematic--warm::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(146,64,14,0.12) 0%, transparent 60%);
}
.hero-cinematic--warm .hero-accent-bar {
  background: var(--accent-diesel);
}

/* Elektro — mørk lilla tint */
.hero-cinematic--electric {
  background: linear-gradient(135deg, #0d0520 0%, #0a0815 50%, #0a0a0a 100%);
}
.hero-cinematic--electric::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.12) 0%, transparent 60%);
}
.hero-cinematic--electric .hero-accent-bar {
  background: var(--accent-elektro);
}

/* Klima / Personvogn — mørk cyan tint */
.hero-cinematic--cool {
  background: linear-gradient(135deg, #051520 0%, #081218 50%, #0a0a0a 100%);
}
.hero-cinematic--cool::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(14,165,233,0.12) 0%, transparent 60%);
}
.hero-cinematic--cool .hero-accent-bar {
  background: var(--accent-klima);
}

/* Elbil — mørk grøn tint */
.hero-cinematic--green {
  background: linear-gradient(135deg, #051a0a 0%, #080f0a 50%, #0a0a0a 100%);
}
.hero-cinematic--green::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(5,150,105,0.12) 0%, transparent 60%);
}
.hero-cinematic--green .hero-accent-bar {
  background: var(--accent-elbil);
}

/* Karosseri / Lastvogn — mørk orange tint */
.hero-cinematic--craft {
  background: linear-gradient(135deg, #1a0f05 0%, #0f0c08 50%, #0a0a0a 100%);
}
.hero-cinematic--craft::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(234,88,12,0.12) 0%, transparent 60%);
}
.hero-cinematic--craft .hero-accent-bar {
  background: var(--accent-karosseri);
}


/* =============================================
   HERO TITLE ROW — icon + heading
   ============================================= */
.hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.hero-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.hero-category-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff !important;
  opacity: 1;
}


/* =============================================
   CALLOUT BOXES — kategori-specifikke meddelelser
   ============================================= */
.callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}
.callout-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.callout--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}
.callout--tip {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #059669;
  color: #064e3b;
}
.callout--ev {
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-left: 4px solid #7c3aed;
  color: #3b0764;
}


/* =============================================
   ANSWER BOX — varianter per kategori
   ============================================= */
.answer-box {
  display: block;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-left: 4px solid var(--page-accent, var(--brand-primary));
  background: var(--neutral-white, #fff);
}
.answer-box-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.answer-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  background: rgba(var(--page-accent-rgb, 0,59,92), 0.08);
  flex-shrink: 0;
  overflow: hidden;
}
.answer-box-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--page-accent, var(--brand-primary));
  flex-shrink: 0;
}
.answer-box-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--page-accent, var(--brand-primary));
  margin: 0;
}
.answer-box-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--neutral-700, #374151);
}

/* Per-category answer box accent */
.answer-box--bremse { border-left-color: var(--accent-bremse); background: #fef8f8; }
.answer-box--bremse .answer-box-title { color: var(--accent-bremse); }
.answer-box--klima { border-left-color: var(--accent-klima); background: #f0fdfa; }
.answer-box--klima .answer-box-title { color: var(--accent-klima); }
.answer-box--elbil { border-left-color: var(--accent-elbil); background: #f0fdf4; }
.answer-box--elbil .answer-box-title { color: var(--accent-elbil); }
.answer-box--elektro { border-left-color: var(--accent-elektro); background: #faf5ff; }
.answer-box--elektro .answer-box-title { color: var(--accent-elektro); }
.answer-box--diesel { border-left-color: var(--accent-diesel); background: #fffbeb; }
.answer-box--diesel .answer-box-title { color: var(--accent-diesel); }
.answer-box--karosseri { border-left-color: var(--accent-karosseri); background: #fff7ed; }
.answer-box--karosseri .answer-box-title { color: var(--accent-karosseri); }
.answer-box--motor { border-left-color: var(--accent-motor); background: #f0f9ff; }
.answer-box--motor .answer-box-title { color: var(--accent-motor); }


/* =============================================
   PROCESS STEPS — varianter
   ============================================= */

/* Base process step — override old counter-based ::before for new variants */
.process-steps--numbered .process-step,
.process-steps--timeline .process-step,
.process-steps--cards .process-step {
  counter-increment: none;
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.process-steps--numbered .process-step::before,
.process-steps--timeline .process-step::before,
.process-steps--cards .process-step::before {
  content: none;
  display: none;
}
.process-step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--page-accent, var(--brand-primary));
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.process-step-body h3 {
  margin: 0 0 4px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.process-step-body p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--neutral-600, #6b7280);
  line-height: var(--leading-relaxed);
}

/* NUMBERED — default, 2-column grid */
.process-steps--numbered {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.process-steps--numbered .process-step {
  background: var(--neutral-white, #fff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* TIMELINE — vertical line connecting steps */
.process-steps--timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 18px;
  grid-template-columns: none; /* override .process-steps grid */
}
.process-steps--timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(to bottom, var(--page-accent, var(--brand-primary)), transparent);
}
.process-steps--timeline .process-step {
  padding: var(--space-md) 0 var(--space-lg) var(--space-lg);
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
}
.process-steps--timeline .process-step-marker {
  width: 32px;
  height: 32px;
  font-size: 13px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--neutral-50, #fafafa);
}

/* CARDS — large horizontal cards */
.process-steps--cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.process-steps--cards .process-step {
  background: linear-gradient(135deg, var(--neutral-50, #fafafa), var(--neutral-white, #fff));
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  transition: transform 0.2s, box-shadow 0.2s;
}
.process-steps--cards .process-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 8px 25px rgba(0,0,0,0.08));
}
.process-steps--cards .process-step-marker {
  width: 44px;
  height: 44px;
  font-size: var(--text-lg);
}


/* =============================================
   CTA INLINE — in-content CTA block
   ============================================= */
.cta-inline {
  background: var(--neutral-offwhite);
  color: var(--neutral-900);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-3xl) var(--space-2xl);
  margin-top: var(--space-2xl);
  text-align: center;
  border: 1px solid var(--neutral-200);
}
.cta-inline h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
  color: var(--neutral-900);
}
.cta-inline p {
  color: var(--neutral-600);
  margin-bottom: var(--space-xl);
}
.cta-inline .btn-outline {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.cta-inline .btn-outline:hover {
  background: var(--brand-primary);
  color: #fff;
}


/* =============================================
   RESPONSIVE — process-steps varianter
   ============================================= */
@media (max-width: 768px) {
  .process-steps--numbered {
    grid-template-columns: 1fr;
  }
  .hero-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .hero-category-icon {
    width: 44px;
    height: 44px;
  }
  .hero-category-icon svg {
    width: 22px;
    height: 22px;
  }
  .callout {
    flex-direction: column;
    gap: var(--space-sm);
  }
}


/* ══════════════════════════════════════════════
   ██  LAYOUT A — Full-width Editorial
   ██  (motor, diesel, karosseri)
   ██  INGEN sidebar. Alt er brede sektioner med
   ██  alternerende baggrunde.
   ══════════════════════════════════════════════ */

/* Container-narrow for editorial flow */
.container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Section alt — alternating light bg */
.section-alt {
  background: var(--neutral-50);
}
.section {
  padding: var(--section-padding) 0;
}

/* Section headings — shared across all layouts */
.service-page .section h2,
.service-page .section-alt h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xl);
}

/* Answer full-width with colored background */
.section-answer-fullwidth {
  padding: var(--space-3xl) 0;
  position: relative;
}
.section-answer--motor     { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
.section-answer--diesel    { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
.section-answer--karosseri { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); }
.section-answer--bremse    { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); }
.section-answer--klima     { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); }
.section-answer--elektro   { background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%); }
.section-answer--elbil     { background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%); }

.answer-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--page-accent, var(--brand-primary));
  margin-bottom: var(--space-md);
}
.answer-fullwidth-text {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--neutral-800);
  font-weight: var(--weight-medium);
  max-width: 700px;
}
.answer-fullwidth-text p {
  margin-bottom: var(--space-md);
}
.answer-fullwidth-text p:last-child {
  margin-bottom: 0;
}

/* Horizontal process steps (Layout A) */
.section-process-horiz h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xl);
}
.process-horiz {
  display: flex;
  gap: 0;
  align-items: flex-start;
  counter-reset: horiz-step;
  position: relative;
}
.process-horiz-step {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 var(--space-md);
}
.process-horiz-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--page-accent, var(--brand-primary));
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0 auto var(--space-md);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.process-horiz-connector {
  position: absolute;
  top: 24px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 2px;
  background: linear-gradient(90deg,
    var(--page-accent, var(--brand-primary)),
    rgba(var(--page-accent-rgb, 0,59,92), 0.2)
  );
  z-index: 1;
}
.process-horiz-step:last-child .process-horiz-connector {
  display: none;
}
.process-horiz-step h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xs);
}
.process-horiz-step p {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Expert banner — full-width dark band */
.section-expert-banner {
  background: var(--brand-primary);
  color: #fff;
  padding: var(--space-3xl) 0;
}
.expert-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xl);
}
.expert-banner-photo-wrap {
  flex-shrink: 0;
}
.expert-banner-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.expert-banner-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xs);
}
.expert-banner-name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  margin-bottom: 2px;
}
.expert-banner-role {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-lg);
}
.expert-banner-info .btn {
  display: inline-flex;
}
.expert-banner-meta {
  display: flex;
  gap: var(--space-2xl);
}
.expert-banner-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.expert-banner-fact-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(255,255,255,0.5);
}
.expert-banner-fact-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* Expert banner — specialist sub-line */
.expert-banner-specialist {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-top: var(--space-sm);
}
.expert-banner-specialist strong {
  color: rgba(255,255,255,0.8);
}

/* FAQ 2-column grid (Layout A) */
.faq-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.faq-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.faq-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.faq-card p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ══════════════════════════════════════════════
   ██  LAYOUT B — Dashboard / 3-kolonne
   ██  (bremse, klima)
   ██  Sidebar-left med pris, main center, expert right.
   ══════════════════════════════════════════════ */

.section-callout {
  padding: var(--space-lg) 0 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: var(--space-xl);
  align-items: start;
}
.dashboard-left,
.dashboard-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: calc(80px + var(--space-lg));
}
.dashboard-main {
  min-width: 0;
}

/* Dashboard cards */
.dash-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.dash-card-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--neutral-400);
  margin-bottom: var(--space-sm);
}

/* Price card */
.dash-card--price {
  border-left: 3px solid var(--page-accent, var(--brand-primary));
}
.dash-price-big {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--page-accent, var(--brand-primary));
  margin-bottom: 2px;
}
.dash-price-to {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: var(--space-sm);
}
.dash-price-note {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  line-height: var(--leading-normal);
}

/* Trust card — Bosch logo */
.dash-card--trust {
  background: var(--neutral-50);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.trust-logo {
  max-width: 130px;
  height: auto;
}
.trust-label {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin: 0;
  line-height: var(--leading-normal);
}

/* Time card */
.dash-card--time {
  background: var(--neutral-50);
}
.dash-time-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
}

/* Expert/contact card — light theme */
.dash-card--expert {
  background: var(--neutral-50);
  color: var(--neutral-900);
  text-align: center;
}
.dash-expert-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.dash-expert-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neutral-200);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dash-card--expert .dash-card-eyebrow {
  color: var(--neutral-400);
}
.dash-expert-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.dash-expert-role {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: var(--space-md);
}
.dash-card--expert .btn {
  width: 100%;
  justify-content: center;
  font-size: var(--text-sm);
  padding: 10px 16px;
}

/* Specialist sub-section inside contact card */
.dash-specialist-sub {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--neutral-200);
}
.dash-specialist-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neutral-200);
  flex-shrink: 0;
}
.dash-specialist-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.dash-specialist-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--neutral-400);
  line-height: 1;
  margin-bottom: 2px;
}
.dash-specialist-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  line-height: 1.2;
}
.dash-specialist-role {
  font-size: 11px;
  color: var(--neutral-400);
  line-height: 1.2;
}

/* =============================================
   VEHICLE TYPES — personvogn / varevogn / lastvogn
   ============================================= */
.section-vehicles {
  background: var(--neutral-50);
}
.section-heading-center {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xs);
}
.section-subheading-center {
  text-align: center;
  font-size: var(--text-base);
  color: var(--neutral-500);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.vehicle-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vehicle-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.vehicle-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  color: var(--neutral-600);
  margin-bottom: var(--space-md);
}
.vehicle-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.vehicle-card-price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  margin-bottom: 2px;
}
.vehicle-card-time {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  margin-bottom: var(--space-md);
}
.vehicle-card-note {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md);
}
.vehicle-card-features {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  text-align: left;
}
.vehicle-card-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vehicle-card-features li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--neutral-100);
}
.vehicle-card-features li:last-child {
  border-bottom: none;
}
.vehicle-card-features li::before {
  content: "✓ ";
  color: var(--brand-primary);
  font-weight: var(--weight-bold);
}

@media (max-width: 768px) {
  .vehicle-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Service content block (center column) */
.service-content-block {
  margin-top: var(--space-xl);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--neutral-700);
}
.service-content-block h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin: var(--space-xl) 0 var(--space-md);
}
.service-content-block h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: var(--space-lg) 0 var(--space-sm);
}
.service-content-block p {
  margin-bottom: var(--space-md);
}
.service-content-block ul {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}
.service-content-block li {
  margin-bottom: var(--space-xs);
}


/* ══════════════════════════════════════════════
   ██  LAYOUT C — Modern Split / Magazine
   ██  (elektro, elbil)
   ██  Ingen sidebar. Alt flyder som magasin-stil.
   ══════════════════════════════════════════════ */

/* Hero-split color modifiers (Layout C) */
.hero-split--electric {
  background: linear-gradient(135deg, #0f051a 0%, #1a0a2d 40%, #151520 100%);
}
.hero-split--electric::before {
  background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 70%);
}
.hero-split--green {
  background: linear-gradient(135deg, #051a0f 0%, #0a2d18 40%, #101a15 100%);
}
.hero-split--green::before {
  background: radial-gradient(circle, rgba(5,150,105,0.1) 0%, transparent 70%);
}

/* Hero split specific (content + stats side-by-side) */
.hero-split-content {
  max-width: 560px;
}
.hero-split-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.stat-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.stat-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.stat-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xs);
  display: block;
}
.stat-card-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: #fff;
  display: block;
}

/* Badge strip (EV / Elektro notice) */
.section-badge {
  padding: var(--space-lg) 0 0;
}
.badge-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.badge-strip--ev {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  color: #166534;
}
.badge-strip--elektro {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  color: #5b21b6;
}
.badge-strip-icon {
  font-size: 24px;
  flex-shrink: 0;
}

/* Quote-style answer (Layout C) */
.section-quote {
  padding: var(--space-3xl) 0;
}
.answer-quote {
  position: relative;
  padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--neutral-50);
  border: none;
  margin: 0;
}
.answer-quote--elektro {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
  border-left: 4px solid var(--accent-elektro, #7c3aed);
}
.answer-quote--elbil {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);
  border-left: 4px solid var(--accent-elbil, #059669);
}
.answer-quote-mark {
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-size: 72px;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  color: rgba(var(--page-accent-rgb, 0,59,92), 0.12);
  pointer-events: none;
}
.answer-quote-text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--neutral-800);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-md);
}
.answer-quote-text p {
  margin-bottom: var(--space-md);
}
.answer-quote-text p:last-child {
  margin-bottom: 0;
}
.answer-quote-cite {
  display: block;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-semibold);
  color: var(--page-accent, var(--brand-primary));
  margin-top: var(--space-md);
}

/* Centered section heading */
.section-heading-center {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--neutral-900);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* Magazine process cards (Layout C) */
.process-magazine {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}
.process-mag-card {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-mag-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.process-mag-card--alt {
  flex-direction: row-reverse;
  text-align: right;
  background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-white) 100%);
}
.process-mag-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: rgba(var(--page-accent-rgb, 0,59,92), 0.12);
  line-height: 1;
  flex-shrink: 0;
  min-width: 60px;
}
.process-mag-card--alt .process-mag-number {
  text-align: right;
}
.process-mag-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-xs);
}
.process-mag-content p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Info strip — horizontal key facts */
.info-strip {
  display: flex;
  gap: 0;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--neutral-white);
}
.info-strip-item {
  flex: 1;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-right: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-strip-item:last-child {
  border-right: none;
}
.info-strip-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--neutral-400);
  margin-bottom: var(--space-xs);
}
.info-strip-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
}
.info-strip-sub {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin-top: 2px;
}
.info-strip-item--cta {
  background: var(--neutral-50);
  border-right: none;
}
.info-strip-item--cta .btn {
  margin: 0 auto;
}
/* Specialist photo in info strip (Layout C) */
.info-strip-item--specialist {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-strip-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neutral-200);
  margin-bottom: var(--space-sm);
}
.info-strip-specialist {
  font-size: 11px;
  color: var(--neutral-400);
  margin-top: var(--space-xs);
}

/* Minimal FAQ (Layout C) */
.faq-minimal {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.faq-mini-item {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--neutral-200);
}
.faq-mini-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.faq-mini-item h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-sm);
}
.faq-mini-item p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ══════════════════════════════════════════════
   ██  BUTTON ROW — shared utility
   ══════════════════════════════════════════════ */
.btn-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}


/* ══════════════════════════════════════════════
   ██  BUTTON SIZE VARIANTS
   ══════════════════════════════════════════════ */
.btn-lg {
  padding: 16px 32px;
  font-size: var(--text-lg);
}
.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-sm);
}


/* ══════════════════════════════════════════════
   ██  RESPONSIVE — Layout A/B/C
   ══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Layout B: collapse to single column */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-left,
  .dashboard-right {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .dashboard-left .dash-card,
  .dashboard-right .dash-card {
    flex: 1;
    min-width: 180px;
  }

  /* Layout A: process becomes 2-col grid */
  .process-horiz {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .process-horiz-connector {
    display: none;
  }
  .process-horiz-step {
    text-align: left;
    padding: var(--space-lg);
    background: var(--neutral-white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
  }
  .process-horiz-number {
    margin: 0 0 var(--space-md) 0;
  }

  /* Layout C: hero split stacks */
  .hero-split .container {
    grid-template-columns: 1fr;
  }
  .hero-split-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .stat-card {
    flex: 1;
    min-width: 120px;
  }

  /* Layout C: process cards lose alternation */
  .process-mag-card--alt {
    flex-direction: row;
    text-align: left;
  }
  .process-mag-card--alt .process-mag-number {
    text-align: left;
  }
}

@media (max-width: 768px) {
  /* Layout A: horizontal process becomes single column */
  .process-horiz {
    grid-template-columns: 1fr;
  }

  /* Layout A: FAQ becomes single column */
  .faq-grid-2col {
    grid-template-columns: 1fr;
  }

  /* Layout A: Expert banner stacks */
  .expert-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xl);
  }
  .expert-banner-photo {
    width: 80px;
    height: 80px;
  }
  .expert-banner-info {
    text-align: center;
  }
  .expert-banner-meta {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
  }

  /* Layout B: dashboard cards full-width */
  .dashboard-left,
  .dashboard-right {
    flex-direction: column;
  }
  .dashboard-left .dash-card,
  .dashboard-right .dash-card {
    min-width: auto;
  }

  /* Layout C: info strip stacks */
  .info-strip {
    flex-direction: column;
    border-radius: var(--radius-lg);
  }
  .info-strip-item {
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-lg);
  }
  .info-strip-item:last-child {
    border-bottom: none;
  }

  /* Layout C: magazine cards simpler */
  .process-mag-card {
    padding: var(--space-lg);
    gap: var(--space-md);
  }
  .process-mag-number {
    font-size: var(--text-2xl);
    min-width: 40px;
  }

  /* Layout C: quote */
  .answer-quote {
    padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--space-xl);
  }
  .answer-quote-mark {
    font-size: 48px;
    left: var(--space-sm);
    top: var(--space-sm);
  }

  /* Container narrow on small screens */
  .container-narrow {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}


/* =============================================
   WORKSHOP PAGE — Køretøjstype sider
   (personvogn, varevogn, lastvogn)
   ============================================= */

/* Intro grid: content + sidebar */
.workshop-intro-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2xl);
  align-items: start;
}

.workshop-intro-content .prose {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--neutral-700);
}

.workshop-intro-content .prose h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.workshop-intro-content .prose h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--neutral-800);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.workshop-intro-content .prose ul {
  padding-left: var(--space-lg);
  margin: var(--space-md) 0;
}

.workshop-intro-content .prose li {
  margin-bottom: var(--space-xs);
}

/* Contact card */
.workshop-contact-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.workshop-contact-header {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-400);
  margin-bottom: var(--space-sm);
}

.workshop-contact-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
}

.workshop-contact-role {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: var(--space-xs);
}

.workshop-contact-email {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--brand-primary);
  text-decoration: none;
}

.workshop-contact-email:hover {
  text-decoration: underline;
}

/* Trust badge */
.workshop-trust-badge {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  margin-top: var(--space-md);
}

.workshop-trust-badge .trust-logo {
  max-width: 120px;
  margin: 0 auto var(--space-xs);
  display: block;
}

.workshop-trust-badge .trust-label {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: block;
}

/* Services grid */
.workshop-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.workshop-service-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.workshop-service-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.workshop-service-icon {
  width: 44px;
  height: 44px;
  background: rgba(var(--brand-primary-rgb), 0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--brand-primary);
}
.workshop-service-icon svg {
  stroke: var(--brand-primary);
}

.workshop-service-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-xs);
}

.workshop-service-desc {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.workshop-service-price {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

.workshop-service-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
}

.workshop-service-link:hover {
  text-decoration: underline;
}

/* USPs grid */
.workshop-usps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.workshop-usp-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.workshop-usp-check {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(34,197,94,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
}

.workshop-usp-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 2px;
}

.workshop-usp-desc {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.5;
}

/* Brands grid */
.workshop-brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}

.workshop-brand-item {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full, 999px);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-700);
}

.workshop-brand-item a {
  color: var(--neutral-700);
  text-decoration: none;
}

.workshop-brand-item:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.workshop-brand-item:hover a {
  color: var(--brand-primary);
}

/* Workshop FAQ — reuse existing FAQ styles */
.workshop-faq .faq-list {
  max-width: 700px;
  margin: var(--space-xl) auto 0;
}

/* Workshop CTA — reuse existing CTA styles */
.workshop-page .cta-section .cta-block {
  text-align: center;
}

/* ── Workshop page responsive ── */
@media (max-width: 768px) {
  .workshop-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .workshop-services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .workshop-usps-grid {
    grid-template-columns: 1fr;
  }
}