/* components.css — every UI component used on the site.
   Sections grouped by role and ordered roughly top-to-bottom of a page. */

/* ─── Section label (▪ Tekst) ─────────────────────────────────────────── */
.section-label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  margin: 0;
}
.section-label__bullet {
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--color-marker);
  display: inline-block;
  flex-shrink: 0;
}
.section-label--invert {
  color: var(--color-text-invert);
}
.section-label--invert .section-label__bullet {
  background: var(--color-text-invert);
}

/* ─── Site nav ────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-height);
  padding-block: 0;
  padding-inline: max(var(--gutter), 28px);
}
.site-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-nav__logo img {
  width: 71px;
  height: auto;
  image-rendering: auto;
}
.site-nav__menu ul {
  display: flex;
  gap: clamp(var(--space-4), 0.5rem + 2vw, var(--space-7));
}
.site-nav__menu a {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2);
  display: inline-block;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Links no longer underline — hover/focus feedback is a subtle dim, the
   current page is marked by weight (Instrument Sans variable, 400-700). */
.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  opacity: 0.72;
}
.site-nav__menu a[aria-current="page"] {
  font-weight: var(--fw-medium);
}
.site-nav__cta {
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--rf-black);
  color: var(--color-text-invert);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-out);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: var(--rf-black);
  opacity: 0.72;
}
.site-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
}
.site-nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

/* Mobile-first: hamburger visible, menu hidden until toggled */
@media (max-width: 1023px) {
  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-rule);
    padding: var(--space-6) var(--gutter);
  }
  .site-nav__menu ul {
    flex-direction: column;
    gap: var(--space-4);
  }
  .site-nav[data-open="true"] .site-nav__menu {
    display: block;
  }
  .site-nav[data-open="true"] .site-nav__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-nav[data-open="true"] .site-nav__toggle span:nth-child(2) {
    opacity: 0;
  }
  .site-nav[data-open="true"] .site-nav__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .site-nav__cta {
    /* On mobile, CTA pushed to right of hamburger */
    margin-right: var(--space-2);
  background: var(--rf-black);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-base) var(--ease-out);
}
}

@media (min-width: 1024px) {
  .site-nav__toggle { display: none; }
  /* Desktop: slightly smaller brand + nav items (mobile keeps original sizes) */
  .site-nav__logo img { width: 71px;
  image-rendering: auto;
}
  .site-nav__menu a { font-size: 1.125rem; }
}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
  background: var(--color-bg);
  padding-block: clamp(5rem, 3rem + 8vw, 9rem) clamp(2rem, 1rem + 2vw, 4rem);
  text-align: center;
}
/* The original Figma notes below reference Book. Serif rules now use
   Regular (400) consistently after the site-wide typography refinement. */
.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.625rem, 5vw + 0.5rem, 4.6875rem);  /* 26 → 75 */
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  max-width: 22ch;
  margin-inline: auto;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
@media (max-width: 768px) {
  .hero__title {
    font-size: clamp(1.625rem, 6vw + 0.5rem, 2.5rem);  /* 26 → 40 across small/medium screens */
    line-height: 1.12;
    max-width: 100%;
  }
}
.hero__media {
  margin: clamp(2rem, 1rem + 4vw, 5rem) auto 0;
  padding: 0 var(--gutter);
  max-width: 1000px;
}
.hero__media-placeholder {
  width: 100%;
  aspect-ratio: 966 / 503;
  background: var(--rf-stone);
  border-radius: var(--radius-sm);
}

/* ─── Section helpers ─────────────────────────────────────────────────── */
.section__lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  max-width: 56ch;
  color: var(--color-text);
}
.section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section__heading p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  max-width: 38ch;
  color: var(--color-text);
}
.section__lead {
  margin-bottom: var(--space-6);
}

/* ─── Program list / rows ─────────────────────────────────────────────── */
.section--programmer { padding-block: var(--section-pad-y) var(--space-9); }
.program-list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-rule);
}
.program-list > li { list-style: none; }
.program-row {
  display: grid;
  grid-template-columns: 4ch minmax(0, 0.8fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--gutter);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.program-row:hover,
.program-row:focus-visible {
  background: transparent;
  opacity: 0.72;
}
.program-row__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
}
.program-row__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.program-row__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text-soft);
  line-height: 1.4;
}
.program-row__arrow {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.program-row:hover .program-row__arrow,
.program-row:focus-visible .program-row__arrow {
  transform: none;
}

@media (max-width: 767px) {
  .program-row {
    grid-template-columns: 4ch 1fr auto;
    grid-template-areas:
      "idx title arrow"
      "idx desc desc";
    row-gap: var(--space-2);
  transition: opacity var(--dur-base) var(--ease-out);
}
  .program-row__index { grid-area: idx; align-self: start; padding-top: 0.4em; }
  .program-row__title { grid-area: title; }
  .program-row__desc { grid-area: desc; }
  .program-row__arrow { grid-area: arrow; }
}

/* ─── Link with arrow ─────────────────────────────────────────────────── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  text-decoration: none;
  margin-top: var(--space-6);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.link-arrow:hover,
.link-arrow:focus-visible {
  opacity: 0.72;
}
.link-arrow__count {
  color: var(--color-text-soft);
}

/* ─── Testimonial ─────────────────────────────────────────────────────── */
.section--testimonials { padding-block: var(--space-12); }
.testimonial {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .testimonial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-9);
  }
  .testimonial__avatars {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: end;
  }
}
.testimonial__avatars {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.testimonial__avatar {
  width: 11.7rem;
  height: 13.75rem;
  object-fit: cover;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  display: block;
}
@media (max-width: 767px) {
  .testimonial__avatar { width: 6rem; height: 7rem; }
}
.testimonial__quote {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  max-width: 42ch;
}
.testimonial__role {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  margin-top: var(--space-3);
}
.testimonial__role strong { display: block; font-weight: var(--fw-medium); }
.testimonial__role span { color: var(--color-text-soft); }

/* ─── Breaker ─────────────────────────────────────────────────────────── */
.breaker {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  color: var(--color-text-invert);
  padding-block: clamp(6rem, 4rem + 8vw, 12rem);
  overflow: hidden;
}
.breaker__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-deep);
}
.breaker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 45%);
  pointer-events: none;
}
.breaker__content {
  position: relative;
}
.breaker__title {
  color: var(--color-text-invert);
  max-width: 18ch;
  margin-top: var(--space-5);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
}

/* ─── Cases preview ───────────────────────────────────────────────────── */
.cases-preview__grid {
  display: grid;
  gap: var(--space-9);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cases-preview__grid {
    /* Figma: left "Om os" col ≈ 870px, right images col ≈ 690px → ~1.25:1 */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(3rem, 2rem + 4vw, 8rem);
    align-items: start;
  }
  /* The sticky intro only makes sense beside the scrolling image column in the
     two-column desktop layout. Below 1024px the grid is single-column, so the
     intro must stay in normal flow — otherwise it pins to the top and the case
     images scroll up underneath it, overlapping the text (mobile/tablet bug). */
  .cases-preview__intro {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-5));
  }
}
.cases-preview__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-self: start;
}
.cases-preview__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  max-width: 40ch;
}
.cases-preview__stack {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cases-preview__stack > li { list-style: none; }
/* Case tiles match Figma's right-column dimensions:
   - Tile 1 (Frame 70):  690 × 753  → slight portrait/square
   - Tile 2 (image 162): 689 × 919  → tall portrait
   - Tile 3 (image 161): 689 × 919  → tall portrait
*/
.case-tile {
  width: 100%;
  aspect-ratio: 690 / 753;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cases-preview__stack > li:nth-child(1) .case-tile { aspect-ratio: 690 / 753; }
.cases-preview__stack > li:nth-child(2) .case-tile { aspect-ratio: 689 / 919; }
.cases-preview__stack > li:nth-child(3) .case-tile { aspect-ratio: 689 / 919; }
.case-tile--portrait { aspect-ratio: 689 / 919; }
.cases-preview__stack a { display: block; overflow: hidden; border-radius: var(--radius-sm); }
.cases-preview__stack a:hover .case-tile,
.cases-preview__stack a:focus-visible .case-tile { opacity: 0.8; }

/* ─── Insights grid ───────────────────────────────────────────────────── */
.insight-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.insight-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: opacity var(--dur-base) var(--ease-out);
}
.insight-tile__media {
  width: 100%;
  aspect-ratio: 611 / 878;
  object-fit: cover;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  display: block;
  transition: opacity var(--dur-base) var(--ease-out);
}
.insight-tile__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.insight-tile hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-3) 0;
}
.insight-tile__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.insight-tile__link {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  display: inline-flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  text-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: static;
  inset: auto;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: auto;
}

/* ─── Contact module ──────────────────────────────────────────────────────
   Figma reference (1920 frame): 1919.5 × 844.53. Title at y≈379, sub at
   y≈509, label top-left at 25/19. Title 80/63 GT Sectra, sub 20/20.
   Top/bottom paddings scale anchored to the 1920 ref (vw clamps). */
.contact-module {
  background: var(--color-bg-warm);
  /* Figma: 379 px above title, 295 px below sub on 1920 ref */
  padding-top:    clamp(4rem, 19.74vw, 23.6875rem);   /* 379 px @ 1920 */
  padding-bottom: clamp(4rem, 15.36vw, 18.4375rem);   /* 295 px @ 1920 */
  text-align: center;
  position: relative;
}
.contact-module__label {
  position: absolute;
  top: clamp(1rem, 2.31vw, 19.5px);     /* 19.5 px @ 1920 */
  left: clamp(1rem, 2.52vw, 48.4px);    /* 48.4 px @ 1920 (matches bullet+gap) */
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);   /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
}
.contact-module__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.5rem, 4.1667vw, 5rem);         /* 80 px @ 1920 */
  line-height: 1;   /* 63 px @ 1920 */
  letter-spacing: -0.01em;                          /* Figma: -0.8 on 80 px */
  max-width: 18ch;
  margin-inline: auto;
}
.contact-module__arrow {
  display: inline-block;
  margin-right: 0.05em;
  font-family: var(--font-sans);
}
.contact-module__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);    /* 20 px @ 1920 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  /* Figma: 67 px gap from title bottom to sub top (matches Figma's
     empty 2nd line in title block + 4 px) */
  margin-top: clamp(1.5rem, 3.49vw, 4.1875rem);
  max-width: clamp(18rem, 22.76vw, 27.3125rem);     /* 437 px @ 1920 */
  margin-inline: auto;
}
.contact-module__cta {
  display: inline-block;
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  background: var(--rf-black);
  color: var(--color-text-invert);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
  min-height: 44px;
}
.contact-module__cta:hover,
.contact-module__cta:focus-visible {
  background: var(--rf-black);
  opacity: 0.72;
}

/* ─── Footer (closing slide) ──────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-stone);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr) 1.6fr;
  }
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__col a {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.site-footer__newsletter {
  display: grid;
  gap: var(--space-3);
}
.site-footer__newsletter-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  max-width: 18ch;
}
.site-footer__newsletter-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}
.site-footer__newsletter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-3);
}
@media (max-width: 479px) {
  .site-footer__newsletter-row { grid-template-columns: 1fr; }
}
.form-field {
  display: block;
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-2);
}
.form-field__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
  cursor: text;
}
.form-field input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  background: transparent;
  outline: revert;
  color: var(--color-text);
  padding-top: var(--space-1);
  min-height: 44px;
}
.form-field input::placeholder { color: var(--color-text-soft); }
.form-field:focus-within { border-color: var(--rf-grey-02);
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.site-footer__newsletter-submit {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  align-self: end;
  text-align: right;
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-2);
  width: 100%;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
  min-height: 44px;
}
.site-footer__newsletter-submit:hover,
.site-footer__newsletter-submit:focus-visible {
  opacity: 0.7;
}
.site-footer__wordmark {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -20%;
  opacity: 0.21;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.site-footer__wordmark img {
  width: 104%;
  height: auto;
  display: block;
  aspect-ratio: 1880 / 709.502;
}
.site-footer__legal {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  margin-top: clamp(8rem, 4rem + 15vw, 18rem);
  text-align: left;
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────
   Components for pages beyond Home
   ──────────────────────────────────────────────────────────────────── */

/* ─── Page hero (shared by all sub-pages) ─────────────────────── */
.page-hero {
  padding-block: clamp(5rem, 3rem + 8vw, 9rem) clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--color-bg);
}
.page-hero__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-9);
    align-items: start;
  }
}
.page-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 1rem + 4vw, 3.75rem);   /* 32 → 60 */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  max-width: 22ch;
}
.page-hero__lede {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.5rem);
  line-height: 1.4;
  max-width: 56ch;
  margin-top: var(--space-5);
  color: var(--color-text);
}
.page-hero__media {
  margin-top: clamp(2rem, 1rem + 4vw, 5rem);
}
.page-hero__media img {
  width: 100%;
  max-width: 1405px;
  margin-inline: auto;
  aspect-ratio: 1405 / 732;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* ─── Indsigter grid (2 rows × 3 cols of square tiles) ───────── */
.insight-grid--six {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .insight-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.insight-grid--six .insight-tile__media {
  aspect-ratio: 1 / 1;   /* the 611×611 squares */
}

/* ─── Programmer page — 6 dark program cards ──────────────────── */
.programs-stack {
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.programs-stack__intro {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  padding-inline: var(--gutter);
  margin-bottom: var(--space-9);
}
@media (min-width: 768px) {
  .programs-stack__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-9);
    align-items: start;
  }
}
.programs-stack__intro .section-label,
.programs-stack__intro .section-label__bullet {
  color: var(--color-text-invert);
}
.programs-stack__intro .section-label__bullet { background: var(--color-text-invert); }
.programs-stack__intro p {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.5rem);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--color-text-invert);
}
.programs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.program-card {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-text-invert);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.program-card:hover,
.program-card:focus-visible {
  background: transparent;
  opacity: 0.8;
}
.programs-list > li:last-child .program-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.program-card__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.5);
}
.program-card__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 1.5rem + 2vw, 4.375rem);   /* 32 → 70 */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.program-card__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.6);
  max-width: 38ch;
}
.program-card__arrow {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.program-card:hover .program-card__arrow,
.program-card:focus-visible .program-card__arrow {
  transform: none;
}
@media (max-width: 767px) {
  .program-card {
    grid-template-columns: 3ch 1fr auto;
    grid-template-areas:
      "idx title arrow"
      "idx desc desc";
    row-gap: var(--space-2);
  transition: opacity var(--dur-base) var(--ease-out);
}
  .program-card__index { grid-area: idx; align-self: start; padding-top: 0.2em; }
  .program-card__title { grid-area: title; }
  .program-card__desc { grid-area: desc; }
  .program-card__arrow { grid-area: arrow; }
}

/* ─── KPI cards (Case-Bestseller) ─────────────────────────────── */
.kpi-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kpi-card {
  background: var(--rf-paper);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}
.kpi-card__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
  letter-spacing: 0.03em;
}
.kpi-card__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(3.5rem, 2rem + 5vw, 7.5rem);    /* 56 → 120 */
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin-block: var(--space-5);
}
.kpi-card__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text-soft);
  line-height: 1.4;
}

/* ─── Numbered tiles (Programmer-Afklar 4-step grid) ──────────── */
.numbered-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .numbered-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .numbered-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.numbered-tile {
  background: var(--rf-paper);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.numbered-tile__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.05em;
  color: var(--color-text);
}
.numbered-tile__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
  line-height: 1.15;
  margin-top: var(--space-4);
}
.numbered-tile__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  margin-top: auto;
  line-height: 1.4;
}

/* ─── Feature tiles (Programmer-Afklar — green Relevans/Resultat) */
.feature-tiles {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .feature-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature-tile {
  background: var(--rf-green-02);
  color: var(--rf-green-05);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  aspect-ratio: 611 / 587;
  display: flex;
  flex-direction: column;
}
.feature-tile__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--rf-green-05);
}
.feature-tile__label::before {
  content: "";
  display: inline-block;
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--rf-green-04);
}

/* ─── Kultur section (Om os, dark green full-bleed) ───────────── */
.kultur {
  background: var(--rf-green-04);
  color: var(--color-text-invert);
  padding-block: clamp(4rem, 2rem + 6vw, 8rem);
  overflow: hidden;
}
.kultur__label,
.kultur__label .section-label__bullet {
  color: var(--color-text-invert);
}
.kultur__label .section-label__bullet { background: var(--color-text-invert); }
.kultur__heading {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-invert);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto var(--space-9);
}
.kultur__strip {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-block: var(--space-9);
}
.kultur__strip img {
  width: clamp(140px, 18vw, 340px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.kultur__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .kultur__body { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-9); }
}
.kultur__body h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  color: var(--color-text-invert);
}
.kultur__body p {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-text-invert);
  max-width: 38ch;
}

/* ─── Team grid (Kontakt) ─────────────────────────────────────── */
.team-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.team-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.team-tile__photo {
  width: 100%;
  aspect-ratio: 1 / 1.18;
  object-fit: cover;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  display: block;
}
.team-tile__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}
.team-tile__role,
.team-tile__contact {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
}

/* ─── Form step rows (Kontakt — 4-step inline form) ───────────── */
.form-steps {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.form-step {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items: start;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}
.form-step__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.form-step__label {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.form-step input:not([type="checkbox"]):not([type="file"]),
.form-step textarea {
  width: 100%;
  max-width: 600px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  background: transparent;
  outline: revert;
  color: var(--color-text);
  padding-block: var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  display: block;
  position: static;
  inset: auto;
  height: auto;
  min-height: 44px;
  padding: var(--space-3) 0;
  line-height: 1.4;
}
.form-step input:not([type="checkbox"]):not([type="file"]):focus-visible,
.form-step textarea:focus-visible { border-bottom-color: var(--rf-grey-02); }

/* Program-picker chip group inside the first step */
.program-pick {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .program-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.program-pick__option {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
  position: relative;
}
.program-pick__option input { position: absolute; opacity: 0; pointer-events: none; }
.program-pick__option-num {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.program-pick__option-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
  display: block;
  margin-block: var(--space-3);
}
.program-pick__option-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
}
.program-pick__option:has(input:checked),
.program-pick__option--selected {
  background: var(--rf-green-02);
  border-color: var(--rf-green-02);
}

/* ─── Logo strip ("Brugt af bl.a." in Programmer-Afklar) ──────── */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.logo-strip img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

/* ─── Two-column content + sidebar (Programmer-Afklar, Case) ──── */
.content-two-col {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .content-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
}
.content-two-col__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.content-two-col__main {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.875rem);
  line-height: 1.4;
  color: var(--color-text);
}
.content-two-col__main p { margin-bottom: 1em; max-width: 38ch; }
.content-two-col__main p.muted { color: var(--color-text-soft); }
.content-two-col__main h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  margin-bottom: 0.5em;
}

/* ─── Compare 3-column (relevans/får/start, used on multiple pages) */
.compare-3 {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-7);
  margin-block: var(--space-9);
}
@media (min-width: 768px) {
  .compare-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-9); }
}
.compare-3__col h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}
.compare-3__col ul {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: 1.4;
}
.compare-3__col li { list-style: disc; margin-left: 1.2em; }
.compare-3__col p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ─── Cases stack (Resultater main grid) ──────────────────────── */
/* ── Case stack on Resultater — Figma 3-column layout ────────────
   Col 1: ▪ Case label (narrow, far left)
   Col 2: Nike title + body + Læs mere
   Col 3: 3 stacked square brand images (not full-width — 1/3 viewport)
*/
.case-stack {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}
@media (min-width: 1024px) {
  .case-stack {
    /* Figma: label ~200px / text ~633px / images ~691px on 1920 frame
       → 200:633:691 ≈ 1:3:3.5 */
    grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr) minmax(0, 3fr);
    column-gap: clamp(1.5rem, 1rem + 2vw, 4rem);
    align-items: start;
  }
}

.case-stack__label {
  /* Top-aligned to first image */
  margin: 0;
}
.case-stack__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 38ch;
}
.case-stack__title {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  margin: 0;
}
.case-stack__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-3);
}

.case-stack__items {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Don't stretch past Figma's ~691 px image width on big screens */
  width: 100%;
  max-width: 580px;
  justify-self: end;
}
.case-stack__item {
  display: block;
}
.case-stack__item a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.case-stack__item img {
  width: 100%;
  aspect-ratio: 1 / 1;       /* Figma: each image is a square 691 × 691 */
  object-fit: cover;
  display: block;
  background: var(--color-bg-stone);
}

/* ─── Stat headline (Resultater chart caption block) ──────────── */
.stat-headline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.stat-headline__value {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.stat-headline__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
}

/* ────────────────────────────────────────────────────────────────────
   Hero video (Home) — scroll-driven expand-then-shrink frame.
   ──────────────────────────────────────────────────────────────────── */
.hero-video {
  position: relative;
  /* Scroll runway: the sticky frame plays its grow→peak→shrink curve
     while the user scrolls through this section. */
  height: 220vh;
  background: var(--color-bg);
}
.hero-video__viewport {
  position: sticky;
  top: var(--nav-height);
  height: calc(100svh - var(--nav-height));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-video__frame {
  width: min(966px, calc(100% - var(--gutter) * 2));
  aspect-ratio: 966 / 503;
  background: var(--rf-stone);
  border-radius: var(--radius-sm);
  position: relative;
  transform: scale(var(--hero-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.hero-video__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--rf-stone);
  border-radius: inherit;
}
.hero-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background-color: var(--rf-stone);
  display: block;
}
.hero-video__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--rf-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.hero-video__play {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  border-radius: 50%;
  font-size: 0.7em;
  padding-left: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { height: auto; }
  .hero-video__viewport {
    position: static;
    height: auto;
    padding-block: var(--space-9);
  }
  .hero-video__frame { transform: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   Testimonial carousel — horizontally scrollable, snap, touch-friendly.
   Replaces the old .testimonial / .testimonial__avatars layout.
   ──────────────────────────────────────────────────────────────────── */
.testimonials {
  padding-block: clamp(3rem, 2rem + 4vw, 7rem);
}
.testimonials__head {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .testimonials__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-9);
    align-items: end;
  }
}
.testimonial-carousel {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) var(--space-5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--rf-grey-01) transparent;
  scrollbar-width: thin;
  /* Bleed past .container so cards align to viewport edge */
  margin-inline: calc(var(--gutter) * -1);
}
.testimonial-carousel::-webkit-scrollbar { height: 6px; }
.testimonial-carousel::-webkit-scrollbar-track { background: transparent; }
.testimonial-carousel::-webkit-scrollbar-thumb {
  background: var(--rf-grey-01);
  border-radius: var(--radius-pill);
}
.testimonial-card {
  flex: 0 0 min(420px, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-bg);
}
.testimonial-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  display: block;
}
.testimonial-card__quote {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  margin-top: var(--space-3);
}
.testimonial-card__quote::before { content: "“"; }
.testimonial-card__quote::after  { content: "”"; }
.testimonial-card__byline {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
}
.testimonial-card__byline strong { font-weight: var(--fw-medium); color: var(--color-text); }
.testimonial-card__byline span   { color: var(--color-text-soft); }

/* Affordance: subtle hint that there's more to scroll */
.testimonials__hint {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
  padding-inline: var(--gutter);
}

/* Global overflow safety net — should NEVER show horizontal scroll on body */
html, body { overflow-x: clip; }
img, picture, video, iframe { max-width: 100%; }

/* ────────────────────────────────────────────────────────────────────
   Audit fixes — mobile overflow + heading clamping safety net
   ──────────────────────────────────────────────────────────────────── */

/* Safety net: every long-word heading should be allowed to wrap rather than
   overflow the viewport. Applies on top of per-component sizes. */
h1, h2, h3,
.page-hero__title,
.breaker__title,
.contact-module__title,
.kultur__heading,
.programs-stack__intro p,
.kpi-card__caption,
.section__lede {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Aggressive mobile clamps for the headlines flagged in audit.
   Triggered at 768px because we know real mobile + headless Chrome quirks
   both behave below this threshold. */
@media (max-width: 768px) {
  .page-hero__title {
    font-size: clamp(1.75rem, 5vw + 0.75rem, 2.5rem);
    line-height: 1.12;
    max-width: 100%;
  }
  .breaker__title,
  .contact-module__title {
    font-size: clamp(1.75rem, 5vw + 0.75rem, 2.5rem);
    line-height: 1.15;
    max-width: 100%;
  }
  .kultur__heading {
    font-size: clamp(2rem, 6vw + 0.5rem, 3rem);
    line-height: 1.1;
    max-width: 100%;
  }
  .stat-headline {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .stat-headline__value {
    font-size: clamp(2rem, 8vw + 0.5rem, 3rem);
  }
  .programs-stack__intro p {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  }
}

/* Prevent the dark programs panel from overflowing right edge */
.programs-stack { overflow-x: hidden; }
.programs-list { width: 100%; }
.program-card {
  width: 100%;
  box-sizing: border-box;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Container safety: never push past viewport */
.container, .containers, [class*="container"] {
  max-width: min(var(--container-max), 100vw);
  box-sizing: border-box;
}

/* Form step at narrow widths: keep index + label on same row but allow
   the content stack to breathe */
@media (max-width: 540px) {
  .form-step {
    grid-template-columns: 2ch 1fr;
    gap: var(--space-3);
  }
  .form-step__label { font-size: 1rem;
  line-height: 1.4;
}
  .program-pick { grid-template-columns: 1fr 1fr; }
  .program-pick__option { padding: var(--space-3); }
}

/* Programmer-Afklar feature tiles: overlay the figma image-186 (gradient blob)
   on the green for the Relevans/Resultat/De næste skridt tiles. */
.feature-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.feature-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/programmer-afklar/rectangle-23.webp');
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: -1;
}
.feature-tile > * { position: relative; z-index: 1; }

/* Programmer page — hero image cluster (4 floating images around H1) */
.programmer-hero {
  position: relative;
}
.programmer-hero__cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;            /* hidden on small screens — too crowded */
}
@media (min-width: 1024px) {
  .programmer-hero__cluster { display: block; }
}
.programmer-hero__pic {
  position: absolute;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-stone);
}
.programmer-hero__pic picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.programmer-hero__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.programmer-hero__pic--tl { top: 8%;  left: 14%; width: 180px; }
.programmer-hero__pic--tr { top: 6%;  right: 14%; width: 200px; }
.programmer-hero__pic--bl { bottom: 6%; left: 20%; width: 180px; }
.programmer-hero__pic--br { bottom: 8%; right: 18%; width: 200px; }

/* Hero of Programmer page: enforce extra padding because of the cluster */
.programmer-hero {
  padding-block: clamp(6rem, 4rem + 6vw, 10rem);
  min-height: 60vh;
  display: grid;
  align-content: center;
}

/* Page-hero placeholder card (used when Figma source image is missing) */
.page-hero__placeholder {
  width: 100%;
  aspect-ratio: 1405 / 732;
  max-width: 1405px;
  margin-inline: auto;
  background: var(--rf-stone);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}

/* ────────────────────────────────────────────────────────────────────
   Final mobile wrap safety net.
   * { min-width: 0 } stops flex/grid children from blowing out their
   container when their intrinsic content width exceeds available space.
   ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { min-width: 0; }

@media (max-width: 480px) {
  p, blockquote, li,
  .section__lede,
  .page-hero__lede,
  .testimonial-card__quote,
  .compare-3__col p,
  .compare-3__col li,
  .numbered-tile__body,
  .numbered-tile__title,
  .program-pick__option-title,
  .program-pick__option-desc,
  .form-step__label,
  .testimonials__hint {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }
  .section__lede {
    font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1.125rem);
  }
}

/* Form-step at <540 was already fixed; ensure the program-pick titles wrap */
@media (max-width: 540px) {
  .program-pick__option-title {
    font-size: 1.125rem;
    line-height: 1.2;
  }
  .program-pick__option-num,
  .program-pick__option-title,
  .program-pick__option-desc { display: block; }
}

/* Final guard: kpi-card values can't exceed card width */
.kpi-card__value {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ────────────────────────────────────────────────────────────────────
   Insights — whole tile is a link; "Læs mere" reveals on hover only.
   On touch devices (no hover), it's always visible.
   ──────────────────────────────────────────────────────────────────── */
.insight-tile {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: opacity var(--dur-base) var(--ease-out);
}
.insight-tile:hover .insight-tile__media,
.insight-tile:focus-visible .insight-tile__media {
  transform: none;
}
.insight-tile__media {
  transition: opacity var(--dur-base) var(--ease-out);
}
.insight-tile:hover .insight-tile__link,
.insight-tile:focus-visible .insight-tile__link {
  opacity: 0.72;
  transform: translateY(0);
}
.insight-tile__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.insight-tile:hover .insight-tile__arrow,
.insight-tile:focus-visible .insight-tile__arrow {
  transform: none;
}
/* Touch / no-hover: keep link visible always (mobile, tablets without hover) */

/* ────────────────────────────────────────────────────────────────────
   Footer wordmark — force aspect ratio so SVG renders at the right size.
   ──────────────────────────────────────────────────────────────────── */
.site-footer__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10%;
  opacity: 0.21;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 0;
}
.site-footer__wordmark img {
  width: 100%;
  height: auto;
  aspect-ratio: 1880 / 709.502;
  display: block;
  color: var(--color-text);
}

/* ────────────────────────────────────────────────────────────────────
   Testimonials — tabbed gallery.
   - Top-left: 3 square dots + "Testimonials" label.
     Active dot is opaque, inactive 30%.  Clickable to switch.
   - Left col: only ACTIVE byline + quote text is visible.
   - Right col: 1 large active photo + 2 small thumbnails, click to
     promote a thumbnail to active.
   ──────────────────────────────────────────────────────────────────── */
.testimonials {
  padding-block: clamp(3rem, 2rem + 4vw, 7rem);
}
.testimonials__head {
  margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.testimonials__dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
.testimonials__dot {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-out);
  border-radius: 0;
  position: relative;
  flex: 0 0 44px;
}
.testimonials__dot:hover { opacity: 0.7; }
.testimonials__dot:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.testimonials__dot.is-active { opacity: 1; }
.testimonials__label {
  margin-left: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.testimonials__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: end;
}
@media (min-width: 768px) {
  .testimonials__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 1rem + 4vw, 6rem);
  }
}
.testimonials__quotes {
  position: relative;
  min-height: 0;
  max-width: 100%;
}
.testimonials__quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42ch;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.testimonials__quote.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
.testimonials__byline {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.testimonials__byline strong {
  display: block;
  font-weight: var(--fw-medium);
}
.testimonials__byline span { color: var(--color-text-soft); }
.testimonials__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  margin: 0;
}

.testimonials__photos {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: flex-end;
}
.testimonials__photo {
  border: 0;
  padding: 0;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  width: 8rem;
  aspect-ratio: 234 / 275;
  opacity: 0.85;
  transition:
    width 400ms var(--ease-out),
    aspect-ratio 400ms var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
  outline-offset: 4px;
  order: 1;
}
.testimonials__photo:hover { opacity: 1; }
.testimonials__photo:focus-visible {
  outline: 2px solid currentColor;
}
.testimonials__photo.is-active {
  width: clamp(18rem, 30vw, 26rem);
  aspect-ratio: 598 / 653;
  opacity: 1;
  order: 0;
}
.testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .testimonials__stage { grid-template-columns: 1fr; }
  .testimonials__photo { width: 5rem; }
  .testimonials__photo.is-active {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .testimonials__quotes { min-height: 0;
  max-width: 100%;
}
  .testimonials__quote { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__photo,
  .testimonials__quote,
  .insight-tile__link { transition: opacity var(--dur-base) var(--ease-out); position: static; inset: auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-text); background: transparent; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: none; z-index: auto; }
}

/* ────────────────────────────────────────────────────────────────────
   Breaker — centered heading at proper Figma size (~40 px)
   ──────────────────────────────────────────────────────────────────── */
.breaker__content {
  position: relative;
  text-align: center;
}
.breaker__content > .section-label {
  position: absolute;
  top: 0;
  left: var(--gutter);
  text-align: left;
}
.breaker__title {
  color: var(--color-text-invert);
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.625rem, 1rem + 1.8vw, 2.5rem);   /* 26 → 40 (matches Figma) */
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────
   Insights — hover "Læs mere" centered as an overlay on the image
   ──────────────────────────────────────────────────────────────────── */
.insight-tile__media-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  aspect-ratio: 611 / 878;
}
.insight-tile__media-wrap .insight-tile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.insight-tile:hover .insight-tile__link,
.insight-tile:focus-visible .insight-tile__link {
  opacity: 0.72;
  transform: none;
}
.insight-tile__link .insight-tile__arrow {
  margin-right: var(--space-2);
}
.insight-tile:hover .insight-tile__arrow,
.insight-tile:focus-visible .insight-tile__arrow {
  transform: none;
}
/* Touch / no-hover: keep the overlay visible all the time */

/* ────────────────────────────────────────────────────────────────────
   Testimonials — restructure into 3-column grid for Figma alignment.
   Col 1: dots + label   Col 2: byline + quote   Col 3: photos.
   All columns top-aligned.
   ──────────────────────────────────────────────────────────────────── */
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.4fr) minmax(0, 2.6fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
  }
}

/* Override the older .testimonials__head — now sits as col 1 of the grid */
.testimonials .testimonials__head {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonials__dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
.testimonials__label {
  margin-left: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Quote column — clean top-aligned stack */
.testimonials__quotes {
  position: relative;
  min-height: 0;
  max-width: 100%;
}
.testimonials__quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.testimonials__quote.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
.testimonials__byline {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.testimonials__byline strong {
  display: block;
  font-weight: var(--fw-medium);
  width: auto;
  white-space: normal;
}
.testimonials__byline span {
  display: block;
  color: var(--color-text-soft);
}
.testimonials__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  margin: 0;
}

/* Photos column — top-aligned row [active large, next preview].
   The row is allowed to overflow past the column's right edge so the
   next-up photo bleeds off the viewport, mirroring the Figma layout
   (Figma: active 555w then inactive 419w with an 18-px gap on a 1920 ref).
   html/body have overflow-x: clip, so no horizontal scrollbar appears. */
.testimonials__photos {
  display: flex;
  gap: clamp(0.5rem, 0.94vw, 1.25rem);
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}
.testimonials__photo {
  border: 0;
  padding: 0;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  /* Figma: inactive 419×493 on 1920 ref → 21.8vw, capped at 26.2rem */
  width: clamp(12rem, 21.8vw, 26.2rem);
  aspect-ratio: 234 / 275;
  opacity: 1;
  transition:
    width 400ms var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
  outline-offset: 4px;
  order: 1;
  align-self: flex-start;
}
.testimonials__photo.is-active {
  /* Figma: active 555×652 on 1920 ref → 28.9vw, capped at 34.7rem */
  width: clamp(16rem, 28.9vw, 34.7rem);
  aspect-ratio: 234 / 275;
  opacity: 1;
  order: 0;
}

@media (max-width: 767px) {
  .testimonials__photos {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-3);
  }
  .testimonials__photo { width: 5.5rem; }
  .testimonials__photo.is-active {
    width: clamp(12rem, 60vw, 18rem);
    aspect-ratio: 5 / 6;
  }
  .testimonials__quotes { min-height: 0;
  max-width: 100%;
}
}

/* ────────────────────────────────────────────────────────────────────
   Calibrated to Figma spec for Home (1920 desktop ref):
   - Om os body  →  GT Sectra Book 60 px  /  line-height 1.05
   - Programmer h2 "Hvor står i?"  →  GT Sectra Book 40 px
   - Programmer intro paragraph already 20 px sans (correct)
   - Breaker section spans almost the full viewport (~90vh)
   - Breaker title 40 px max (already corrected)
   ──────────────────────────────────────────────────────────────────── */

/* Big statement-style body, replaces the old sans-serif lede sizing. */
.section__statement {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.625rem, 1rem + 2.6vw, 3.75rem);   /* 26 → 60 px */
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  max-width: 22ch;        /* lets the line lengths echo Figma's 1092 px box */
  color: var(--color-text);
}
@media (min-width: 1024px) {
  .section__statement { max-width: 19ch; }
}

/* Make the Om os section feel as roomy as Figma's frame on desktop. */
.section--om-os {
  padding-block: clamp(4rem, 3rem + 6vw, 9rem);
}

/* Cap the "Hvor står i?" headline at the Figma size (40 px) so it doesn't
   blow up to 64 px from the global h2 clamp. */
.section--programmer .section__heading h2,
#programmer-title {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);     /* 24 → 40 px */
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* Breaker — full-height moody section with small centered text. */
.breaker {
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.breaker__content {
  width: 100%;
}
.breaker__content > .section-label {
  /* Anchor the "▪ Breaker" label to top-left of the section, not the content */
  top: clamp(1.5rem, 1rem + 2vw, 3rem);
  left: var(--gutter);
}
.breaker__title {
  /* Slightly smaller to match Figma proportions (40 px max on 1920 frame) */
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);     /* 24 → 40 px */
}
/* Ensure section-label inside breaker positions relative to the full breaker,
   not just the content container. */
.breaker { position: relative; }
.breaker > .container.breaker__content { padding-top: 0; }

/* Breaker label is now a direct child of .breaker, not inside breaker__content,
   so it positions to the section corner regardless of content centering. */
.breaker__label {
  position: absolute;
  top: var(--space-5);
  left: var(--gutter);
  z-index: 1;
  margin: 0;
}
.breaker > .container.breaker__content { position: static; }

/* ────────────────────────────────────────────────────────────────────
   Om os statement — Figma proportions calibration.
   - Width box matches Figma's 1092 px (allow ~44-char lines, 5-line wrap)
   - NO automatic hyphenation (Figma never hyphens these words)
   - Normal word-break so e.g. "bureau" stays whole
   ──────────────────────────────────────────────────────────────────── */
.section__statement {
  max-width: 1100px;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
@media (min-width: 1024px) {
  .section__statement { max-width: 1100px; }
}
@media (max-width: 768px) {
  /* On small screens we DO want wrapping (just no auto-hyphens) */
  .section__statement {
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

/* Final override: any earlier mobile rules that set hyphens: auto on the
   statement must not apply. */
.section__statement,
.section__statement * {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Final calibration of .section__statement font size against the Figma
   1920-px artboard reference (60 px there).  Use a linear vw curve so at
   1920 it's exactly 60 px, at 1440 about 45 px, etc.  This makes line
   breaks match Figma's intended 44-char lines on standard desktop. */
.section__statement {
  font-size: clamp(1.5rem, 3.125vw, 3.75rem);   /* 24 → linear → 60 px */
}

/* ────────────────────────────────────────────────────────────────────
   Breaker — final Figma calibration.
   - Image must be truly edge-to-edge (no side gutters)
     → make <picture> itself absolutely positioned so the place-items: center
       layout doesn't constrain it.
   - Title scales linearly with viewport: 30 px at 1440, 40 px at 1920
     (smaller than before so it reads proportionally to the full-bleed image).
   ──────────────────────────────────────────────────────────────────── */
.breaker > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  margin: 0;
}
.breaker > picture > img,
.breaker__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;          /* override reset's max-width: 100% interaction */
  object-fit: cover;
  display: block;
  background: var(--color-bg-deep);
}
.breaker__title {
  /* 30 → linear → 40 px (1440 → 1920).  Below 1440 it scales down naturally. */
  font-size: clamp(1.25rem, 2.08vw, 2.5rem);
  line-height: 1.15;
}

/* ────────────────────────────────────────────────────────────────────
   Insights hover — just centered white text on the image (no backdrop)
   plus a subtle darkening so the text reads cleanly.
   ──────────────────────────────────────────────────────────────────── */

/* Subtle image darken on hover so white text stays readable */
.insight-tile__media-wrap {
  position: relative;
}

/* Make sure the link sits ABOVE the darken layer */

/* Mobile / touch (no hover): still show "Læs mere" centered on the image,
   with a very light darken so it's always readable. */

/* Keep "→ Læs mere" on one line, centered as a single horizontal pair */
.insight-tile__link .insight-tile__arrow {
  margin-right: 0;   /* gap handles spacing */
}

/* ────────────────────────────────────────────────────────────────────
   Footer wordmark — match Figma proportions.
   Figma reference (Slide 16:9 - 1):
   - slide 1920 × 1080
   - LOGO 1880 × 710, top: 643, opacity: 0.20
   - So wordmark occupies bottom ~40% of slide, partially cropped at bottom.
   ──────────────────────────────────────────────────────────────────── */
.site-footer {
  /* Give the footer enough vertical room for the wordmark to feel anchored
     at the bottom, like Figma's full 16:9 slide. */
  min-height: 70vh;
}
.site-footer__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22%;            /* ~22% of the wordmark is cropped at the bottom */
  opacity: 0.21;           /* matches Figma's `opacity-20` */
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0;
}
.site-footer__wordmark img {
  width: 100%;
  height: auto;
  aspect-ratio: 1880 / 709.502;
  display: block;
}

/* ────────────────────────────────────────────────────────────────────
   Footer — match Figma's "Slide 16:9 - 1" (1920 × 1080) proportions.
   Wordmark crop ratio aligns with the LOGO node's actual Figma position:
   - Slide   : 1080 tall
   - LOGO    : 710 tall, top 643  →  ~62 % of the logo visible above the
     slide bottom; the lower 38 % is cropped by the slide.
   - At any viewport width, footer is 16:9 → 56.25 vw tall, wordmark is
     1880/709 ≈ 37.7 vw tall → bottom: -25 % of footer ≈ matching crop.
   ──────────────────────────────────────────────────────────────────── */
.site-footer {
  min-height: max(520px, 56.25vw);   /* 16:9 to match Figma; never tiny */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.site-footer__grid {
  /* The link columns + newsletter form sit in the top portion only */
  padding-top: clamp(2rem, 1rem + 4vw, 5rem);
  position: relative;
  z-index: 1;
}
.site-footer__wordmark {
  position: absolute;
  left: 1.5%;
  right: 0;
  bottom: -25%;
  opacity: 0.21;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0;
}
.site-footer__wordmark img {
  width: 100%;
  height: auto;
  aspect-ratio: 1880 / 709.502;
  display: block;
}
.site-footer__legal {
  /* anchor to bottom-left of the footer, outside the wordmark crop */
  margin-top: auto;
  padding-bottom: clamp(1rem, 0.5rem + 1vw, 2rem);
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────
   Tilfredshed chart — sidste 12 måneders score, Figma-styled bar grid
   ──────────────────────────────────────────────────────────────────── */
.tilfredshed-chart {
  margin: clamp(2rem, 1rem + 4vw, 5rem) 0 0;
  padding: clamp(2rem, 1rem + 3vw, 4rem);
  background: var(--rf-green-02);          /* #CCF191 */
  color: var(--rf-green-05);               /* #4C593F */
  border-radius: var(--radius-sm);
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.tilfredshed-chart__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.tilfredshed-chart__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tilfredshed-chart__stat:last-child {
  /* "År" sits right-aligned on desktop to match Figma layout */
  text-align: right;
  align-items: flex-end;
}
.tilfredshed-chart__stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--rf-green-05);
  opacity: 0.72;
}
.tilfredshed-chart__stat-value {
  /* Figma: Instrument Sans, ~Medium weight, BLACK */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rf-pure-black);
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
}
.tilfredshed-chart__stat-icon {
  font-size: 0.7em;
  line-height: 1;
  color: var(--rf-pure-black);
}
.tilfredshed-chart__svg {
  width: 100%;
  height: clamp(140px, 20vw, 320px);
  display: block;
  overflow: visible;
}
.tilfredshed-chart__bar {
  fill: var(--rf-green-05);
  fill-opacity: 0.28;
}
.tilfredshed-chart__bar--active {
  fill: var(--rf-green-05);
  fill-opacity: 1;
}
.tilfredshed-chart__active-marker {
  fill: var(--rf-green-05);
}
.tilfredshed-chart__active-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--rf-green-05);
  font-weight: 500;
}
.tilfredshed-chart__labels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tilfredshed-chart__labels li {
  font-family: var(--font-sans);
  font-size: clamp(10px, 1vw, 13px);
  color: var(--rf-green-05);
  opacity: 1;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tilfredshed-chart__labels li:first-child { text-align: left; }
.tilfredshed-chart__labels li:last-child  { text-align: right; }

@media (max-width: 768px) {
  .tilfredshed-chart__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .tilfredshed-chart__stat-value {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  }
  .tilfredshed-chart__labels li {
    font-size: 9px;
  opacity: 1;
}
}

@media (prefers-reduced-motion: reduce) {
  .tilfredshed-chart__bar,
  .tilfredshed-chart__bar--active { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Tilfredshed chart — proportional panel (1406 × 732 from Figma).
   One thin bar per month, equal spacing, hover-only active state.
   ──────────────────────────────────────────────────────────────────── */
.tilfredshed-chart {
  /* Override the older display: grid rule */
  display: flex;
  flex-direction: column;
  /* Figma panel proportions */
  aspect-ratio: 1406 / 732;
  /* Stats / chart / labels share vertical space */
  gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
}
.tilfredshed-chart__svg {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
}

/* Bars: thin sage-green lines by default; solid dark green when active */
.tilfredshed-chart__bar {
  fill: var(--rf-green-05);
  fill-opacity: 0.28;
  transition: fill-opacity 120ms var(--ease-out);
  pointer-events: none;          /* hover handled by .tilfredshed-chart__hit */
}
.tilfredshed-chart__bar.is-active {
  fill: #000;
  fill-opacity: 1;
}
.tilfredshed-chart__hit {
  cursor: pointer;
  outline: none;
}
.tilfredshed-chart__hit:focus-visible {
  /* Subtle focus ring so keyboard users can see which slot is active */
  stroke: var(--rf-green-05);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.tilfredshed-chart__active-marker {
  fill: #000;
}
.tilfredshed-chart__active-label {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  fill: #000;
  dominant-baseline: alphabetic;
  text-anchor: middle;
}
.tilfredshed-chart__year-label {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--rf-green-05);
  fill-opacity: 1;
  dominant-baseline: alphabetic;
}

@media (prefers-reduced-motion: reduce) {
  .tilfredshed-chart__bar { transition: none; }
}

/* On very narrow viewports the 1.92:1 panel becomes tall — relax aspect */
@media (max-width: 540px) {
  .tilfredshed-chart {
    aspect-ratio: auto;
    min-height: 380px;
  }
  .tilfredshed-chart__year-label,
  .tilfredshed-chart__active-label { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE: PROGRAMMER  — scoped refinements to match Figma frame 899:5763
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero block ─────────────────────────────────────────────────── */
body.page-programmer .programmer-hero {
  min-height: 100svh;
  padding-block: clamp(6rem, 4rem + 6vw, 10rem) 0;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
}
body.page-programmer .programmer-hero__content {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.page-programmer .programmer-hero__title {
  text-align: center;
  margin-inline: auto;
}
body.page-programmer .programmer-hero__lede {
  text-align: center;
  margin-inline: auto;
}
body.page-programmer .page-hero__title {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);   /* 36 → 60 */
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 22ch;
  font-weight: var(--fw-book);
}
body.page-programmer .page-hero__lede {
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); /* 13 → 15 — tight, per Figma */
  line-height: 1.5;
  max-width: 44ch;
  margin-top: var(--space-5);
  color: var(--color-text-soft);
}

/* Rail = "Udforsk vores programmer" label, then bullet square, then vertical line.
   Pinned to the bottom row of the hero grid so the line touches the bottom edge.
   Label sits directly above the bullet with minimal whitespace. */
body.page-programmer .programmer-hero__rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
body.page-programmer .programmer-hero__cue-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;     /* 15px — matches the lede */
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-soft);   /* match the lede color */
  text-decoration: none;
  margin-bottom: calc(var(--space-3) + 15px);
}
body.page-programmer .programmer-hero__rail-bullet {
  width: 8px;
  height: 8px;
  background: var(--color-text);
}
body.page-programmer .programmer-hero__rail-line {
  display: block;
  width: 1px;
  height: clamp(120px, 22vh, 260px);
  background: var(--color-text);
  opacity: 0.5;
}

/* The 4 floating images — all SQUARES per Figma, anchored near corners */
body.page-programmer .programmer-hero__pic {
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
}
body.page-programmer .programmer-hero__pic--tl {
  top: 14%;
  left: 10%;
  width: clamp(150px, 13vw, 215px);
}
body.page-programmer .programmer-hero__pic--tr {
  top: 12%;
  right: 8%;
  width: clamp(170px, 15vw, 245px);
}
body.page-programmer .programmer-hero__pic--bl {
  bottom: 12%;
  left: 16%;
  width: clamp(170px, 15vw, 245px);
}
body.page-programmer .programmer-hero__pic--br {
  bottom: 18%;
  right: 14%;
  width: clamp(150px, 13vw, 215px);
}

/* ── Programs stack (dark section) — Figma pixel-perfect ───────────
   Reference frame: 1920 px wide. All sizes scale via clamp() anchored
   at 1920, so at exactly 1920 viewport the render matches Figma 1:1. */
body.page-programmer .programs-stack {
  padding-block: clamp(4rem, 2rem + 5vw, 7rem);
}

/* Intro row — Figma: label at x=47, intro paragraphs at x=502, w=713.
   3-column layout proportional to 1920 frame: 25.1 / 38.8 / 36.1. */
body.page-programmer .programs-stack__intro {
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: none;
  margin-inline: 0;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  padding-inline: var(--gutter);
}
@media (min-width: 768px) {
  body.page-programmer .programs-stack__intro {
    grid-template-columns: 25.1% 38.8% 36.1%;
    column-gap: 0;
    align-items: start;
  }
}
/* Intro paragraphs — Figma: GT Sectra Regular 30 / 35, white. */
body.page-programmer .programs-stack__intro p {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.125rem, 1.5625vw, 1.875rem);    /* 30 px @ 1920 */
  line-height: clamp(1.3125rem, 1.8229vw, 2.1875rem);/* 35 px @ 1920 */
  letter-spacing: 0;
  max-width: none;
  color: #fff;
}
body.page-programmer .programs-stack__intro-text {
  display: flex;
  flex-direction: column;
  /* Figma has an empty line between paragraphs ≈ one line of 35 px */
  gap: clamp(1.3125rem, 1.8229vw, 2.1875rem);
}
/* Section label "Programmer" — Instrument Sans 20 / 20, white, tracking -0.01em */
body.page-programmer .programs-stack__intro .section-label {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ── Program cards — Figma absolute layout ────────────────────────
   Each card is 1888×120 at 1920 ref with 30 px between cards.
   Children are absolutely positioned at the Figma percentages so the
   render matches the design pixel-for-pixel at 1920, scaling
   proportionally below that. */
body.page-programmer .programs-list {
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(8px, 0.625vw, 12px);          /* 12 px @ 1920 */
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.5625vw, 30px);                   /* 30 px @ 1920 */
}
body.page-programmer .programs-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-programmer .program-card {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;                 /* 120 px @ 1920 */
  padding: var(--space-4) 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-decoration: none;
  grid-template-columns: minmax(3ch, 13.28fr) minmax(0, 37.63fr) minmax(0, 33.68fr) minmax(0, 15.41fr);
  align-items: start;
  min-height: clamp(64px, 6.25vw, 120px);
}
body.page-programmer .program-card:hover,
body.page-programmer .program-card:focus-visible {
  background: transparent;
  opacity: 0.8;
}
body.page-programmer .programs-list > li:last-child .program-card {
  border-bottom: 0;
}
/* Index "01" — left: 0 %, vertically centred. Instrument Sans 20 / 20, white */
body.page-programmer .program-card__index {
  position: static;
  left: 0;
  top: 50%;
  transform: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 1;
  padding-top: 0;
}
/* Title — left: 13.28 %, top: 0, line-height = card height. GT Sectra 70. */
body.page-programmer .program-card__title {
  position: static;
  left: 13.28%;
  top: 0;
  right: auto;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.25rem, 3.6458vw, 4.375rem);     /* 70 px @ 1920 */
  line-height: 1.05;           /* matches card height */
  letter-spacing: -0.01em;
  color: #fff;
  white-space: normal;
  transform: none;
}
/* Description — left: 50.91 %, right: 15.41 %, top/bottom: 25 %.
   Instrument Sans 20 / 20, white opacity 0.4. */
body.page-programmer .program-card__desc {
  position: static;
  top: 25%;
  bottom: auto;
  left: 50.91%;
  right: 15.41%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0.75;
  max-width: none;
  text-align: left;
  hyphens: none;
  overflow: visible;
  transform: none;
}
/* Arrow hidden in Figma */
body.page-programmer .program-card__arrow {
  display: none;
}

@media (max-width: 767px) {
  body.page-programmer .programs-list {
    padding-inline: var(--gutter);
    gap: var(--space-4);
  }
  body.page-programmer .program-card {
    position: relative;
    display: grid;
    grid-template-columns: 3ch 1fr;
    grid-template-areas:
      "idx title"
      "idx desc";
    gap: var(--space-2) var(--space-4);
    height: auto;
    padding-block: var(--space-4);
  }
  body.page-programmer .program-card__index {
    position: static;
    transform: none;
    grid-area: idx;
    align-self: start;
    padding-top: 0.35em;
  }
  body.page-programmer .program-card__title {
    position: static;
    grid-area: title;
    white-space: normal;
    font-size: clamp(1.75rem, 1rem + 4vw, 2.5rem);
    line-height: 1.05;
  }
  body.page-programmer .program-card__desc {
    position: static;
    grid-area: desc;
    overflow: visible;
    line-height: 1.4;
  opacity: 0.75;
  bottom: auto;
}
}

/* ── Testimonials ───────────────────────────────────────────────── */
body.page-programmer .testimonials {
  padding-block: clamp(6rem, 4rem + 6vw, 10rem);
  background: var(--color-bg);
}

/* Figma layout: 3-column row [label | byline+quote | photos], all top-aligned. */
body.page-programmer .testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  row-gap: clamp(3rem, 2rem + 5vw, 7rem);
}
@media (min-width: 768px) {
  /* Figma columns from container content area, 1920 ref:
     col 1 (label):  0   → 495 px → 24.73 % (455/1840 at 1920)
     col 2 (text):  495  → 970 px → 25.82 % (475/1840)
     col 3 (photos):970  → 1840  → 49.45 % (910/1840) */
  body.page-programmer .testimonials__grid {
    grid-template-columns: 24.73% 25.82% 49.45%;
    column-gap: 0;
    align-items: start;
    row-gap: 0;
  }
}
body.page-programmer .testimonials__head {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* override align-items: end from base 2-col grid rule */
  gap: var(--space-4);
}
/* Dots: 3 × 8.52 px squares with 6 px between (Figma exact). */
body.page-programmer .testimonials__dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
body.page-programmer .testimonials__dot {
  width: 44px;
  height: 44px;
  background: transparent;
  position: relative;
  flex: 0 0 44px;
}
/* Label "Testimonials" — Instrument Sans 20 / 20, tracking -0.01em. */
body.page-programmer .testimonials__label {
  /* Figma: last dot edge → label start ≈ 21 px */
  margin-left: clamp(0.625rem, 1.094vw, 1.3125rem);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
/* Quote column — Figma width 391.97 px on 1920 ref ≈ 20.4 % of frame. */
body.page-programmer .testimonials__quotes {
  position: relative;
  min-height: 0;          /* byline + gap + 4-line quote */
  max-width: 100%;
  align-self: start;
}
body.page-programmer .testimonials__quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Figma byline-to-quote gap ≈ 70 px */
  gap: clamp(1.25rem, 3.6458vw, 4.375rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
body.page-programmer .testimonials__quote.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
/* Byline — Instrument Sans 20 / 20. "Jane" + "Mortensen" each on own line
   via display:block, "Media Manager" line uses Figma grey #4b554c. */
body.page-programmer .testimonials__byline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}
body.page-programmer .testimonials__byline strong {
  display: block;
  font-weight: 400;          /* Figma byline is Regular, not Medium */
  margin: 0;
  width: auto;        /* wraps "Jane" / "Mortensen" onto separate lines */
}
body.page-programmer .testimonials__byline span {
  display: block;
  color: var(--color-text-soft);            /* Figma "Media Manager" line colour */
}
/* Quote text — Instrument Sans 20 / 20, tracking -0.01em. */
body.page-programmer .testimonials__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
  border: 0;
  padding: 0;
  quotes: none;
}

/* Photos: two-portrait strip per Figma — wide primary + smaller secondary,
   both share aspect 234/275 but the secondary is ~75% of primary, top-aligned.
   Figma (1920 ref): active 555×652, next 419×493 with ~18 px gap.
   The row may overflow the column's right edge; body has overflow-x: clip. */
body.page-programmer .testimonials__photos {
  display: flex;
  gap: clamp(0.5rem, 0.94vw, 1.25rem);
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: auto;
  overflow: visible;
}
body.page-programmer .testimonials__photo,
body.page-programmer .testimonials__photo.is-active {
  border: 0;
  padding: 0;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: flex-start;
  height: auto;
  aspect-ratio: 234 / 275;
  transition:
    width 400ms var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
/* Default (secondary) — smaller portrait. Hidden until promoted by JS. */
body.page-programmer .testimonials__photo {
  width: clamp(12rem, 21.8vw, 26.2rem);
  opacity: 0.95;
  order: 2;
  display: none;
}
body.page-programmer .testimonials__photo:hover { opacity: 1; }
/* Active primary — wide portrait. */
body.page-programmer .testimonials__photo.is-active {
  width: clamp(16rem, 28.9vw, 34.7rem);
  opacity: 1;
  order: 0;
  display: block;
}
/* Show ONE thumbnail next to active: the sibling immediately following the active */
body.page-programmer .testimonials__photo.is-active + .testimonials__photo {
  display: block;
  order: 1;
}
/* If active is the last child, show the first photo as the secondary */
body.page-programmer .testimonials__photos:not(:has(.testimonials__photo.is-active + .testimonials__photo)) .testimonials__photo:first-child {
  display: block;
  order: 1;
}
body.page-programmer .testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  body.page-programmer .testimonials__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  body.page-programmer .testimonials__photos {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  body.page-programmer .testimonials__photo {
    width: 4.5rem;
  }
  body.page-programmer .testimonials__photo.is-active {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  body.page-programmer .testimonials__quotes {
    max-width: 100%;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE: INDSIGTER — Figma-matched refinements.
   Hero spacing, grid rhythm, tile typography, image proportions.
   ═══════════════════════════════════════════════════════════════════ */

/* Centered hero with Programmer-matched sizes — Martin (Loom @ 6:11-6:23):
   "Den skal lige centreres ordentligt ... ligesom de andre steder. Og så skal
   vi have samme størrelse på den her tekst." */
body.page-indsigter .page-hero {
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  text-align: center;
}
body.page-indsigter .page-hero .section-label {
  justify-content: center;
  margin-bottom: var(--space-5);
}
body.page-indsigter .page-hero__title {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);   /* 36 → 60, = programmer */
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin-inline: auto;
}
body.page-indsigter .page-hero__lede {
  max-width: 48ch;
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  margin-inline: auto;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); /* 13 → 15, = programmer */
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* Insights grid — six tiles, 3 cols × 2 rows, generous Figma rhythm */
body.page-indsigter .insight-grid--six {
  column-gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.5rem);
  row-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  margin-top: clamp(2rem, 1rem + 3vw, 4rem);
  margin-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Tile internals — image, title, hr, body. Figma-tight vertical rhythm. */
body.page-indsigter .insight-tile {
  gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
}
body.page-indsigter .insight-tile__media-wrap {
  aspect-ratio: 1 / 1;          /* Figma tiles are square */
  background: var(--color-bg-soft);
  overflow: hidden;             /* clips the oversized media below */
  border-radius: var(--radius-sm);
  position: relative;
}
/* Inflate the image generously (12 %) beyond the wrap so any baked-in
   white/grey edges on the source PNGs fall outside the clip rect and the
   tile is fully covered by photo content.
   NOTE: the reset sets `picture { max-width: 100% }` which would cap the
   width at the wrap's width — override with `max-width: none`. */
body.page-indsigter .insight-tile__media-wrap picture {
  position: absolute;
  inset: -6%;
  display: block;
  width: 112%;
  height: 112%;
  max-width: none;
  max-height: none;
}
body.page-indsigter .insight-tile__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none;
  aspect-ratio: auto;            /* override base 611/878 — let the
                                    inflated parent box dictate size */
}
body.page-indsigter .insight-tile__title {
  /* Fixed-height title block so short (1-line) and long (2-line) titles
     reserve the same vertical space → excerpts always start at the same y
     across every tile. Title text is middle-aligned within that block. */
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin-top: clamp(0.5rem, 0.3rem + 0.4vw, 0.75rem);
  margin-bottom: 0;
  max-width: 18ch;
  text-wrap: balance;
  /* Reserve 2 lines (2 × 1.15 line-height) ≈ 2.3em. Centre the text
     vertically so 1-line titles sit middle-aligned and 2-line titles fill
     the block. */
  min-height: 2.3em;
  display: flex;
  align-items: center;
}
body.page-indsigter .insight-tile__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 38ch;
  margin: clamp(0.5rem, 0.3rem + 0.4vw, 0.75rem) 0 0 0;
}
/* HR moved to the BOTTOM of the tile (after the body) per Figma.
   `margin-top: auto` pushes the HR to the bottom of the flex column —
   combined with the grid's default equal-height row, this aligns the
   HRs across all 6 tiles regardless of excerpt length. */
body.page-indsigter .insight-tile hr {
  order: 99;
  margin-top: auto;             /* push to bottom of equal-height tile */
  margin-bottom: 0;
  margin-inline: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-rule);
  opacity: 0.85;
  padding-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.1rem);
}
/* Ensure the grid stretches tiles to equal height in each row so the HRs
   can align. (Grid default is stretch, but make it explicit.) */
body.page-indsigter .insight-grid--six {
  align-items: stretch;
}
body.page-indsigter .insight-tile {
  height: 100%;
}

/* Hover overlay — keep Figma look: minimal darken + centered "Læs mere" */
body.page-indsigter .insight-tile__link {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
}

/* Tablet (768–1023): keep 3 columns with tighter gaps */
@media (min-width: 768px) and (max-width: 1023px) {
  body.page-indsigter .insight-grid--six {
    column-gap: 1.25rem;
    row-gap: 2.5rem;
  }
  body.page-indsigter .insight-tile__title {
    font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
  }
}

/* Mobile (≤767px): single column, wider crop on the image card */
@media (max-width: 767px) {
  body.page-indsigter .insight-grid--six {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  body.page-indsigter .insight-tile__media-wrap {
    aspect-ratio: 4 / 3;
  }
  body.page-indsigter .insight-tile__title {
    max-width: 100%;
  }
  body.page-indsigter .insight-tile__body {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: KONTAKT — refinements to align hero, 4-step form, and team
   grid with Figma frame 904:3111. All rules namespaced to page-kontakt
   so they cannot leak to other pages.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
body.page-kontakt .page-hero {
  /* Figma kontakt hero spans ~292→780 of the 4242 frame; less top, less
     bottom than the default page-hero padding so the form section sits
     closer to the title. */
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem) clamp(2rem, 1.5rem + 2vw, 4rem);
}
body.page-kontakt .page-hero__grid {
  /* Match the global 1fr / 3fr pattern but ensure the label hangs in the
     left column and the title sits squarely in the wide right column. */
  align-items: start;
}
@media (min-width: 768px) {
  body.page-kontakt .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: clamp(2rem, 1rem + 3vw, 5rem);
  }
}
body.page-kontakt .page-hero__title {
  /* Figma reads ~63px line-height ~70px — match the title scale. */
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9375rem);
  line-height: 1.1;
  max-width: 18ch;
}

/* ── 4-step form section ──────────────────────────────────────────── */
body.page-kontakt .form-steps {
  margin-top: 0;
  border-top: 1px solid var(--color-rule);
  display: block;            /* override default grid */
}
body.page-kontakt .form-step {
  /* Re-layout each step row to mirror the page-hero grid: small index
     column on the left, content column on the right. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  border-bottom: 1px solid var(--color-rule);
  border-top: 0;
}
body.page-kontakt .form-step__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  /* Echo the section-label spacing so 01/02/03/04 sit at the same x as
     the "Kontakt"/"Team" labels above. */
  letter-spacing: var(--tracking-tight);
}
body.page-kontakt .form-step__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);          /* ~16-20 — Figma reads 16-18px */
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}
body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]),
body.page-kontakt .form-step textarea {
  width: 100%;
  max-width: 100%;
  font-size: var(--fs-body);
  border: 0;
  padding: var(--space-3) 0;
  background: transparent;
  position: static;
  inset: auto;
  height: auto;
  min-height: 44px;
  color: var(--color-text);
  line-height: 1.4;
  outline: revert;
}
/* Remove visible bottom-border on inputs — Figma shows labels only with
   the row's bottom rule providing the line. */
body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]),
body.page-kontakt .form-step textarea {
  border-bottom: 0;
  position: static;
  inset: auto;
  height: auto;
  min-height: 44px;
  color: var(--color-text);
  padding: var(--space-3) 0;
  line-height: 1.4;
  outline: revert;
}
/* Message content remains readable and can be resized by the visitor. */
body.page-kontakt .form-step textarea {
  min-height: 7.5rem;
  height: auto;
  resize: vertical;
  overflow: auto;
  display: block;
  position: static;
  inset: auto;
  color: var(--color-text);
  padding: var(--space-3) 0;
  line-height: 1.4;
  outline: revert;
}

/* ── Program-pick chip grid (step 01) ─────────────────────────────── */
body.page-kontakt .program-pick {
  margin-top: 0;
  gap: clamp(0.5rem, 0.3rem + 0.5vw, 1rem);
}
@media (min-width: 768px) {
  body.page-kontakt .program-pick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.page-kontakt .program-pick__option {
  display: flex;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 11rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  height: auto;
  overflow: visible;
}
body.page-kontakt .program-pick__option-num {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  position: static;
}
body.page-kontakt .program-pick__option-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  display: block;
  position: static;
}
body.page-kontakt .program-pick__option-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
  display: block;
  position: static;
  margin-top: auto;
}
body.page-kontakt .program-pick__option:has(input:checked) {
  background: var(--rf-green-02);
  border-color: var(--rf-green-02);
}

/* Submit button — Figma has none visible, but the form needs to remain
   submittable. Anchor it to the right of the content column. */
body.page-kontakt .form-step button[type="submit"].contact-module__cta {
  margin-top: var(--space-6);
  margin-left: 0;
}

/* ── Team section ─────────────────────────────────────────────────── */
body.page-kontakt section[aria-labelledby="team-title"] {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
body.page-kontakt #team-title {
  /* Section title style: serif, ~50-60px in Figma. Use page-hero title
     scale but slightly tighter. */
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem);
  line-height: 1.1;
  max-width: 20ch;
}
body.page-kontakt .team-grid {
  margin-top: clamp(2rem, 1.5rem + 2vw, 4rem);
  gap: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  body.page-kontakt .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.page-kontakt .team-tile {
  gap: var(--space-2);
}
body.page-kontakt .team-tile__photo {
  aspect-ratio: 1 / 1.18;
  border-radius: 0;
}
body.page-kontakt .team-tile__name {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  margin-top: var(--space-3);
}
body.page-kontakt .team-tile__role,
body.page-kontakt .team-tile__contact {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}
body.page-kontakt .team-tile__contact a {
  color: inherit;
  text-decoration: none;
}

/* Team header — hanging label, title in wide column */
body.page-kontakt .section__grid--team {
  align-items: start;
}
@media (min-width: 768px) {
  body.page-kontakt .section__grid--team {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: clamp(2rem, 1rem + 3vw, 5rem);
  }
}

/* ── Responsive — tablet (≤1023) ──────────────────────────────────── */
@media (max-width: 1023px) {
  body.page-kontakt .program-pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Responsive — mobile (≤767) ───────────────────────────────────── */
@media (max-width: 767px) {
  body.page-kontakt .page-hero__grid,
  body.page-kontakt .form-step,
  body.page-kontakt .section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  body.page-kontakt .form-step {
    padding-block: var(--space-5);
  }
  body.page-kontakt .form-step__index {
    font-size: var(--fs-body-sm);
  }
  body.page-kontakt .program-pick {
    grid-template-columns: 1fr;
  }
  body.page-kontakt .program-pick__option {
    min-height: 11rem;
    padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: auto;
  overflow: visible;
}
  body.page-kontakt .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* 44px touch targets for the submit button */
  body.page-kontakt .form-step button[type="submit"] {
    min-height: 44px;
  }
}

/* ── Responsive — narrow (≤480) ───────────────────────────────────── */
@media (max-width: 480px) {
  body.page-kontakt .page-hero__title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); }
  body.page-kontakt #team-title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE: CASE-BESTSELLER — scoped refinements
   All selectors prefixed with body.page-case to avoid cross-agent
   collisions. Mirrors Figma "Website Views" frame.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — tighter title, soft small lede, wider edge-to-edge media. */
body.page-case .page-hero {
  padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
body.page-case .page-hero__title {
  font-weight: var(--fw-book);
  letter-spacing: -0.02em;
  line-height: 1.08;
  /* Figma title is ~44 px not 60 — scale down on desktop */
  font-size: clamp(1.875rem, 1rem + 2.4vw, 2.8125rem);
  max-width: 16ch;
}
body.page-case .page-hero__lede {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  line-height: 1.5;
  color: var(--color-text-soft);
  max-width: 48ch;
  margin-top: var(--space-4);
}
body.page-case .page-hero__media {
  margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
}
body.page-case .page-hero__media img {
  width: 100%;
  max-width: none;
  /* Figma hero image is closer to 16/10 than 16/9 */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

/* Section spacing across the page */
body.page-case .section {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}

/* Two-col layout — narrow sticky sidebar + wide serif body */
body.page-case .content-two-col {
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  body.page-case .content-two-col {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(4rem, 3rem + 4vw, 8rem);
    align-items: start;
  }
}
body.page-case .content-two-col__side {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  gap: var(--space-6);
}
@media (max-width: 1023px) {
  body.page-case .content-two-col__side { position: static; }
}

/* Serif body in main column */
body.page-case .content-two-col__main {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
body.page-case .content-two-col__main p {
  margin-bottom: 0.9em;
  max-width: 38ch;
}
body.page-case .content-two-col__main p:last-child { margin-bottom: 0; }
body.page-case .content-two-col__main p.muted { color: var(--color-text-soft); }
body.page-case .content-two-col__main h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.6em;
  max-width: 22ch;
}

/* Intro sidebar — definition list (Kunde / Branche / Opgavetype / Varighed) */
body.page-case .case-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}
body.page-case .case-meta__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-case .case-meta dt {
  color: var(--color-text-soft);
  font-weight: var(--fw-regular);
}
body.page-case .case-meta dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--fw-regular);
}

/* KPI section heading row */
body.page-case .section__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
  body.page-case .section__grid {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(4rem, 3rem + 4vw, 8rem);
    align-items: start;
  }
}
body.page-case .section__grid h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
}

/* KPI cards — paper bg, huge metric, tiny caption */
body.page-case .kpi-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-5);
}
@media (min-width: 768px) {
  body.page-case .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
body.page-case .kpi-card {
  background: var(--rf-paper);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: grid;
  /* Row 1: small label. Row 2: huge value pushed to bottom. Row 3: caption. */
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  min-height: clamp(240px, 26vw, 320px);
}
body.page-case .kpi-card__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  letter-spacing: 0;
}
body.page-case .kpi-card__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(3.5rem, 2rem + 5.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--color-text);
  margin: 0;
  display: block;
  align-self: end;
}
body.page-case .kpi-card__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  line-height: 1.4;
  max-width: 26ch;
  margin: 0;
  opacity: 1;
}

/* Breaker — dark portrait, white serif title, sans body.
   Figma frame is a landscape strip (≈ 16:7), not the global 90vh full
   screen. Centre content horizontally. */
body.page-case .breaker {
  min-height: 0;
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
  aspect-ratio: 16 / 7;
  text-align: center;
  place-items: center;
}
body.page-case .breaker__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.page-case .breaker__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 16ch;
  color: var(--color-text-invert);
  margin-top: var(--space-5);
}
body.page-case .breaker__body {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-invert);
  opacity: 0.85;
  max-width: 50ch;
}

/* Hero section-label sits on light bg so use dark colour */
body.page-case .page-hero .section-label { color: var(--color-text); }
body.page-case .page-hero .section-label__bullet { background: var(--color-marker); }

/* Mobile adjustments */
@media (max-width: 767px) {
  body.page-case .page-hero__title { max-width: 100%; }
  body.page-case .kpi-card { min-height: 220px; }
  body.page-case .content-two-col__main p { max-width: 100%; }
  body.page-case .content-two-col__main h3 { max-width: 100%; }
  /* Drop the landscape ratio on narrow viewports — let the content drive
     height, otherwise the title clips. */
  body.page-case .breaker {
    aspect-ratio: auto;
    min-height: 70vh;
  }
  body.page-case .breaker__title {
    max-width: 16ch;
    font-size: clamp(1.5rem, 4vw + 0.5rem, 2rem);
    padding-inline: var(--space-3);
  }
  body.page-case .breaker__body { padding-inline: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE: RESULTATER — scoped refinements to match Figma frame 1012:1911
   Frame 1920 × 10298.
   Sections: hero, case-stack, tilfredshed, sådan virker det,
             testimonials, breaker.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero — Figma pixel-perfect: title 60/63 GT Sectra, lede 20/20 Inst. Sans
   opacity 0.5. Title at y=446 from page top on 1920 ref (= nav 56 + ~390 pad). */
body.page-resultater .page-hero {
  padding-top: clamp(5rem, 20.31vw, 24.375rem);     /* 390 px @ 1920 (after nav) */
  padding-bottom: clamp(4rem, 9.11vw, 10.9375rem);  /* 175 px @ 1920 */
  text-align: center;
}
/* Title/lede sizes match the Programmer hero exactly — Martin (Loom @ 4:21):
   "samme størrelse overskrift, samme størrelse tekst som på programmer". */
body.page-resultater .page-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);   /* 36 → 60, = programmer */
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: clamp(20ch, 57.48vw, 1104px);
  margin-inline: auto;
}
body.page-resultater .page-hero__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); /* 13 → 15, = programmer */
  line-height: 1.5;
  letter-spacing: -0.01em;
  opacity: 1;
  color: var(--color-text-soft);
  max-width: clamp(280px, 33.96vw, 652px);
  margin-inline: auto;
  margin-top: clamp(1rem, 1.98vw, 2.375rem);         /* 38 px @ 1920 */
}

/* ── Case stack — Figma pixel-perfect (1920 ref)
   Layout: [label 13.28% | text 49.69% | images 37.03%]
   Text: GT Sectra Book 40/40 for "Nike" + body, Instrument Sans 20/20 for
   label and "Læs mere".  Each image is 691×691, 36 px gap between. */
body.page-resultater .case-stack {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  body.page-resultater .case-stack {
    grid-template-columns: 13.28% 49.69% 37.03%;
    column-gap: 0;
    align-items: start;
  }
}
body.page-resultater .case-stack__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);          /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rf-black);
}
/* Sticky text wrapper — sits in col 2 and stays at top while images scroll
   past in col 3. All 3 texts share one grid cell so the wrapper auto-sizes
   to the tallest; only the active text is visible at a time. */
body.page-resultater .case-stack__text-wrapper {
  position: sticky;
  /* Sticky top accounts for the sticky site-nav (~56) plus breathing room */
  top: clamp(64px, 5vw, 96px);
  align-self: start;
  display: grid;
  grid-template-areas: "stack";
}
body.page-resultater .case-stack__text {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
body.page-resultater .case-stack__text.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  body.page-resultater .case-stack__text {
    transition: none;
  }
}
/* On mobile (where case-stack stacks to 1-col), don't stick — let the text
   sit naturally below each image like a normal article flow. */
@media (max-width: 1023px) {
  body.page-resultater .case-stack__text-wrapper {
    position: static;
    display: block;
  }
  body.page-resultater .case-stack__text {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-bottom: var(--space-5);
  }
}
body.page-resultater .case-stack__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);              /* 40 px @ 1920 */
  line-height: clamp(1.5rem, 2.083vw, 2.5rem);            /* 40 px @ 1920 */
  letter-spacing: -0.01em;
  color: var(--rf-black);
  margin: 0;
}
body.page-resultater .case-stack__body {
  font-family: var(--font-serif);   /* GT Sectra Book — same as title */
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);              /* 40 px @ 1920 */
  line-height: clamp(1.5rem, 2.083vw, 2.5rem);            /* 40 px @ 1920 */
  letter-spacing: -0.01em;
  color: var(--rf-black);
  max-width: none;
  /* Figma: one empty 40-line between "Nike" and body */
  margin: clamp(1.5rem, 2.083vw, 2.5rem) 0 0 0;
}
body.page-resultater .case-stack__text .link-arrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);          /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rf-black);
  /* Figma: 55 px gap from body bottom to "Læs mere" */
  margin-top: clamp(1.5rem, 2.86vw, 3.4375rem);
  align-self: flex-start;
}
body.page-resultater .case-stack__items {
  max-width: none;
  justify-self: stretch;
  gap: clamp(15px, 1.875vw, 36px);                        /* 36 px @ 1920 */
}

/* ── Tilfredshed — Figma pixel-perfect (1920 ref)
   Layout: label at x=44, heading at x=487 w=970, body at x=497 w=450.
   Heading: GT Sectra Book 60/60. Body: Instrument Sans 20/25, opacity 1. */
@media (min-width: 768px) {
  body.page-resultater .section--soft .section__grid {
    grid-template-columns: 24.29% 75.71%;
    column-gap: 0;
    align-items: start;
  }
}
body.page-resultater .section--soft .section-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
}
body.page-resultater #tilfredshed-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 3.125vw, 3.75rem);          /* 60 px @ 1920 */
  line-height: clamp(2rem, 3.125vw, 3.75rem);        /* 60 px @ 1920 */
  letter-spacing: 0;
  max-width: clamp(20ch, 50.52vw, 970px);            /* 970 @ 1920 */
  margin: 0;
  color: var(--rf-black);
}

/* ── "Sådan virker det" — Figma pixel-perfect (1920 ref)
   Layout: label at x=47, heading at x=730 w=713, 3 tiles at x=730 each
   454.5×454.5 with 12 px gap. Last tile overflows viewport.
   Tiles: bg #c4d9ba. Index Instrument Sans 30/30 +0.9px tracking.
   Title Instrument Sans 30/33 +0.9px tracking, --rf-black. */
@media (min-width: 768px) {
  body.page-resultater section[aria-labelledby="how-works-title"] .section__grid {
    grid-template-columns: 37.5% 62.5%;
    column-gap: 0;
    align-items: start;
  }
}
body.page-resultater #how-works-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);          /* 40 px @ 1920 */
  line-height: clamp(1.5rem, 2.083vw, 2.5rem);
  letter-spacing: 0;
  color: var(--rf-black);
  max-width: clamp(20ch, 37.14vw, 713px);
  margin: 0;
}
body.page-resultater section[aria-labelledby="how-works-title"] .section-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);      /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rf-black);
}

body.page-resultater .numbered-grid {
  /* Shift right so first tile aligns with heading at x=730 @ 1920 (= 35.94 vw
     from content-area left, after our 40-px gutter) */
  margin-left: clamp(0px, 35.94vw, 43.125rem);        /* 690 @ 1920 */
  margin-top: clamp(2rem, 6vw, 7rem);                 /* gap from heading to tiles */
  display: grid;
  grid-template-columns: repeat(3, clamp(180px, 23.67vw, 28.4rem));   /* 454.5 @ 1920 */
  gap: clamp(6px, 0.625vw, 12px);                     /* 12 px @ 1920 */
  overflow: visible;
}
body.page-resultater .numbered-tile {
  background: var(--rf-green-02);                                /* --rf-green-02 */
  color: var(--rf-black);
  aspect-ratio: 1 / 1;
  /* Figma: index at x=30, y=26 inside tile; title at x=27, y=91 */
  padding: clamp(0.875rem, 1.354vw, 1.625rem)         /* 26 px top @ 1920 */
           clamp(0.875rem, 1.406vw, 1.6875rem);       /* 27 px right/left */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(1rem, 1.77vw, 2.125rem);                 /* 34 px @ 1920 */
}
body.page-resultater .numbered-tile__index {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5625vw, 1.875rem);     /* 30 px @ 1920 */
  line-height: 1;
  letter-spacing: 0.03em;                             /* Figma +0.9 on 30 */
  color: var(--rf-black);
  opacity: 1;
  margin: 0;
}
body.page-resultater .numbered-tile__title {
  font-family: var(--font-sans);                      /* NOT serif */
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5625vw, 1.875rem);     /* 30 px @ 1920 */
  line-height: clamp(1.25rem, 1.719vw, 2.0625rem);    /* 33 px @ 1920 */
  letter-spacing: 0.03em;
  color: var(--rf-black);
  margin: 0;
}

/* ── Testimonials — Figma pixel-perfect (1920 ref) ─────────────────
   Layout same as programmer page but with TWO small thumbs (234×275) instead
   of one larger thumb. Figma: active 555×652 at x=974; thumbs 234×275. */
body.page-resultater .testimonials {
  padding-block: clamp(3rem, 3.13vw, 3.75rem) clamp(4rem, 6.25vw, 7.5rem);
  background: var(--color-bg);
}
body.page-resultater .testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  /* Figma cols: 25.99 / 24.74 / 49.27 (0-499 / 499-974 / 974-1920) */
  body.page-resultater .testimonials__grid {
    grid-template-columns: 25.99% 24.74% 49.27%;
    column-gap: 0;
    align-items: start;
    row-gap: 0;
  }
}
body.page-resultater .testimonials__head {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
body.page-resultater .testimonials__dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
body.page-resultater .testimonials__dot {
  width: 44px;
  height: 44px;
  background: transparent;
  position: relative;
  flex: 0 0 44px;
}
body.page-resultater .testimonials__label {
  margin-left: clamp(0.625rem, 1.094vw, 1.3125rem);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body.page-resultater .testimonials__quotes {
  position: relative;
  min-height: 0;
  max-width: 100%;
  align-self: start;
}
body.page-resultater .testimonials__quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3.6458vw, 4.375rem);            /* 70 px @ 1920 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
body.page-resultater .testimonials__quote.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
body.page-resultater .testimonials__byline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}
body.page-resultater .testimonials__byline strong {
  display: block;
  font-weight: 400;
  margin: 0;
  width: auto;
}
body.page-resultater .testimonials__byline span {
  display: block;
  color: var(--color-text-soft);
}
body.page-resultater .testimonials__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: none;
  color: var(--color-text);
  border: 0;
  padding: 0;
  quotes: none;
}

/* Photos: active large + two small thumbs (234×275). */
body.page-resultater .testimonials__photos {
  display: flex;
  gap: clamp(0.5rem, 0.94vw, 1.25rem);                /* ~18 px @ 1920 */
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: auto;
  overflow: visible;
}
body.page-resultater .testimonials__photo,
body.page-resultater .testimonials__photo.is-active {
  border: 0;
  padding: 0;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: flex-start;
  height: auto;
  aspect-ratio: 234 / 275;
  transition:
    width 400ms var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
/* Active 555×652 @ 1920 → 28.91vw, max 34.7rem */
body.page-resultater .testimonials__photo.is-active {
  width: clamp(16rem, 28.9vw, 34.7rem);
  opacity: 1;
  order: 0;
}
/* Thumb 234×275 @ 1920 → 12.19vw, max 14.625rem */
body.page-resultater .testimonials__photo {
  width: clamp(6rem, 12.19vw, 14.625rem);
  opacity: 0.95;
  order: 1;
}
body.page-resultater .testimonials__photo:hover { opacity: 1; }
body.page-resultater .testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Uddybning breaker — Figma pixel-perfect (1920 ref)
   Section height 2977. Image 183 fills section (full-bleed) with darken
   overlay. Content: small label + small subhead on row 1, big serif quote
   on row 2.  Title at y=7066, body at y=7378 → gap 312. */
body.page-resultater .breaker {
  /* Compact section sized to fit the content with image as full bleed.
     Was 2977 (Figma) — too much black above/below. Now ~1000 @ 1920. */
  min-height: clamp(28rem, 52vw, 62.5rem);
  place-items: start stretch;
  text-align: left;
  position: relative;
  /* Comfortable top padding so label/title sit just below the top edge */
  padding-top: clamp(4rem, 5.21vw, 6.25rem);   /* 100 @ 1920 */
  background: var(--rf-pure-black);
  overflow: hidden;
}
/* Image fills the whole section (full-bleed), darkened by ::after */
body.page-resultater .breaker > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  display: block;
}
body.page-resultater .breaker > picture > img,
body.page-resultater .breaker__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  display: block;
  background: transparent;
}
body.page-resultater .breaker__content {
  /* Don't let .breaker's place-items: stretch stretch us vertically */
  align-self: start;
  justify-self: stretch;
  text-align: left;
  width: 100%;
  display: grid;
  /* Label col ends at x=400 (= 19.57 % of 1920 content). */
  grid-template-columns: 19.57% 80.43%;
  grid-template-rows: min-content min-content;
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  align-content: start;
  padding-block: 0;
}
body.page-resultater .breaker__content > .section-label {
  position: static;
  text-align: left;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);          /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Small subhead "Vores succes afhænger af jeres" — Instrument Sans 20/20 */
body.page-resultater .breaker__title {
  text-align: left;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);          /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: none;
  grid-column: 2;
  grid-row: 1;
  color: var(--color-text-invert);
}
/* Big serif quote — GT Sectra Book 41.6/45.8 */
body.page-resultater .breaker__body {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 2.167vw, 2.6rem);              /* 41.615 px @ 1920 */
  line-height: clamp(1.625rem, 2.384vw, 2.861rem);        /* 45.777 px @ 1920 */
  letter-spacing: -0.01em;
  /* Compact gap from title (was 312, too much for a 1000-tall section) */
  margin-top: clamp(2rem, 8vw, 9.5rem);                   /* 154 @ 1920 */
  grid-column: 2;
  grid-row: 2;
  max-width: clamp(280px, 53.13vw, 63.75rem);             /* 1020 px @ 1920 */
  color: var(--color-text-invert);
}

body.page-resultater .tilfredshed-intro {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  line-height: clamp(1.0625rem, 1.302vw, 1.5625rem); /* 25 px @ 1920 */
  letter-spacing: -0.01em;
  /* Figma: heading bottom y≈3496 (2 lines × 60), body top y=3622 → gap 126 */
  margin-top: clamp(2rem, 6.56vw, 7.875rem);
  max-width: clamp(280px, 23.44vw, 450px);            /* 450 @ 1920 */
  color: var(--rf-black);
}

/* Tilfredshed chart — sized to Figma image 184 (1406×733 @ 1920) */
body.page-resultater .tilfredshed-chart {
  max-width: clamp(280px, 73.23vw, 87.875rem);        /* 1406 @ 1920 */
  margin-inline: auto;
  min-height: clamp(280px, 38.18vw, 45.8125rem);      /* 733 @ 1920 */
  padding: clamp(1rem, 2.03vw, 2.4375rem)             /* 39 px top @ 1920 */
           clamp(1rem, 3.23vw, 3.875rem);             /* 62 px left/right */
}
body.page-resultater .tilfredshed-chart__stat-label {
  font-family: var(--font-sans);
  font-weight: 500;                                   /* Figma: Medium */
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);      /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rf-green-05);
  opacity: 1;                                       /* Figma exact */
}
body.page-resultater .tilfredshed-chart__stat-value {
  font-family: var(--font-sans);
  font-weight: 500;                                   /* Figma: Medium */
  font-size: clamp(1.75rem, 2.778vw, 3.333rem);       /* 53.333 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rf-black);                             /* #262626, not pure black */
}
body.page-resultater .tilfredshed-chart__stat-icon {
  color: var(--rf-black);
}

/* Darkening overlay over the full image so text stays legible. */
body.page-resultater .breaker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  z-index: 1;
  pointer-events: none;
}
body.page-resultater .breaker__content {
  position: relative;
  z-index: 2;
}

/* ── Mobile tweaks ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page-resultater .case-stack__items {
    grid-template-columns: 1fr;
  }
  /* "Sådan virker det" tiles: horizontally scrollable on mobile/touch.
     Tiles stay square, snap to start, hidden scrollbar, padding so first
     tile sits flush with content gutter. */
  body.page-resultater .numbered-grid {
    margin-left: 0;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    /* Negative margin compensates for container padding so scroll fills viewport */
    margin-inline: calc(-1 * var(--gutter));
    gap: 12px;
  }
  body.page-resultater .numbered-grid::-webkit-scrollbar {
    display: none;
  }
  body.page-resultater .numbered-tile {
    flex: 0 0 auto;
    width: min(80vw, 320px);
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    min-height: auto;
  }
  body.page-resultater .breaker__content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-4);
  }
  body.page-resultater .breaker__content > .breaker__title,
  body.page-resultater .breaker__content > p,
  body.page-resultater .breaker__content > .section-label {
    grid-column: 1;
    /* Desktop pins the label & subhead both to row 1 (different columns). On a
       single-column grid that lands them in the SAME cell — they overlapped.
       Reset to auto so they stack in source order. */
    grid-row: auto;
  }
  body.page-resultater .testimonials__photos {
    flex-wrap: wrap;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Home page calibration (page-home scoped only).
   Tunes the page to better match the cached Figma reference at 1440 width
   without disturbing rules used by other pages.
   ──────────────────────────────────────────────────────────────────── */

/* Hero: title sits closer to nav top, with calmer bottom spacing. */
body.page-home .hero {
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
body.page-home .hero__title {
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4.25rem);  /* 28 → 68 */
}

/* Hero video — keep the original scroll-driven scaling.
   Defaults from the global block handle this on desktop:
     .hero-video        height: 220vh   (scroll runway)
     .hero-video__viewport  position: sticky, top: nav-height
     .hero-video__frame  base 966x503, scaled via JS on scroll
   No page-scoped overrides at this breakpoint — leave defaults. */

/* Om os: lysegrå baggrund som pause fra det hvide (Martin, Loom @ 0:57),
   calmer padding, proportional statement size. */
body.page-home .section--om-os {
  padding-block: clamp(3rem, 2rem + 5vw, 7rem);
  background-color: var(--rf-bone);
}
body.page-home .section--om-os .section__statement {
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3.5rem);  /* 26 → 56 */
  line-height: 1.1;
  max-width: 1080px;
}

/* Programmer rows: nudge typography to feel proportional at 1440. */
body.page-home .program-row {
  padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
}
body.page-home .program-row__title {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
body.page-home .program-row__desc {
  max-width: 40ch;
  font-size: var(--fs-body-sm);
}

/* Testimonials — Figma pixel-perfect (frame 904:2769, 1920 ref).
   Layout: 3-col grid [label | byline+quote | photos], all top-aligned.
   Figma exact positions:
     dots at x=20/35/50 (8.5 sq), label at x=79, byline at x=495,
     quote at x=495 w=392, active photo at x=970 w=598 h=653,
     thumb 1 at x=1586 w=234, thumb 2 at x=1837 w=234 (overflows ~151 px). */
body.page-home .testimonials {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 768px) {
  /* Cols proportional to Figma frame: 25.78 / 24.74 / 49.48 (0–495 / 495–970 / 970–1920) */
  body.page-home .testimonials__grid {
    grid-template-columns: 25.78% 24.74% 49.48%;
    column-gap: 0;
    align-items: start;
    row-gap: 0;
  }
}
/* Defeat inherited align-items: end on .testimonials__head — keep label at
   the left edge of column 1, not pushed right against the col boundary. */
body.page-home .testimonials__head {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
body.page-home .testimonials__dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
body.page-home .testimonials__dot {
  width: 44px;
  height: 44px;
  background: transparent;
  position: relative;
  flex: 0 0 44px;
}
body.page-home .testimonials__label {
  margin-left: clamp(0.625rem, 1.094vw, 1.3125rem);   /* dot-edge to label ≈ 21 px @ 1920 */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);       /* 20 px @ 1920 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body.page-home .testimonials__quotes {
  position: relative;
  min-height: 0;
  max-width: 100%;
  align-self: start;
}
body.page-home .testimonials__quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3.6458vw, 4.375rem);             /* 70 px byline→quote */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
body.page-home .testimonials__quote.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
body.page-home .testimonials__byline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}
body.page-home .testimonials__byline strong {
  display: block;
  font-weight: 400;
  margin: 0;
  width: auto;          /* wraps "Mads"/"Lykke" on separate lines */
}
body.page-home .testimonials__byline span {
  display: block;
  color: var(--color-text-soft);
}
body.page-home .testimonials__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: none;
  color: var(--color-text);
  border: 0;
  padding: 0;
  quotes: none;
}
/* Photos: active + two thumbs, left-aligned so the row flows naturally
   from the column's left edge. Last thumb's right edge falls past viewport
   (Figma intent); html/body overflow-x: clip prevents a scrollbar. */
body.page-home .testimonials__photos {
  display: flex;
  gap: clamp(0.5rem, 0.94vw, 1.25rem);                 /* ~18 px @ 1920 */
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: auto;
  overflow: visible;
}
body.page-home .testimonials__photo,
body.page-home .testimonials__photo.is-active {
  border: 0;
  padding: 0;
  background: var(--color-bg-stone);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: flex-start;
  height: auto;
  aspect-ratio: 234 / 275;
  transition:
    width 400ms var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
/* Active 598 × 653 → 31.15 vw, max 37.375 rem. Aspect 598/653 ≈ 0.916
   (different from the thumbs' 234/275 ≈ 0.851), so override the base. */
body.page-home .testimonials__photo.is-active {
  width: clamp(16rem, 31.15vw, 37.375rem);
  aspect-ratio: 598 / 653;
  opacity: 1;
  order: 0;
}
/* Thumb 234 × 275 → 12.19 vw, max 14.625 rem */
body.page-home .testimonials__photo {
  width: clamp(6rem, 12.19vw, 14.625rem);
  opacity: 0.95;
  order: 1;
}
body.page-home .testimonials__photo:hover { opacity: 1; }
body.page-home .testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Breaker — Figma shows a near-full-viewport blue band. */
body.page-home .breaker {
  min-height: 100svh;
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  overflow: hidden;   /* clip the oversized .breaker__media below */
}
/* The source PNG (1280×1600) has thin white/grey borders baked in; at
   object-fit: cover those borders end up visible at the viewport edges.
   Inflate the image 5 % beyond the container so the borders fall outside
   the (now overflow: hidden) breaker. */
body.page-home .breaker__media {
  width: calc(100% + 6vw);
  height: calc(100% + 6vw);
  inset: -3vw -3vw -3vw -3vw;
  max-width: none;
  object-fit: cover;
}
body.page-home .breaker__title {
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);   /* 20 → 36 */
  max-width: 22ch;
  text-align: center;
  margin-inline: auto;
}

/* Cases preview: match Figma — modest gap, comfortably-sized intro column. */
body.page-home .cases-preview__grid {
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}
body.page-home .cases-preview__intro {
  gap: var(--space-4);
}
body.page-home .cases-preview__body {
  font-size: var(--fs-body);
  max-width: 38ch;
}

/* Insights: match Figma — neutral background, slightly tighter tile aspect. */
body.page-home .section--insights {
  background-color: var(--color-bg);
  padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}
body.page-home .insight-tile {
  height: 100%;
}
body.page-home .insight-tile__title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
body.page-home .insight-tile__body {
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--color-text);
}
body.page-home .insight-tile__media {
  aspect-ratio: 4 / 5;
}
/* Pin each tile's <hr> to the bottom so the rules align across the row
   regardless of how long each excerpt is. */
body.page-home .insight-tile hr {
  margin-top: auto;
}
body.page-home .section--insights .link-arrow {
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Mobile: relax the hero-video runway, shrink testimonial active photo,
   and ensure the hero title can wrap cleanly without horizontal overflow. */
@media (max-width: 767px) {
  body.page-home .hero {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1rem, 0.75rem + 1vw, 2rem);
  }
  body.page-home .hero__title {
    font-size: clamp(1.625rem, 6vw + 0.5rem, 2.5rem);
    max-width: 14ch;
    line-height: 1.12;
  }
  body.page-home .hero-video {
    height: auto;
  }
  body.page-home .hero-video__viewport {
    position: static;
    height: auto;
    padding-block: var(--space-7);
  }
  body.page-home .hero-video__frame {
    transform: none;
    width: 100%;
  }
  body.page-home .testimonials__photo.is-active {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  body.page-home .testimonials__photo {
    width: 4rem;
  }
  body.page-home .section--om-os .section__statement {
    font-size: 1.125rem;
    max-width: 100%;
    line-height: 1.3;
  }
  body.page-home .breaker__title {
    font-size: clamp(1.125rem, 4vw + 0.25rem, 1.625rem);
    max-width: 18ch;
  }
  body.page-home .cases-preview__stack {
    margin-top: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: programmer-afklar  — Figma calibration
   Source of truth: /tmp/refyne-shots/figma/programmer-afklar.png
   All rules scoped under body.page-programmer-afklar.
   ════════════════════════════════════════════════════════════════════ */

/* Hero — orange silhouette image replaces gray placeholder */
body.page-programmer-afklar .page-hero {
  padding-block: clamp(4rem, 3rem + 4vw, 7rem) clamp(2rem, 1.5rem + 2vw, 4rem);
}
body.page-programmer-afklar .page-hero__title {
  /* Mobile-first: cap width and allow natural whitespace wrapping. */
  max-width: 18ch;
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
  line-height: 1.1;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}
@media (min-width: 768px) {
  body.page-programmer-afklar .page-hero__title {
    /* Desktop: wider, and the explicit <br class="hero-br-desktop">
       in markup forces the Figma break after "performance".
       NOTE: superseded by the later afklar hero block (~line 5440). */
    max-width: 36ch;
    text-wrap: wrap;
  }
}
/* Desktop-only forced break inside the hero title to match Figma's
   "Forstå hvad jeres performance / faktisk leverer" layout. */
body.page-programmer-afklar .hero-br-desktop { display: none; }
@media (min-width: 768px) {
  body.page-programmer-afklar .hero-br-desktop { display: inline; }
}
body.page-programmer-afklar .page-hero__placeholder {
  position: relative;
  overflow: hidden;
  background: var(--rf-paper);
  isolation: isolate;
}
body.page-programmer-afklar .page-hero__placeholder picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
body.page-programmer-afklar .page-hero__placeholder picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-programmer-afklar .page-hero__placeholder .hero-video__chip {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Fordele two-col — label + 3 bullets + logos on the LEFT */
body.page-programmer-afklar .content-two-col { align-items: start; }
@media (min-width: 1024px) {
  body.page-programmer-afklar .content-two-col {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(3rem, 2rem + 4vw, 7rem);
  }
}
body.page-programmer-afklar .content-two-col__main {
  font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
}
body.page-programmer-afklar .content-two-col__main p { max-width: 32ch; }

/* Logo strip */
body.page-programmer-afklar .logo-strip {
  gap: var(--space-4);
  margin-top: var(--space-3);
}
body.page-programmer-afklar .logo-strip img {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  object-fit: contain;
  padding: 0.35rem;
}

/* Numbered grid — 3 square paper cards, number top, title bottom */
body.page-programmer-afklar .numbered-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  body.page-programmer-afklar .numbered-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body.page-programmer-afklar .numbered-tile {
  background: var(--rf-paper);
  aspect-ratio: 1 / 1;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
body.page-programmer-afklar .numbered-tile__index {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
  color: var(--color-text);
  opacity: 0.7;
}
body.page-programmer-afklar .numbered-tile__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
  /* Title sits just above the body copy, both pinned to the bottom. */
  margin-top: auto;
}
body.page-programmer-afklar .numbered-tile__body {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--color-text-soft);
  margin: 0;
  max-width: 30ch;
}

/* Breaker — orange full-bleed with centered serif headline + body.
   NOTE: use a fixed clamp height (not vh) so tall headless screenshots
   don't balloon this band to dominate the page. */
body.page-programmer-afklar .breaker {
  min-height: 0;
  height: auto;
  padding-block: clamp(6rem, 4rem + 6vw, 11rem);
}
body.page-programmer-afklar .breaker::after {
  background: rgb(0 0 0 / 45%);
}
body.page-programmer-afklar .breaker__content {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}
body.page-programmer-afklar .breaker__content > .section-label {
  position: absolute;
  top: var(--space-5);
  left: var(--gutter);
  margin: 0;
}
body.page-programmer-afklar .breaker__title {
  text-align: center;
  max-width: 28ch;
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Feature tiles — green panels with abstract line drawings inside */
body.page-programmer-afklar .feature-tiles {
  gap: var(--space-5);
  margin-top: 0;
}
body.page-programmer-afklar .feature-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: var(--space-5);
  background: var(--rf-green-02);
  color: var(--rf-green-05);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
body.page-programmer-afklar .feature-tile::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M30 120 C 50 60, 90 50, 110 90 S 170 130, 170 80'/><path d='M40 140 C 70 100, 100 110, 130 130'/><path d='M60 160 C 90 130, 130 150, 160 120'/><circle cx='95' cy='95' r='3' fill='%234C593F'/></svg>");
  opacity: 0.85;
  pointer-events: none;
}
body.page-programmer-afklar .feature-tile:nth-child(2)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M30 100 Q 100 30, 170 100'/><path d='M30 120 Q 100 60, 170 120'/><path d='M30 140 Q 100 90, 170 140'/><circle cx='100' cy='100' r='3' fill='%234C593F'/></svg>");
}
body.page-programmer-afklar .feature-tile:nth-child(3)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M40 170 L 80 110 L 120 140 L 170 60'/><circle cx='80' cy='110' r='3' fill='%234C593F'/><circle cx='120' cy='140' r='3' fill='%234C593F'/><circle cx='170' cy='60' r='3' fill='%234C593F'/><circle cx='40' cy='170' r='3' fill='%234C593F'/></svg>");
}
body.page-programmer-afklar .feature-tile__label {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body-sm);
}

/* Compare-3 — vertical rules between columns on desktop */
body.page-programmer-afklar .compare-3 {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-block: var(--space-9);
}
@media (min-width: 768px) {
  body.page-programmer-afklar .compare-3 { gap: 0; }
  body.page-programmer-afklar .compare-3__col {
    padding-inline: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  body.page-programmer-afklar .compare-3__col:first-child { padding-left: 0; }
  body.page-programmer-afklar .compare-3__col:last-child  { padding-right: 0; }
  body.page-programmer-afklar .compare-3__col + .compare-3__col {
    border-left: 1px solid var(--color-rule);
  }
}
body.page-programmer-afklar .compare-3__col h3 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  margin-bottom: var(--space-4);
}
body.page-programmer-afklar .compare-3__col ul {
  font-size: var(--fs-body-sm);
  gap: var(--space-3);
}
body.page-programmer-afklar .compare-3__col p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
  max-width: 30ch;
}

/* "Flere programmer" header */
body.page-programmer-afklar .section--programmer {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
body.page-programmer-afklar .section--programmer .section__grid {
  margin-bottom: var(--space-7);
}

/* Mobile safety */
@media (max-width: 767px) {
  body.page-programmer-afklar .page-hero__title {
    font-size: clamp(1.875rem, 1.5rem + 3vw, 2.5rem);
    max-width: 100%;
    /* Allow normal word wrapping on narrow screens. */
    overflow-wrap: break-word;
    word-break: normal;
  }
  body.page-programmer-afklar .content-two-col__main {
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  }
  body.page-programmer-afklar .breaker {
    min-height: 0;
    padding-block: clamp(4rem, 3rem + 4vw, 6rem);
  }
  body.page-programmer-afklar .feature-tile {
    aspect-ratio: 1 / 0.85;
  }
}

/* ────────────────────────────────────────────────────────────────────
   OM OS — page-scoped overrides
   All rules below are prefixed with body.page-om-os.
   ──────────────────────────────────────────────────────────────────── */
body.page-om-os .page-hero {
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem) clamp(2rem, 1.5rem + 3vw, 4.5rem);
}
/* Figma hero (904:3029): "Om os" label (Instrument Sans 20/20, with bullet)
   in col 1, "Det hele bygger på nysgerrighed" sub-heading (20/20 Inst Sans,
   NO bullet) in col 2 row 1, big GT Sectra Book body (41.6/45.78) in col 2
   row 2. */
body.page-om-os .page-hero__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);   /* 15 → 20 px */
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: none;
  margin: 0;
  display: block;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}
/* Explicitly REMOVE the bullet pseudo-element that previous CSS added to
   the title (Figma has no bullet on this line — only on the "Om os" label). */
body.page-om-os .page-hero__title::before {
  content: none;
}
/* Hero body — Figma: GT Sectra Book 41.6 / 45.777, tracking −0.01 em. */
body.page-om-os .page-hero__lede {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 0.6rem + 2.17vw, 2.6rem);       /* 24 → 41.6 px */
  line-height: calc(45.777 / 41.615);                       /* ≈ 1.10 */
  letter-spacing: -0.01em;
  margin-top: clamp(1.5rem, 1rem + 2.5vw, 4.125rem);        /* ~ figma 99 px gap */
  max-width: 54ch;                                          /* ≈ Figma 862 px @ 41.6 */
  color: var(--color-text);
}
body.page-om-os .page-hero__grid {
  gap: var(--space-7);
}
@media (min-width: 768px) {
  body.page-om-os .page-hero__grid {
    grid-template-columns: minmax(160px, 1fr) minmax(0, 3.4fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}
body.page-om-os .section--approach {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
body.page-om-os .approach__head {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  body.page-om-os .approach__head {
    grid-template-columns: minmax(160px, 1fr) minmax(0, 3.4fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}
body.page-om-os .approach__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma 904:3061: 60 / 60 GT Sectra Book. */
  font-size: clamp(2rem, 1rem + 3.125vw, 3.75rem);   /* 32 → 60 px */
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
body.page-om-os .approach__lede {
  font-family: var(--font-sans);
  /* En lille smule mindre end Figmas 20px, så den passer bedre til
     overskriften (Martin, Loom @ 7:41). */
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.0625rem);   /* 15 → 17 px */
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 56ch;
  margin: 0;
  color: var(--color-text);
}
body.page-om-os .approach__tiles {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
}
body.page-om-os .approach__tile {
  background: var(--rf-green-03);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 460 / 420;
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  border-radius: var(--radius-sm);
}
/* Soft leaf silhouette: solid darker chartreuse blob matching the Figma
   reference. The on-disk image-186.png is blank so this stays CSS-only. */
body.page-om-os .approach__tile::before {
  content: none;
}
body.page-om-os .approach__tile::after {
  content: none;
}
body.page-om-os .approach__tile .feature-tile__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--rf-green-05);
  align-items: center;
}
body.page-om-os .approach__tile .feature-tile__label::before {
  background: var(--rf-green-04);
}
body.page-om-os .approach__compare {
  border-top: 0;
  border-bottom: 0;
  padding-block: 0;
  margin-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
/* Approach 3-column block — Figma: h3 is GT Sectra Regular 30/30
   (NOT a bulleted small label), body is Instrument Sans 20/25, and each
   column has an HR rule beneath the paragraph (Figma Line 11/12/13). */
body.page-om-os .approach__compare .compare-3__col {
  display: block;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-bottom: 1px solid var(--color-rule);
}
body.page-om-os .approach__compare .compare-3__col h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);                          /* Figma: GT Sectra Regular */
  font-size: clamp(1.25rem, 0.9rem + 1.04vw, 1.875rem);   /* 20 → 30 px */
  line-height: 1.0;
  letter-spacing: 0.03em;                    /* Figma: tracking 0.9 on 30 */
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;   /* heading → body gap */
  display: block;
  color: var(--color-text);
}
/* No bullet on Approach headings */
body.page-om-os .approach__compare .compare-3__col h3::before {
  content: none;
}
body.page-om-os .approach__compare .compare-3__col p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);    /* 16 → 20 px */
  line-height: 1.25;                                   /* 25/20 */
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: none;
  margin: 0;
}
body.page-om-os .kultur {
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
  background: var(--rf-green-04);
  color: var(--color-text-invert);
}
body.page-om-os .kultur__top {
  display: grid;
  gap: var(--space-7);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
/* Heading "Her bliver man ikke færdig med at lære" — Figma: 80/80 GT Sectra
   Book, white, centred. */
body.page-om-os .kultur__heading {
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2.25rem, 1rem + 4.167vw, 5rem);   /* 36 → 80 */
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--color-text-invert);
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}
body.page-om-os .kultur__label {
  justify-self: start;
  color: var(--color-text-invert);
}
body.page-om-os .kultur__label .section-label__bullet {
  background: var(--color-text-invert);
}

/* Carousel — Figma layout (slide 904:3072): symmetric scaling, 7 slots
   sized 197 / 277 / 343 / 465 / 343 / 277 / 197 (centre largest), all
   top-aligned.  The outermost two slots are clipped at the viewport
   edges (only a sliver visible) for a "more-images-incoming" peek.
   JS module rotates which image sits in which slot as the user scrolls. */
body.page-om-os .kultur__strip {
  position: relative;
  width: 100%;
  height: clamp(220px, 24.21vw, 29.0625rem);     /* tallest tile (465 @ 1920) */
  margin-block: clamp(2rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}
body.page-om-os .kultur__strip picture {
  position: absolute;
  top: 0;                                         /* TOP-ALIGNED */
  left: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;                               /* clips img zoom below */
  border-radius: var(--radius-sm);
  /* Only OPACITY transitions during a rotation — width / transform changes
     are made while the picture is faded out, so the user never sees an
     image flying across the strip past its neighbours.  Duration must
     stay in sync with FADE_MS in kultur-carousel.js. */
  transition: opacity 240ms var(--ease-out);
  will-change: opacity;
}
/* (Fade-out rule defined AFTER the slot rules below so it wins specificity.) */

/* Inner img is zoomed ~25 % beyond its picture box and re-centred slightly
   high — Figma uses the same trick (h-[125%]+offset, see node 904:3072) to
   crop the white studio backdrops on the portrait photographs.  Without
   this, photos like image-168 / 171 / 175 show a thick white border
   around the subject that reads as a grey frame on the dark-green
   section background. */
body.page-om-os .kultur__strip picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.28);
  transform-origin: center 35%;
  display: block;
}

/* Slot sizes + centre positions derived from Figma 904:3072:
   slot centres at x ≈ -51 / 204 / 533 / 957 (viewport centre) / 1381 /
   1697 / 1969 on the 1920 frame.  Offsets from container 50% expressed
   in vw:  −52.6 / −39.4 / −22.3 / 0 / +22.3 / +39.4 / +52.6.  Adjacent
   slots are non-overlapping (~17 px gap); slots 0 and 6 are mostly
   off-screen so the strip "peeks" into the viewport edges. */
body.page-om-os .kultur__strip picture[data-slot="0"] {
  width: clamp(80px, 10.26vw, 12.3125rem);        /* 197 @ 1920 (clipped) */
  transform: translate3d(calc(-50% - 52.6vw), 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="1"] {
  width: clamp(110px, 14.43vw, 17.3125rem);       /* 277 @ 1920 */
  transform: translate3d(calc(-50% - 39.4vw), 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="2"] {
  width: clamp(140px, 17.86vw, 21.4375rem);       /* 343 @ 1920 */
  transform: translate3d(calc(-50% - 22.3vw), 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="3"] {
  width: clamp(180px, 24.22vw, 29.0625rem);       /* 465 @ 1920 — CENTRE */
  transform: translate3d(-50%, 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="4"] {
  width: clamp(140px, 17.86vw, 21.4375rem);
  transform: translate3d(calc(-50% + 22.3vw), 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="5"] {
  width: clamp(110px, 14.43vw, 17.3125rem);
  transform: translate3d(calc(-50% + 39.4vw), 0, 0);
}
body.page-om-os .kultur__strip picture[data-slot="6"] {
  width: clamp(80px, 10.26vw, 12.3125rem);
  transform: translate3d(calc(-50% + 52.6vw), 0, 0);
}
/* Fade-swap: when the JS module reshuffles slots, briefly fade all pictures
   to opacity 0 so the position+size changes happen invisibly, then fade
   back in.  Placed AFTER the per-slot rules to win the cascade. */
body.page-om-os .kultur__strip.is-transitioning picture[data-slot] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  body.page-om-os .kultur__strip picture { transition: none; }
}

/* Mobile: ditch the absolute-slot layout — images would heavily overlap on
   small viewports.  Switch to a horizontally-scrollable flex strip with
   uniformly-sized squares. */
@media (max-width: 767px) {
  body.page-om-os .kultur__strip {
    position: relative;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  body.page-om-os .kultur__strip::-webkit-scrollbar { display: none; }
  body.page-om-os .kultur__strip picture {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    width: min(70vw, 18rem) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
body.page-om-os .kultur__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1180px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  body.page-om-os .kultur__body {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}
/* Body subheading "Det hele bygger på nysgerrighed" — Figma: 20/20
   Instrument Sans Regular, white, NO bullet. */
body.page-om-os .kultur__body-label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);     /* 15 → 20 */
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-text-invert);
  max-width: none;
  white-space: normal;
}
body.page-om-os .kultur__body-label .section-label__bullet {
  display: none;                /* Figma has no bullet on this subheading */
}
/* Body text "Refyne er bygget..." — Figma: 41.6 / 45.77 GT Sectra Book white */
body.page-om-os .kultur__body-text {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 0.6rem + 2.17vw, 2.6rem);          /* 24 → 41.6 */
  line-height: calc(45.777 / 41.615);                          /* ≈ 1.10 */
  letter-spacing: -0.01em;
  color: var(--color-text-invert);
  max-width: 32ch;                                             /* ≈ Figma 955 px at 41.6 */
  margin: clamp(1.5rem, 1rem + 2vw, 3rem) 0 0 0;
}
body.page-om-os .testimonials {
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
}
body.page-om-os .testimonials__grid {
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
@media (min-width: 768px) {
  body.page-om-os .testimonials__grid {
    grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr) minmax(0, 2.4fr);
    align-items: start;
  }
}
body.page-om-os .testimonials__photos {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: flex-start;
}
body.page-om-os .testimonials__photo {
  width: clamp(72px, 8vw, 110px);
  aspect-ratio: 1 / 1.15;
  transition: width var(--dur-base) var(--ease-out);
}
body.page-om-os .testimonials__photo.is-active {
  width: clamp(220px, 28vw, 380px);
  aspect-ratio: 1 / 1.2;
}
body.page-om-os .testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-om-os .testimonials__byline strong {
  font-weight: var(--fw-medium);
  display: block;
  font-size: var(--fs-body);
}
body.page-om-os .testimonials__byline span {
  color: var(--color-text-soft);
  font-size: var(--fs-body-sm);
}
body.page-om-os .testimonials__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  max-width: 38ch;
  margin: 0;
}
@media (max-width: 767px) {
  /* .kultur__strip mobile layout is defined earlier (horizontal scroll-snap
     strip).  Earlier flex-wrap rule removed — it conflicted with the newer
     non-overlapping strip layout. */
  body.page-om-os .kultur__heading {
    text-align: left;
    font-size: clamp(1.75rem, 5vw + 0.75rem, 2.5rem);
    line-height: 1.15;
  }
  body.page-om-os .approach__tiles {
    grid-template-columns: 1fr;
  }
  body.page-om-os .testimonials__photos {
    flex-wrap: wrap;
  }
  body.page-om-os .testimonials__photo.is-active {
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  body.page-om-os .approach__compare {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE: Programmer-Afklar (body.page-programmer-afklar) — Figma pixel-perfect
   Source: 6FAyrz3mjFUPDilBG4wppf / frame 904:2875 (1920 × 8629)
   All rules scoped under body.page-programmer-afklar; placed last to
   override the earlier afklar block (kept above for diff context).
   1920 anchor convention: Xvw = (figma_px / 1920) * 100.
   ═══════════════════════════════════════════════════════════════════ */

/* All section labels on this page are 20 px Instrument Sans regular,
   tracking −0.2 px, per Figma. Override the global 15-16 px default. */
body.page-programmer-afklar .section-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);   /* 15 → 20 px */
  line-height: 1.0;
  letter-spacing: -0.01em;
  gap: clamp(0.375rem, 0.25rem + 0.5vw, 0.711rem);          /* ~13.7 px @ 1920 */
}
body.page-programmer-afklar .section-label__bullet {
  /* Figma 8.52 × 8.52 px square — keep size in scale on smaller viewports. */
  width: clamp(6px, 0.25rem + 0.2vw, 0.5325rem);             /* 8.52 px */
  height: clamp(6px, 0.25rem + 0.2vw, 0.5325rem);
}

/* ── Hero ─────────────────────────────────────────────────────────
   Frame nav 0-56, label x=47 y=299, H1 x=493 y=292 60/60 GT Sectra,
   image x=257 y=499 w=1405 h=732.
   Top padding inside hero needs to land label at y=299 (frame).
   Body y above hero = nav-height + page-hero padding-top + label-line-box-top.
   Figma label y=299 → 299-56(nav) = 243 px above the section TOP edge. */
body.page-programmer-afklar .page-hero {
  padding-block:
    clamp(5rem, 3rem + 9vw, 17.32rem)   /* ~80 → 277 (= 14.43vw at 1920) */
    clamp(2rem, 1rem + 2vw, 4rem);
  background: var(--color-bg);
}
/* 3-column grid: label (left), title (right, spans 2 logical cols).
   In Figma the label sits at x=47 and the title at x=493, so the gap
   between them is 446 ≈ 23.2% of frame. Right margin ≈ 437 ≈ 22.7%. */
body.page-programmer-afklar .page-hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  body.page-programmer-afklar .page-hero__grid {
    /* Figma columns @ 1920: label 0-493, title 493-1464, empty 1464-1920.
       Ratios: 493 : 971 : 456 = 1.08 : 2.13 : 1. */
    grid-template-columns: minmax(0, 493fr) minmax(0, 971fr) minmax(0, 456fr);
    column-gap: 0;
    align-items: start;
  }
  body.page-programmer-afklar .page-hero__grid > .section-label {
    grid-column: 1;
  }
  body.page-programmer-afklar .page-hero__grid > .page-hero__title {
    /* Span into the empty right-margin column too: at 1440-1919 the Figma
       971fr column is too narrow for "Forstå hvad jeres performance" at 60px,
       which wrapped the title to 3 lines — max 2 per Martin (Loom @ 2:49). */
    grid-column: 2 / -1;
  }
}
body.page-programmer-afklar .page-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 60 px / 60 px line-height */
  font-size: clamp(2rem, 1rem + 3.125vw, 3.75rem);   /* 32 → 60 */
  line-height: 1.0;
  letter-spacing: -0.0067em;                         /* −0.4 px on 60 */
  max-width: 36ch;
  margin: 0;
  color: var(--color-text);
}
@media (min-width: 768px) {
  body.page-programmer-afklar .page-hero__title {
    max-width: none;
  }
}
body.page-programmer-afklar .hero-br-desktop { display: none; }
@media (min-width: 1024px) { body.page-programmer-afklar .hero-br-desktop { display: inline; } }

/* Hero media — sits in its OWN .container with horizontal gutter.
   Figma image at x=257 / w=1405 means the image inset is 257 / 1920 = 13.39%
   each side. Our default .container is full-bleed minus 40 px gutter, so
   we add extra inline padding to hit Figma. */
body.page-programmer-afklar .page-hero__media {
  margin-top: clamp(2rem, 1rem + 3vw, 4.25rem);  /* 32 → 68 (figma: ~68) */
  padding-inline: 0;
}
@media (min-width: 1024px) {
  body.page-programmer-afklar .page-hero__media {
    padding-inline: clamp(2.5rem, 1rem + 7vw, 13.5rem);  /* up to 216 = 257-40-1 */
  }
}
body.page-programmer-afklar .page-hero__placeholder {
  position: relative;
  overflow: hidden;
  background: var(--rf-paper);
  aspect-ratio: 1405 / 732;
  border-radius: 0;
  isolation: isolate;
}
body.page-programmer-afklar .page-hero__placeholder picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
body.page-programmer-afklar .page-hero__placeholder picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-programmer-afklar .page-hero__placeholder .hero-video__chip {
  position: absolute;
  left: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Fordele intro (3-column band) ────────────────────────────────
   Figma columns @ 1920:
     col 1 (label):    x=0..495   ratio 495
     col 2 (bullets):  x=495..970 ratio 475
     col 3 (body):     x=970..1586 ratio 616
     right gutter:     x=1586..1920 ratio 334
   Body lede = 30 px / 35 px GT Sectra Book, ls −0.3 px. */
body.page-programmer-afklar .section:has(.content-two-col) {
  padding-block: clamp(3rem, 2rem + 4.7vw, 7.875rem);   /* figma section gap */
}
body.page-programmer-afklar .content-two-col {
  align-items: start;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  body.page-programmer-afklar .content-two-col {
    grid-template-columns:
      minmax(0, 495fr)   /* col 1: label */
      minmax(0, 475fr)   /* col 2: bullets + logos */
      minmax(0, 616fr)   /* col 3: body */
      minmax(0, 334fr);  /* tail gutter */
    /* Two rows: row-1 sized to the bullets (220 @ 1920 = 11.458vw) but
       allowed to grow — longer bullet copy must never overlap the logo row. */
    grid-template-rows: minmax(11.458vw, auto) auto;
    column-gap: 0;
    row-gap: 5vw;        /* ~96 px @ 1920, just below "Brugt af bl.a." */
    align-items: start;
  }
  body.page-programmer-afklar .content-two-col__side {
    display: contents;
  }
  body.page-programmer-afklar .content-two-col__side > * { align-self: start; }
  body.page-programmer-afklar .content-two-col__side > .section-label:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  body.page-programmer-afklar .content-two-col__side > div:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
  }
  body.page-programmer-afklar .content-two-col__side > div:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
  }
  /* Body lives in col 3, row 1 only (don't span — let logos sit cleanly below). */
  body.page-programmer-afklar .content-two-col__main {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
}
body.page-programmer-afklar .content-two-col__main {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 30 px / 35 px */
  font-size: clamp(1.125rem, 0.9rem + 1.0vw, 1.875rem);   /* 18 → 30 */
  line-height: 1.5;
  letter-spacing: -0.01em;                                 /* −0.3 px on 30 */
  color: var(--color-text);
}
body.page-programmer-afklar .content-two-col__main p {
  max-width: 32ch;
  margin: 0;
}
body.page-programmer-afklar .content-two-col__main p + p { margin-top: 1.25em; }

/* Middle column bullets — Figma 904:2895 = single text node, 20 px Instrument
   Sans, all lines at line-height 20 (1.0). Emphasis line in black, body line
   in #BABABA, blank line separator between bullet items. We strip default
   margins and force every block to share the same 20 px rhythm. */
body.page-programmer-afklar .content-two-col__side > div:first-of-type {
  font-family: var(--font-sans) !important;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem) !important;  /* 16→20 */
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text);
}
body.page-programmer-afklar .content-two-col__side > div:first-of-type p {
  margin: 0 !important;
  line-height: 1.5;
}
/* Add the blank-line separator between paragraphs by introducing a 20-px
   pseudo block AFTER each paragraph except the last. */
body.page-programmer-afklar .content-two-col__side > div:first-of-type p:not(:last-child)::after {
  content: "";
  display: block;
  height: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);  /* one 20-px blank line */
}
body.page-programmer-afklar .content-two-col__side > div:first-of-type strong {
  font-weight: var(--fw-regular);
  color: var(--color-text);
  display: inline;
}
body.page-programmer-afklar .content-two-col__side > div:first-of-type span {
  color: var(--color-text-soft) !important;
  display: inline;
  margin: 0 !important;
}
/* The <br> after each <strong> creates the line break we need. */
body.page-programmer-afklar .content-two-col__side > div:first-of-type br {
  line-height: inherit;
}

/* "Brugt af bl.a." + logo strip — sits below middle column.
   Figma logos: 40.93 × 40.93 squares at center-to-center 49.5 px → gap ~8.6 px. */
body.page-programmer-afklar .content-two-col__side > div:last-of-type {
  margin-top: clamp(3rem, 2rem + 4vw, 6.5rem)  !important;   /* ~104 px in Figma */
}
body.page-programmer-afklar .content-two-col__side > div:last-of-type > .section-label {
  margin: 0 0 clamp(1rem, 0.5rem + 1vw, 1.5rem) 0  !important;
}
body.page-programmer-afklar .logo-strip {
  gap: clamp(0.25rem, 0.1rem + 0.45vw, 0.5375rem);   /* 4 → 8.6 px */
  margin-top: 0;
  flex-wrap: nowrap;
}
body.page-programmer-afklar .logo-strip picture {
  flex: 0 0 auto;
}
body.page-programmer-afklar .logo-strip img {
  width: clamp(1.75rem, 1.25rem + 1.2vw, 2.5582rem);  /* up to 40.93 px */
  height: clamp(1.75rem, 1.25rem + 1.2vw, 2.5582rem);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  object-fit: contain;
  padding: 0;
}

/* ── Gennemgang (numbered tiles) ──────────────────────────────────
   Figma: section label "Gennemgang" at x=47 y=2031, H2 at x=730 y=2031
   (same y); 3 tiles at y=2147.6, each 454.5 × 454.5 paper-coloured.
   Inside each tile: index near top-left (15 px sans), title at top
   (30 px sans, 3 lines), body near bottom (20 px sans, 30 grey).
   Tile column = 1186fr from label edge to last visible tile right edge. */
body.page-programmer-afklar .section[aria-labelledby="how-title"] {
  /* Figma: section starts y=2031 (label) but visible padding-top from
     intro section end (~1817) is 214 px. */
  padding-block:
    clamp(3rem, 2rem + 5vw, 11vw)             /* ~211 px @ 1920 */
    clamp(3rem, 2rem + 4vw, 8.85vw)           /* ~170 px @ 1920 */;
}
body.page-programmer-afklar .section[aria-labelledby="how-title"] .section__grid {
  /* Figma: label col 0..730 (ratio 730), title col 730..1920 (1190).
     Ratios: 730:1190 ≈ 1 : 1.63. */
  grid-template-columns: minmax(0, 730fr) minmax(0, 1190fr);
  gap: 0;
  align-items: start;
}
@media (max-width: 767px) {
  body.page-programmer-afklar .section[aria-labelledby="how-title"] .section__grid {
    grid-template-columns: 1fr;
  }
}
body.page-programmer-afklar #how-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 40 px / 40 px */
  font-size: clamp(1.75rem, 1rem + 2.083vw, 2.5rem);   /* 28 → 40 */
  line-height: 1.0;
  letter-spacing: -0.01em;                              /* −0.4 px on 40 */
  margin: 0;
  max-width: 22ch;
}
body.page-programmer-afklar .numbered-grid {
  /* Figma tiles span x=730.5..2129.6 (4 tiles); visible portion fits 3.
     Each tile 454.5 wide, gap 11.5 px ≈ ratio (454.5/1190 = 38.2% each). */
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 0.25rem + 0.6vw, 0.7188rem);   /* ~11.5 px */
  margin-top: clamp(2rem, 1rem + 3vw, 6.075rem);    /* 116.2 px in Figma */
}
@media (min-width: 768px) {
  body.page-programmer-afklar .numbered-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  body.page-programmer-afklar .numbered-grid {
    /* Anchor first tile at Figma x=730.5. Container starts at x=40 (gutter)
       so left inset = 690.5 px @ 1920 → 35.97vw. */
    padding-left: clamp(2rem, 35.97vw - 0rem, 43.16rem);
    box-sizing: border-box;
  }
}
body.page-programmer-afklar .numbered-tile {
  background: var(--rf-paper);
  aspect-ratio: 1 / 1;
  padding:
    clamp(1.25rem, 0.5rem + 1.5vw, 1.582rem)     /* 25 px from top (figma) */
    clamp(1.25rem, 0.75rem + 1.5vw, 1.821rem)    /* 29 px lr (figma) */
    clamp(1.25rem, 1rem + 1vw, 1.582rem)         /* 25 px from bottom */
    ;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.page-programmer-afklar .numbered-tile__index {
  font-family: var(--font-sans);
  /* Figma: 15 px / 30 px sans, ls 0.9 px (= 0.06em) */
  font-size: clamp(0.8125rem, 0.75rem + 0.16vw, 0.9375rem);  /* 13 → 15 */
  line-height: 2;                                /* 30/15 */
  letter-spacing: 0.06em;
  color: var(--color-text);
  opacity: 1;
  margin: 0;
}
body.page-programmer-afklar .numbered-tile__title {
  font-family: var(--font-sans);    /* Figma uses Instrument Sans here */
  font-weight: var(--fw-regular);
  /* Figma: 30 px / 30 px Instrument Sans, ls 0.9 px (= 0.03em) */
  font-size: clamp(1.125rem, 0.8rem + 1.04vw, 1.875rem);     /* 18 → 30 */
  line-height: 1.0;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin: 0;
  /* Title sits just below index (no auto margin) */
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 1.7rem);          /* ~27 px figma */
}
body.page-programmer-afklar .numbered-tile__body {
  display: block;
  font-family: var(--font-sans);
  /* Figma 904:2917: 15.44 px / 15.44 px Instrument Sans regular, var(--color-2).
     Per design context the color resolves to "black" (#262626) but visually in
     Figma the small body reads as a soft grey because of the surrounding paper-
     coloured tile. Render with the explicit text-soft token to match. */
  font-size: clamp(0.8125rem, 0.7rem + 0.2vw, 0.965rem);   /* 13 → 15.44 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text-soft);
  margin: 0;
  /* Push body to the BOTTOM of the tile */
  margin-top: auto;
  max-width: 22ch;
}

/* ── Breaker (Case) ──────────────────────────────────────────────
   Figma: full-bleed image at y=2772 h=1000, label "Case" at x=43
   y=2785 (top-left), small white title 20 px at x=402 y=2785 same row,
   big white serif body 41.6/45.78 GT Sectra Book at x=402 y=3201.9
   width 1222 height 184 (≈ 4 lines). */
body.page-programmer-afklar .breaker {
  min-height: 0;
  height: auto;
  padding: 0;
  display: block;
  isolation: isolate;
  position: relative;
  /* Match Figma vertical proportions: height ≈ 1000.2 px at 1920 width. */
  aspect-ratio: 1920 / 1000.2;
}
body.page-programmer-afklar .breaker__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
body.page-programmer-afklar .breaker::after {
  /* Slight darken to keep type readable on warm orange */
  background: rgb(0 0 0 / 45%);
  z-index: 1;
}
body.page-programmer-afklar .breaker > .container.breaker__content,
body.page-programmer-afklar .breaker__content {
  position: relative;
  z-index: 2;
  display: grid;
  /* Override .container's max-width / padding so the grid is exactly
     viewport-wide, matching Figma's 1920-anchored x positions. */
  max-width: 100%;
  padding-inline: 0;
  margin-inline: 0;
  grid-template-columns:
    minmax(0, 403fr)    /* gutter to title-x (label sits inside) */
    minmax(0, 1223fr)   /* main column for title + body */
    minmax(0, 294fr);   /* tail gutter */
  grid-template-rows: auto 1fr;
  column-gap: 0;
  gap: 0;                              /* override earlier afklar gap */
  text-align: left;
  /* Override earlier rule that centred all grid items in their cells. */
  justify-items: start;
  align-items: start;
  width: 100%;
  height: 100%;
  align-content: start;
  /* Override line 2158 .breaker > .container.breaker__content { padding-top: 0 } */
  padding-top: clamp(0.75rem, 0.4rem + 0.7vw, 0.84rem);   /* 13.5 px @ 1920 */
  padding-bottom: 0;
}
body.page-programmer-afklar .breaker > .container.breaker__content > .section-label,
body.page-programmer-afklar .breaker__content > .section-label {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  /* Figma label x=43 → 23.41 px inside col 1 (which starts at 0). */
  padding-left: clamp(0.75rem, 0.5rem + 1vw, 1.46rem);   /* 23.41 px @ 1920 */
  align-self: start;
  justify-self: start;
  top: auto;        /* override stale "top: ..." rules from base CSS */
  left: auto;       /* override "left: var(--gutter)" from base */
}
body.page-programmer-afklar .breaker > .container.breaker__content > .breaker__title,
body.page-programmer-afklar .breaker__content > .breaker__title,
body.page-programmer-afklar .breaker__title {
  /* "Klarhed og retning..." — small 20 px white sans line at top of col 2. */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);  /* 15 → 20 */
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-text-invert);
  margin: 0;
  text-align: left;
  max-width: none;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
}
body.page-programmer-afklar .breaker > .container.breaker__content > p:not(.section-label),
body.page-programmer-afklar .breaker__content > p:not(.section-label) {
  /* Explanatory case copy uses Sans with comfortable multiline leading. */
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-regular) !important;
  font-size: clamp(1.5rem, 0.6rem + 2.17vw, 2.6rem) !important;   /* 24 → 41.6 */
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text-invert) !important;
  max-width: none !important;
  margin: 0 !important;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  /* Figma body y=3201.9 minus breaker top 2772.26 = 429.64 below top.
     Row 1 (title) is 20 px tall + padding-top 13 = 33 from breaker top.
     Body needs to start at y_rel = 429, so margin-top = 396 px @ 1920
     (= 20.65vw). Use this directly (no upper clamp) since we hard-cap by
     viewport. */
  margin-top: clamp(3rem, 20.65vw, 32rem) !important;
}

/* ── Feature tiles (Relevans/Resultat/De næste skridt) ───────────
   Figma: 3 green tiles at y=4130.7, x positions 14.7 / 651.8 / 1288.9,
   each 611 × 587, gap 26.1 px between tile-frames. Inside each tile:
   label "Relevans" at top-left, ~9 px down. */
body.page-programmer-afklar .section:has(.feature-tiles) {
  /* Figma feature-tiles start y=4131, breaker ends y=3772 → gap ~359. */
  padding-block:
    clamp(3rem, 2rem + 5vw, 18.7vw)           /* ~359 px @ 1920 */
    clamp(2rem, 1rem + 3vw, 4.8125rem);
}
body.page-programmer-afklar .section:has(.feature-tiles) > .container {
  /* Tiles bleed: left=14.7, right=(1920-1900)=20. Pull container in
     a tiny bit to match. */
  padding-inline: clamp(1rem, 0.5rem + 0.75vw, 0.92vw);
}
body.page-programmer-afklar .feature-tiles {
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.5rem + 0.7vw, 1.36rem);    /* ~21.8 px gap */
  margin-top: 0;
}
@media (min-width: 768px) {
  body.page-programmer-afklar .feature-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body.page-programmer-afklar .feature-tile {
  position: relative;
  /* Figma 611 / 587 */
  aspect-ratio: 611 / 587;
  padding:
    clamp(0.75rem, 0.5rem + 0.6vw, 0.6vw)        /* ~9 px figma */
    clamp(1.5rem, 1rem + 1.5vw, 2.05vw)          /* ~39 px figma */
    ;
  background: var(--rf-green-02);
  color: var(--rf-green-05);
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
body.page-programmer-afklar .feature-tile::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M30 120 C 50 60, 90 50, 110 90 S 170 130, 170 80'/><path d='M40 140 C 70 100, 100 110, 130 130'/><path d='M60 160 C 90 130, 130 150, 160 120'/><circle cx='95' cy='95' r='3' fill='%234C593F'/></svg>");
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
body.page-programmer-afklar .feature-tile:nth-child(2)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M30 100 Q 100 30, 170 100'/><path d='M30 120 Q 100 60, 170 120'/><path d='M30 140 Q 100 90, 170 140'/><circle cx='100' cy='100' r='3' fill='%234C593F'/></svg>");
}
body.page-programmer-afklar .feature-tile:nth-child(3)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234C593F' stroke-width='1.4' stroke-linecap='round'><path d='M40 170 L 80 110 L 120 140 L 170 60'/><circle cx='80' cy='110' r='3' fill='%234C593F'/><circle cx='120' cy='140' r='3' fill='%234C593F'/><circle cx='170' cy='60' r='3' fill='%234C593F'/><circle cx='40' cy='170' r='3' fill='%234C593F'/></svg>");
}
body.page-programmer-afklar .feature-tile__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);  /* 15 → 20 */
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--rf-green-05);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
}
body.page-programmer-afklar .feature-tile__label::before {
  background: var(--rf-green-04);
}

/* ── Compare-3 (Programmet er relevant / Hvad får I / Starten) ─
   Figma: 3 columns of equal width (~611 each), with INDIVIDUAL underline
   per column (Line 11/12/13) at y=5015. Headings 30 px GT Sectra at
   y=4783, body 20 px Instrument Sans at y=4864. */
body.page-programmer-afklar .compare-3 {
  border-top: 0;
  border-bottom: 0;
  padding-block: 0;
  margin-block: clamp(2rem, 1rem + 3vw, 5vw);   /* ~96 px above */
  /* Three equal columns matching Figma's 611:611:611 with 26 px gaps */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1vw, 1.42rem);     /* 22.8 px */
}
@media (min-width: 768px) {
  body.page-programmer-afklar .compare-3 { gap: clamp(1rem, 0.5rem + 1vw, 1.42rem); }
  body.page-programmer-afklar .compare-3__col {
    padding: 0;
    padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
    border-bottom: 1px solid var(--color-rule);
  }
  body.page-programmer-afklar .compare-3__col + .compare-3__col {
    border-left: 0;
  }
}
body.page-programmer-afklar .compare-3__col h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 30 px / 30 px, ls 0.9 px (= 0.03em) */
  font-size: clamp(1.25rem, 0.9rem + 1.04vw, 1.875rem);   /* 20 → 30 */
  line-height: 1.0;
  letter-spacing: 0.03em;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.75rem) 0;       /* 60 px gap to body */
  color: var(--color-text);
}
body.page-programmer-afklar .compare-3__col ul {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 20 px / 25 px sans, ls −0.2 px */
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);         /* 16 → 20 */
  line-height: 1.5;
  letter-spacing: -0.01em;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
body.page-programmer-afklar .compare-3__col li {
  list-style: disc;
  margin-left: 1.5em;
}
body.page-programmer-afklar .compare-3__col p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 20 px / 25 px serif (same as the body lede look) */
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  max-width: none;
}

/* ── "Flere programmer" header ────────────────────────────────────
   Figma: label "Udforsk" at x=52 y=5273, H2 at x=540 y=5263 60/60 GT
   Sectra. Then 4 program rows each 1920 × 208 starting y=5472. */
body.page-programmer-afklar .section--programmer {
  padding-block: clamp(3rem, 2rem + 4vw, 7rem) 0;
}
body.page-programmer-afklar .section--programmer .section__grid {
  /* Figma columns: label 0..540 (540), title 540..1920 (1380). */
  grid-template-columns: minmax(0, 540fr) minmax(0, 1380fr);
  gap: 0;
  align-items: end;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.3rem);  /* ~37 px from title bottom to first row */
}
body.page-programmer-afklar .section--programmer #more-programs-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 60 px / 60 px */
  font-size: clamp(2rem, 1rem + 3.125vw, 3.75rem);
  line-height: 1.0;
  letter-spacing: -0.0067em;
  margin: 0;
}

/* Program rows — Figma 1920×208 each, full-bleed.
   Inner content grid: 40 [pad] | 42 [idx] | 202 [gap] | 273 [title]
   | 202 [gap] | 829 [desc] | 135 [arrow col] | 0 [right]. */
body.page-programmer-afklar .program-list {
  margin-top: 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  padding: 0;
}
body.page-programmer-afklar .program-row {
  display: grid;
  /* Approximate Figma grid: idx ratio 42, title 273, desc 829, arrow 135.
     Sum = 1279. We also need gap allocation of 202 + 202 between idx/title
     and title/desc respectively. Total inner = 1683 / 1920 = 87.7%. */
  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 202fr)
    minmax(0, 273fr)
    minmax(0, 202fr)
    minmax(0, 829fr)
    minmax(0, 135fr);
  align-items: center;
  gap: 0;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3.875rem);  /* 30 → 62 */
  padding-inline: 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
  min-height: clamp(8rem, 5rem + 6vw, 13rem);          /* ≈208 px @1920 */
}
body.page-programmer-afklar .program-row > .program-row__index { grid-column: 1; padding-left: clamp(1rem, 0.5rem + 1vw, 2.08vw); }
body.page-programmer-afklar .program-row > .program-row__title { grid-column: 3; }
body.page-programmer-afklar .program-row > .program-row__desc  { grid-column: 5; }
body.page-programmer-afklar .program-row > .program-row__arrow { grid-column: 6; justify-self: end; padding-right: clamp(1rem, 0.5rem + 1vw, 2.08vw); }

body.page-programmer-afklar .program-row__index {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 25.38 px / 24.37 px (line-height ≈ 0.96) */
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5862rem);  /* 18 → 25.38 */
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body.page-programmer-afklar .program-row__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 40 px / 40 px (approx — leading clipped on row) */
  font-size: clamp(1.5rem, 1rem + 2.083vw, 2.5rem);   /* 24 → 40 */
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}
body.page-programmer-afklar .program-row__desc {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 20 px / 20 px */
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 22ch;     /* Figma: ~404 px = ~20ch on 20 px */
}
body.page-programmer-afklar .program-row__arrow {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.0;
}

/* "Flere programmer (12)" link below the row stack.
   Figma: arrow + label at x=40 y=6357, 30 px Instrument Sans, ls −0.3 px. */
body.page-programmer-afklar .section--programmer > .container:last-child {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3.875rem);
}
body.page-programmer-afklar .section--programmer .link-arrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.25rem, 0.9rem + 1.04vw, 1.875rem);   /* 20 → 30 */
  letter-spacing: -0.01em;
  margin-top: 0;
  gap: clamp(0.5rem, 0.25rem + 1vw, 1.5rem);
}
body.page-programmer-afklar .section--programmer .link-arrow__count {
  color: var(--color-text);
  opacity: 0.55;
}

/* ── Mobile safeguards ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page-programmer-afklar .page-hero__title {
    font-size: clamp(1.75rem, 1.25rem + 3vw, 2.25rem);
    max-width: 18ch;
    overflow-wrap: break-word;
    word-break: normal;
  }
  body.page-programmer-afklar .content-two-col__main {
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  }
  body.page-programmer-afklar .content-two-col__side { display: flex; flex-direction: column; }
  body.page-programmer-afklar .breaker {
    aspect-ratio: auto;
    min-height: 0;
    padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  }
  body.page-programmer-afklar .breaker > .container.breaker__content {
    grid-template-columns: 1fr;
    height: auto;
    padding-inline: var(--gutter);
  }
  body.page-programmer-afklar .breaker > .container.breaker__content > .section-label,
  body.page-programmer-afklar .breaker > .container.breaker__content > .breaker__title,
  body.page-programmer-afklar .breaker > .container.breaker__content > p:not(.section-label) {
    grid-column: 1;
    padding-left: 0;
    grid-row: auto;
  }
  body.page-programmer-afklar .breaker > .container.breaker__content > p:not(.section-label) {
    margin-top: var(--space-5) !important;
    grid-row: auto;
  }
  body.page-programmer-afklar .feature-tile {
    aspect-ratio: 1 / 0.85;
  }
  body.page-programmer-afklar .compare-3 {
    grid-template-columns: 1fr;
  }
  body.page-programmer-afklar .program-row {
    grid-template-columns: 4ch 1fr auto;
    grid-template-areas:
      "idx title arrow"
      "idx desc desc";
    row-gap: var(--space-2);
    padding-inline: var(--gutter);
  }
  body.page-programmer-afklar .program-row > .program-row__index { grid-area: idx; align-self: start; padding-left: 0; }
  body.page-programmer-afklar .program-row > .program-row__title { grid-area: title; }
  body.page-programmer-afklar .program-row > .program-row__desc  { grid-area: desc; }
  body.page-programmer-afklar .program-row > .program-row__arrow { grid-area: arrow; padding-right: 0; }
}

/* ── Late-cascade overrides (placed after the earlier afklar block) ──
   The earlier afklar block has rules that conflict with our new grid
   layout. These overrides force the new layout to win regardless of
   source order. */
@media (min-width: 1024px) {
  /* Reset the inline-margin and clamp-margin-top imposed by the earlier
     afklar block (line ~4740) so the grid row-gap controls the bullets
     → logos spacing. */
  body.page-programmer-afklar .content-two-col__side > div:last-of-type,
  body.page-programmer-afklar .content-two-col__side > div:nth-of-type(2) {
    margin-top: 0 !important;
  }
  /* Bullets row: 220 px @ 1920 (Figma height) as a MINIMUM — longer program
     copy grows the row instead of overlapping the logo strip below. Row-gap
     5.47vw ≈ the Figma gap (logos y=1725, bullets end ≈ y=1620). */
  body.page-programmer-afklar .content-two-col {
    grid-template-rows: minmax(11.458vw, auto) auto;   /* ≥220 px @ 1920 */
    row-gap: 5.47vw;                        /* ~105 px @ 1920 */
  }
}
/* "Brugt af bl.a." inner label — must also be 20 px sans like other labels. */
body.page-programmer-afklar .content-two-col__side > div:last-of-type > .section-label,
body.page-programmer-afklar .content-two-col__side > div:nth-of-type(2) > .section-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);   /* 15 → 20 */
  line-height: 1.0;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   Programmer-Afklar — round-2 fixes (per user feedback)
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Hero: hide the "Programmet i kort form" chip overlay on the image. */
body.page-programmer-afklar .page-hero__placeholder .hero-video__chip {
  display: none;
}

/* 2) Fordele: widen visual gap between columns + give logos more
   whitespace above. Use explicit column-gap inside the 4-col grid so
   the visible whitespace between label / bullets / body grows, and
   bump the row-gap so "Brugt af bl.a." sits further below the bullets. */
@media (min-width: 1024px) {
  body.page-programmer-afklar .content-two-col {
    /* Add explicit column-gap (clamp 32–64 px @ 1920). */
    column-gap: clamp(2rem, 1.5rem + 1.5vw, 4rem);
    /* Increase row-gap so logos breathe — Figma ~125 px. */
    row-gap: clamp(3rem, 2rem + 4vw, 7.8125rem);
  }
}

/* 3) Gennemgang slide-in: switch the row to fixed-width tiles (so the
   3rd tile overflows the viewport at rest) and let numbered-grid-scroll.js
   animate it. */
@media (min-width: 1024px) {
  body.page-programmer-afklar .numbered-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: clamp(6px, 0.625vw, 12px);
    /* Anchor first tile at Figma x=730 — same as Resultater. */
    padding-left: clamp(2rem, 35.97vw, 43.16rem);
    margin-right: 0;
  }
  body.page-programmer-afklar .numbered-tile {
    flex: 0 0 auto;
    /* Figma tile width 454.5 px @ 1920 → 23.67 vw, max 28.4 rem.
       3 tiles + 2 gaps + 690 padding = ~2080 — overflows 1920 by ~160 px. */
    width: clamp(180px, 23.67vw, 28.4rem);
  }
}
/* On narrow desktops (<1280) ease the overflow so all three tiles can be
   visible after the slide-in completes. */

/* 4) Compare-3 (Relevans/Resultat/De næste skridt is the feature-tiles
   block ABOVE; the user is referring to the whitespace between those
   image-tiles and the compare-3 columns + below compare-3 → next section.
   Tighten both gaps. */
body.page-programmer-afklar .section:has(.feature-tiles) {
  /* Was clamp(2rem, 1rem + 3vw, 4.8125rem) bottom — shrink the gap to
     the next section. */
  padding-bottom: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
}
/* The section that wraps compare-3 has the global .section padding-block
   (clamp 3rem-8rem). On this page, that creates a 100+ px gap to the
   feature-tiles above. Shrink padding-top so the compare-3 text sits
   close to the squares. */
body.page-programmer-afklar .section:has(.compare-3) {
  padding-top: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
}
body.page-programmer-afklar .compare-3 {
  /* Was clamp(2rem, 1rem + 3vw, 5vw) ≈ 96 px above/below. Tighten. */
  margin-block: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
}
@media (min-width: 768px) {
  body.page-programmer-afklar .compare-3__col {
    /* Was clamp(2rem, 1rem + 3vw, 4rem) bottom padding. Tighten. */
    padding-bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
  }
}
body.page-programmer-afklar .compare-3__col h3 {
  /* Was 60 px gap between heading and body — too much. */
  margin: 0 0 clamp(1rem, 0.75rem + 1vw, 1.75rem) 0;     /* 16 → 28 */
}

/* 5) Udforsk / Flere programmer: row indices currently wrap to two lines
   because the index column is only ~48 px wide while the font is 25 px.
   Reduce the index font-size to fit, and bump the section title down
   slightly so the heading proportions read right. */
body.page-programmer-afklar .program-row__index {
  /* Was clamp(1.125rem, 0.9rem + 0.7vw, 1.5862rem) = 18 → 25 px. Cap at
     20 px so "02"/"03"/"04"/"05" always fit in a single line. */
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem);   /* 14 → 20 */
  line-height: 1.0;
  white-space: nowrap;
}
body.page-programmer-afklar .section--programmer #more-programs-title {
  /* Bring heading down to 40 px max (matches the in-row title size and
     other section heads on this page like Gennemgang). Was 60 px. */
  font-size: clamp(1.75rem, 1rem + 2.083vw, 2.5rem);     /* 28 → 40 */
  line-height: 1.0;
  letter-spacing: -0.01em;
}
body.page-programmer-afklar .section--programmer .section__grid > .section-label {
  /* Keep the small "Udforsk" label at the standard 20 px sans (matches
     the rest of the page). */
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   Case-Bestseller (page-case) — Figma pixel-perfect (frame 1025:1148)
   Frame 1920 × 8777. Page structure:
     hero · intro (3-col: label/meta/body) · KPI (rail + 3-card strip)
     methode/teknisk/leverence (2-col: rail + body) · breaker · kontakt
   Every clamp() uses 1920 as the desktop reference width, so the max
   matches the Figma value, and `Xvw` where X = figmaPx / 1920 × 100.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section rhythm — every body section follows the 3-col rail grid.
   Cols mirror Figma: rail ≈ 25.7% (0..494) / col-2 ≈ 24.7% (494..968)
   / col-3 ≈ 41% (969..1585) / right ≈ 17.5% (1585..1920).
   We let the container handle the outer padding and place items via
   percentage-anchored columns so x positions track at 1920. */
body.page-case main { background: var(--color-bg); }

body.page-case .case-row-wrap {
  width: 100%;
  padding-inline: 0;
}
body.page-case .case-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  /* On mobile we restore the gutter so text isn't flush to viewport edge */
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
  body.page-case .case-row { padding-inline: 0; }
}
@media (min-width: 1024px) {
  body.page-case .case-row {
    /* Figma frame fractions:
       col1 rail        = 494.7/1920 ≈ 25.77 %
       col2 meta block  = 401.5/1920 ≈ 20.91 %
       gap col          =  73.4/1920 ≈  3.82 %
       col3 body block  = 615.9/1920 ≈ 32.08 %
       col4 trailing    = 334.5/1920 ≈ 17.42 % */
    grid-template-columns:
      minmax(0, 25.77fr)
      minmax(0, 20.91fr)
      minmax(0, 3.82fr)
      minmax(0, 32.08fr)
      minmax(0, 17.42fr);
    column-gap: 0;
    align-items: start;
  }
  body.page-case .case-row__label { grid-column: 1; grid-row: 1; }
  body.page-case .case-row__meta  { grid-column: 2; grid-row: 1; }
  body.page-case .case-row__body  { grid-column: 4; grid-row: 1; }
}

/* The bullet must sit at the inner gutter edge (x≈20 on the Figma
   frame). The .container has padding-inline = clamp(16, 0.5+2vw, 40),
   so on a 1920 viewport the gutter is 40 — the bullet at gutter is
   ~20 short of Figma. Pull it left 20px via negative margin. */
body.page-case .case-row__label { margin: 0; align-self: start; }

/* Bullet square in Figma sits at x≈20 — labels living inside the
   .case-row-wrap (which is flush to the viewport edge on desktop) need
   a left padding of 20 px so the bullet lands at x=20. On mobile the
   gutter handles this naturally.                                    */
@media (min-width: 1024px) {
  body.page-case .case-row__label,
  body.page-case .case-hero__label,
  body.page-case .case-breaker__label,
  body.page-case .contact-module__label {
    padding-left: 20px;
  }
}

/* Section labels everywhere on this page sit at 20px Instrument Sans. */
body.page-case .section-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Lock to 20 px at 1920: 20/1920 ≈ 1.041vw → use 1.041vw with min 16. */
  font-size: clamp(1rem, 1.0417vw, 1.25rem);
  letter-spacing: -0.01em;
  line-height: 1;
  gap: var(--space-3);
  color: var(--color-text);
}
body.page-case .section-label__bullet {
  width: 8.52px;
  height: 8.52px;
  background: var(--color-marker);
}
body.page-case .section-label--invert,
body.page-case .section-label--invert .section-label__bullet { color: var(--color-text-invert); }
body.page-case .section-label--invert .section-label__bullet { background: var(--color-text-invert); }

/* ── HERO ──────────────────────────────────────────────────────────
   Title: 30px GT Sectra Book, leading 30, max-width 740px.
   Lede: same family/size, color #aaa, directly below the title.
   Image: 1405 × 731.85, centered horizontally, top margin from text. */
body.page-case .case-hero {
  /* Figma: hero label baseline y=299, nav height 56. Label sits 235 px
     below the nav. Use a vw-anchored clamp to land that at 1920. */
  padding-block: clamp(5rem, 12.24vw, 14.7rem) clamp(2rem, 1rem + 2vw, 3.25rem);
  background: var(--color-bg);
}
body.page-case .case-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-inline: var(--gutter);
  width: 100%;
}
@media (min-width: 1024px) {
  body.page-case .case-hero__grid { padding-inline: 0; }
}
@media (min-width: 1024px) {
  body.page-case .case-hero__grid {
    /* Title at x=492.78 width=739.66, so col2 starts 25.66% and spans 38.5%. */
    grid-template-columns:
      minmax(0, 25.66fr)
      minmax(0, 38.5fr)
      minmax(0, 35.84fr);
    align-items: start;
    column-gap: 0;
  }
  body.page-case .case-hero__label { grid-column: 1; grid-row: 1; align-self: start; }
  body.page-case .case-hero__text  { grid-column: 2; grid-row: 1; }
}
body.page-case .case-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 30 px @ 1920 — 30/1920 ≈ 1.5625vw. min 22 px, max 30 px. */
  font-size: clamp(1.375rem, 1.5625vw, 1.875rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text);
  max-width: 740px;
  margin: 0;
}
body.page-case .case-hero__lede {
  font-family: var(--font-serif);   /* GT Sectra, NOT sans, per Figma */
  font-weight: var(--fw-book);
  font-size: clamp(1.375rem, 1.5625vw, 1.875rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-soft);
  max-width: 740px;
  margin: 0;
}
/* Override base .page-hero__media that sets margin-top large. */
body.page-case .case-hero__media {
  /* Figma: lede block ends y≈464, image top y=499 → 35 px gap. */
  margin-top: clamp(1.25rem, 1.823vw, 2.1875rem);
  padding-inline: 0;
  max-width: 1920px;
  margin-inline: auto;
  width: 100%;
}
body.page-case .case-hero__media img {
  /* Figma exact: image is 1405×732 at x=256.6, NOT full-bleed.
     1405/1920 ≈ 73.18 vw → centred with ~257 px gutter each side at 1920.
     Only this image (.case-hero__media img) is restricted — the case-block
     breaker image (.case-breaker .breaker__media) stays full-bleed. */
  display: block;
  width: 100%;
  max-width: clamp(280px, 73.18vw, 87.8125rem);   /* 1405 px @ 1920 */
  margin-inline: auto;
  aspect-ratio: 1405 / 732;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* ── INTRO / METHODE / TEKNISK / LEVERENCE section spacing ──────────
   Figma section-to-section gaps vary: hero→intro 136, intro→KPI 255,
   KPI→methode 339, methode→teknisk 108. Use generous top and bottom
   padding to give roughly the right Figma feel.                    */
body.page-case .case-section {
  padding-block: clamp(3rem, 5.6vw, 6.75rem) clamp(3rem, 5.6vw, 6.75rem);
}
body.page-case .case-section--intro {
  /* Sits ~136 px below the hero image. */
  padding-top: clamp(3rem, 7.08vw, 8.5rem);
}
body.page-case .case-section--kpi {
  /* KPI follows intro after ~255 px — overshoot a bit. */
  padding-top: clamp(3rem, 8.8vw, 10.6rem);
}

/* ── Case meta (Kunde / Branche / Opgavetype / Varighed) ─────────── */
body.page-case .case-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
  letter-spacing: -0.01em;
  line-height: 1;
}
body.page-case .case-meta__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
body.page-case .case-meta dt {
  color: var(--color-text-soft);
  font-weight: var(--fw-regular);
}
body.page-case .case-meta dd {
  color: var(--color-text);
  margin: 0;
}

/* Article copy uses the brand's reading face; section titles retain Sectra. */
body.page-case .case-row__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 616px;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.page-case .case-row__body > * { margin: 0; }
body.page-case .case-row__body > * + * { margin-top: 1.25em; }
body.page-case .case-row__body p.muted { color: var(--color-text-soft); }
body.page-case .case-row__body h2,
body.page-case .case-row__body h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1.5625vw, 1.875rem);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* KPI cards remain fully visible for any CMS item count. */
body.page-case .case-row--kpi-head {
  /* Figma: title baseline y=2308.96, cards y=2461.22 → 152 px gap. */
  margin-bottom: clamp(1.5rem, 7.93vw, 9.5rem);
}
@media (min-width: 1024px) {
  body.page-case .case-row--kpi-head {
    /* Label at x=20 (rail). Title at x=730.54 width=500.
       col1 = 38.05% (rail+gap) · col2 = 26.04% (title 500/1920)
       · trailing = 35.91%. Place label in col1 with the rail offset,
       title in col2. */
    grid-template-columns:
      minmax(0, 38.05fr)
      minmax(0, 26.04fr)
      minmax(0, 35.91fr);
  }
  body.page-case .case-row--kpi-head .case-row__label { grid-column: 1; }
  body.page-case .case-row--kpi-head .case-kpi__title { grid-column: 2; }
}
body.page-case .case-kpi__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 40 px / leading 40 px. 40/1920 ≈ 2.0833vw. */
  font-size: clamp(1.75rem, 2.0833vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  max-width: 500px;
}

/* Align with the result heading while keeping both columns inside the page. */
body.page-case .case-kpi__strip {
  position: relative;
  width: 100%;
}
body.page-case .case-kpi__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-left: 38.05vw;
  margin-right: var(--gutter);
  margin-top: 0;
  min-width: 0;
}
@media (max-width: 1023px) {
  body.page-case .case-kpi__grid {
    margin-inline: var(--gutter);
    grid-template-columns: 1fr;
  }
}
body.page-case .kpi-card {
  background: var(--rf-paper);
  border-radius: var(--radius-sm);
  /* A minimum visual rhythm, with room for longer CMS captions. */
  min-width: 0;
  min-height: clamp(18rem, 24vw, 28rem);
  aspect-ratio: auto;
  padding: clamp(1rem, 0.5rem + 0.781vw, 1.5625rem);  /* 25 px @ 1920 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}
body.page-case .kpi-card__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 1.0417vw, 1.25rem);   /* 20 px @ 1920 */
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-text);
  text-transform: none;
  margin: 0;
}
body.page-case .kpi-card__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Figma: 120 px / tracking -2.4 px ≈ -0.02em. 120/1920 = 6.25vw. */
  font-size: clamp(3rem, 6.25vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}
body.page-case .kpi-card__caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text-soft);
  opacity: 1;             /* Figma: black @ 50 % opacity */
  margin: 0;
  max-width: 367px;
}

/* ── BREAKER ──────────────────────────────────────────────────────
   Figma frame 1025:1158 (rectangle background y=2893 .. y=6790, height
   3897). Inside it, the image 1025:1166 covers y=4825..5825 (1000 tall,
   centred horizontally, full-bleed). The text rail-label "Case" sits
   at frame x=50, y=4838. The eyebrow at x=409, y=4838 (20px white).
   Body at x=409, y=5254 (41.6 px GT Sectra Book white).            */
body.page-case .case-breaker {
  padding-block: 0;
  min-height: 0;
  display: block;
  position: relative;
  background: var(--color-bg-deep);
}
body.page-case .case-breaker .breaker__media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1000;
  object-fit: cover;
  inset: auto;
  display: block;
}
body.page-case .case-breaker::after { content: none; }   /* drop the dark gradient */
body.page-case .case-breaker__content {
  position: absolute;
  inset: 0;
  display: grid;
  /* Figma alignment: rail 0..409 (label sits left of column boundary),
     eyebrow + body anchored to x=409 in col 2. */
  grid-template-columns:
    21.34fr          /* rail (0..409) */
    63.69fr          /* content (409..1632) */
    14.97fr;         /* trailing space */
  /* Image is 1000 tall — eyebrow at y=13 (1.3 %), body at y=430 (43 %).
     Body height ≈ 184. Trailing = 1000 - 13 - 20 (eyebrow) - 397 - 184
     = 386. Use fr units so the layout scales with the image. */
  grid-template-rows:
    13fr             /* spacer top (1.3% of 1000) */
    auto             /* label / eyebrow row */
    397fr            /* gap between eyebrow and body */
    auto             /* body row */
    386fr;           /* trailing space below body */
  align-content: start;
  padding: 0;
  z-index: 1;
  color: var(--color-text-invert);
}
body.page-case .case-breaker__label {
  position: static;                /* override .breaker__content > .section-label
                                      absolute positioning from the base CSS */
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  top: auto;
  left: auto;
}

body.page-case .case-breaker__eyebrow {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 1.0417vw, 1.25rem);     /* 20 px @ 1920 */
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-text-invert);
  margin: 0;
}
body.page-case .case-breaker__body {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 41.615 px / leading 45.777 / tracking -0.4162 px.
     41.615/1920 ≈ 2.167vw. */
  font-size: clamp(1.625rem, 2.167vw, 2.6rem);
  line-height: calc(45.777 / 41.615);
  letter-spacing: -0.01em;
  color: var(--color-text-invert);
  max-width: 1224px;
  margin: 0;
}

/* ── KONTAKT module ───────────────────────────────────────────────
   Figma: bg = paper-warm, label rail @ x=20, title 80 px GT Sectra
   leading 80 tracking -0.8 px centered (max width 903 px / x=507.7).
   Sub 20 px Instrument Sans centered max 437 (x=740). CTA pill below. */
body.page-case .contact-module {
  background: var(--color-bg-warm);
  /* Figma: section y=6852, title y=7165 → 313 px from top.
     Title ends y=7325, sub y=7367 → 42 px to sub.
     Sub ends y=7407, CTA below.  Section ends y=7697 → ~290 px below CTA.
     Use 313 px top padding @ 1920 and 290 px bottom. */
  padding-block: clamp(4rem, 16.3vw, 19.5625rem) clamp(4rem, 15.1vw, 18.125rem);
  position: relative;
}
body.page-case .contact-module > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.page-case .contact-module__label {
  position: absolute;
  top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  left: var(--gutter);
}
body.page-case .contact-module__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  /* Figma: 80 px / leading 80 / tracking -0.8 px ≈ -0.01em. */
  font-size: clamp(2.5rem, 4.1667vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  max-width: 903px;
}
body.page-case .contact-module__arrow { display: none; }    /* Figma has no arrow on case page */
body.page-case .contact-module__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 1.0417vw, 1.25rem);   /* 20 px @ 1920 */
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-text);
  /* Figma: 42 px between title end and sub start. */
  margin-top: clamp(1.25rem, 2.19vw, 2.625rem);
  max-width: 437px;
}
body.page-case .contact-module__cta {
  /* Figma: CTA sits ~80 px below sub block. */
  margin-top: clamp(1.5rem, 4.17vw, 5rem);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.94vw, 1.125rem);
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-pill);
}

/* ── Responsive tweaks ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  body.page-case .case-row { grid-template-columns: 1fr; row-gap: var(--space-4); }
  body.page-case .case-hero__grid { grid-template-columns: 1fr; }
  body.page-case .case-row--kpi-head { grid-template-columns: 1fr; }
  body.page-case .case-breaker__content {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    padding: clamp(2rem, 1rem + 4vw, 5rem) var(--gutter);
    background: rgba(20, 20, 20, 0.55);
  }
  body.page-case .case-breaker {
    display: grid;
    align-items: end;
  }
  body.page-case .case-breaker .breaker__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  body.page-case .case-breaker__label,
  body.page-case .case-breaker__eyebrow,
  body.page-case .case-breaker__body {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE: KONTAKT (page-kontakt) — Figma pixel-perfect
   Source of truth: Figma frame 904:3111 (file 6FAyrz3mjFUPDilBG4wppf), 1920×4242.
   This block deliberately follows the established page-programmer / page-resultater
   convention: every value anchored to a Figma px and translated to `clamp()` with
   the vw term computed from `Figma_px / 1920 * 100`. All rules are scoped under
   `body.page-kontakt`; nothing else on the site is touched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────
   Figma anchors:
     hero-label    x=47   y=299   20px Instrument Sans, tracking -0.2
     hero-bullet   x=20   y=305   8.52 × 8.52 black square
     hero-title    x=493  y=292   60 px GT Sectra Book, line-height 60 (1.0)
     hero ends     ~y=464.5; form top line at y=538 (74 px gap).
   The hero label/bullet sit inside the wide container at the same 20 px gutter
   as the rest of the page, so the bullet appears at x=20 naturally. The text
   "Kontakt" is offset to x=47 because of the bullet (8.52) + the 18.5 gap
   inherited from the base .section-label rule (gap: var(--space-2) = 8 → we
   bump it to 1.5rem so it lands at ~47 instead of ~37). */
body.page-kontakt .page-hero {
  /* Figma frame: nav ends at y=56, title top at y≈292 → 236 px hero top-pad.
     But the .section-label inside has padding-top: 0.45em which pushes the
     bullet/label down ~9 px; we trim 9 px off the hero top-pad to compensate
     so the title's actual baseline lands at Figma y=292. Bottom padding =
     127 px so the title (2 lines × 60 = 120, ending at y=411) lands the
     form's first hairline at Figma y=538. */
  padding-block: clamp(7rem, 11.875vw, 14.25rem) clamp(4rem, 6.615vw, 7.94rem);
  /*               112 → 228                                          64 → 127 */
}
body.page-kontakt .page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 0;
  align-items: start;
  column-gap: 0;
}
@media (max-width: 767px) {
  body.page-kontakt .page-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
body.page-kontakt .page-hero__grid > .section-label {
  font-size: clamp(0.9375rem, 1.0417vw, 1.25rem); /* 15 → 20 */
  letter-spacing: -0.01em;                        /* Figma -0.2 on 20 → -0.01em */
  line-height: 1;
  gap: clamp(0.75rem, 1.04vw, 1.25rem);           /* 12 → 20 to push label x=47 */
  align-self: start;
  /* Sit at the same baseline as the title (Figma both y≈292/299 → top of
     section-label glyph lines up with the title's first cap-height row). */
  padding-top: 0.45em;
}
body.page-kontakt .page-hero__grid > .section-label .section-label__bullet {
  width:  clamp(0.4375rem, 0.4437vw, 0.5325rem);  /* 7 → 8.52 → 8.52 */
  height: clamp(0.4375rem, 0.4437vw, 0.5325rem);
}
body.page-kontakt .page-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 3.125vw, 3.75rem);       /* 32 → 60 */
  line-height: 1;                                  /* Figma 60/60 */
  letter-spacing: -0.01em;
  /* Override the global `text-wrap: balance` (reset.css) so the headline
     greedily fills line 1 to match Figma's break ("…hjælpe / jer videre."). */
  text-wrap: wrap;
  /* Figma title bounding box 876.5 × 172.83. With text-wrap disabled the
     headline naturally wraps at the first word that overruns max-width.
     "Vi har erfaringen, der kan hjælpe" measures ~858 px in our browser,
     "Vi har erfaringen, der kan hjælpe jer" measures ~927 px. A max-width
     between 880 and 920 forces the break we want ("…hjælpe / jer videre."). */
  max-width: clamp(20rem, 46.875vw, 56.25rem);    /* 320 → 900 */
  margin: 0;
  /* The title in Figma sits at x = calc(25% + 13.16px) inside the grid; with
     a 25/75 grid this falls naturally inside the right column. A small
     padding-left of 13.16 px (0.6854vw) re-creates the Figma offset exactly. */
  padding-left: clamp(0.5rem, 0.6854vw, 0.8225rem); /* 8 → 13.16 */
}

/* ── 4-step form section ───────────────────────────────────────────────────
   Figma anchors:
     top rule       y=538 (1900 wide, 10 px in from each side)
     row 1 label    y=556   row 1 cards y=622.58-881.43   line below at y=938
     row 2 label    y=956                                  line at y=1013
     row 3 label    y=1031                                 line at y=1088
     row 4 label    y=1106                                 (next section)
     index x=25.5   25.38 px Instrument Sans Regular, line-height ~24 (0.96)
     label x=488.71 = calc(25% + 8.71px)   20 px Instrument Sans, tracking -0.2
   We rebuild the row with a 25 / 75 grid that mirrors the hero's split. */
/* Zero the default .section padding for the form section so the top rule
   sits flush against the hero's bottom padding — Figma has no extra block
   spacing between the title's bottom and the form's first hairline rule. */
body.page-kontakt section[aria-labelledby="form-title"] {
  padding-block: 0;
}
body.page-kontakt .form-steps {
  display: block;
  margin-top: 0;
  border-top: 1px solid var(--color-rule);
}
body.page-kontakt .form-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: start;
  gap: 0;
  column-gap: 0;
  position: relative;
  /* Row spacing: Figma lines at y=938 / 1013 / 1088 → 75 px between rules.
     Each compact row: 18 px top → label (20 px) → 37 px bottom = 75 total. */
  padding-top: clamp(0.75rem, 0.9375vw, 1.125rem);  /* 12 → 18 */
  padding-bottom: clamp(1.5rem, 1.927vw, 2.3125rem); /* 24 → 37 */
  border-bottom: 1px solid var(--color-rule);
  border-top: 0;
}
/* Row 1 (with program cards) is taller — Figma 538 → 938 = 400 px tall. */
body.page-kontakt .form-step:nth-of-type(1) {
  /* Reset padding so the row equals 400 px @1920: 18 px (label) + 46 px gap
     (label→cards top) + 258.85 (cards) + 56.57 (cards→line bottom) */
  padding-top: clamp(0.75rem, 0.9375vw, 1.125rem);   /* 18 */
  padding-bottom: clamp(2.25rem, 2.945vw, 3.535rem); /* 36 → 56.57 */
}
body.page-kontakt .form-step__index {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.125rem, 1.32vw, 1.5875rem); /* 18 → 25.38 px */
  line-height: 0.96;                              /* Figma reads 24/25.384 */
  letter-spacing: -0.01em;                        /* Figma -0.2538 / 25.38 ≈ -0.01 */
  color: var(--color-text);
  /* Index sits at x=25.5 inside the container (20 px gutter + 5.5 internal).
     With a 25/75 grid the left col starts at the gutter, so we add 5.5 px. */
  padding-left: clamp(0.25rem, 0.2865vw, 0.34375rem); /* 4 → 5.5 */
}
body.page-kontakt .form-step__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 1.0417vw, 1.25rem); /* 15 → 20 */
  line-height: 1.4;                                  /* Figma 20/20 */
  letter-spacing: -0.01em;                         /* Figma -0.2 / 20 */
  color: var(--color-text);
  margin: 0 0 0 0;
  /* Label at x = calc(25%+8.71) inside container → push right-col by 8.71. */
  padding-left: clamp(0.375rem, 0.4536vw, 0.5444rem); /* 6 → 8.71 */
  display: block;
}

/* Labels and fields use normal flow: editable values never overlap a label,
   and messages can grow beyond one line. Checkbox/file controls are separate. */
body.page-kontakt .form-step:nth-of-type(n+2) > div {
  position: relative;
  min-height: 20px; /* label height */
}
body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]),
body.page-kontakt .form-step textarea {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.0417vw, 1.25rem);
  line-height: 1.4;
  color: var(--color-text);
  caret-color: var(--color-text);
  background: transparent;
  border: 0;
  padding: var(--space-3) 0;
  margin: 0;
  outline: revert;
  display: block;
  z-index: 1;
  min-height: 44px;
}
body.page-kontakt .form-step textarea {
  min-height: 7.5rem;
  resize: vertical;
  overflow: auto;
  position: static;
  inset: auto;
  height: auto;
  color: var(--color-text);
  padding: var(--space-3) 0;
  line-height: 1.4;
  outline: revert;
}
/* When the input gains focus or has content, reveal the typed text and
   visually push the label down a hair to indicate active state. */
body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]):focus-visible,
body.page-kontakt .form-step textarea:focus-visible {
  color: var(--color-text);
}
body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]):not(:placeholder-shown),
body.page-kontakt .form-step textarea:not(:placeholder-shown) {
  color: var(--color-text);
}
/* Keep the field label visible while typing and after a value is entered. */
body.page-kontakt .form-step:has(input:focus, input:not(:placeholder-shown),
                                  textarea:focus, textarea:not(:placeholder-shown))
                  .form-step__label {
  opacity: 1;
  line-height: 1.4;
}

/* Visible "Send besked" submit button — rendered as the standard dark pill CTA
   (background/padding/radius inherited from .contact-module__cta). */
body.page-kontakt .form-step button[type="submit"].contact-module__cta {
  border: 0;
  cursor: pointer;
  font-size: var(--fs-body);
  margin: 0; /* spacing handled by .form-actions */
}

/* ── Program-pick cards (step 01, 4-up row) ───────────────────────────────
   Figma anchors per card (1920 width frame):
     card 1   x=488.71   y=622.58   w=403.674   h=258.85   bg #c4d9ba, border #fff
     card 2   x=905.18   y=622.58   w=403.674   h=258.85   border #000 1 px
     card 3   x=1321.65  ...        w=403.674   h=258.85   border #000 1 px
     card 4   x=1738.13  ...        w=403.674   h=258.85   border #000 1 px
     border-radius 5 px
   Inside each card:
     num  x=+18.06 from card y=+16.99   20 px Instrument Sans  tracking 0.6 px (+0.03em)
     title x=+18.06          y=+69.42   30 px GT Sectra Book   tracking 0.9 px
     desc  x=+18.06          y=+194.86  20 px Instrument Sans  tracking -0.2

   The 75 % right column gets `display: grid` with 4 equal columns and a small
   gap (12.797 px = 905.18 - 488.71 - 403.674 → 12.8 px ≈ 0.667vw). */
body.page-kontakt .program-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.667vw, 0.8rem); /* 8 → 12.8 px */
  /* It's a <fieldset> — drop the browser-default groove border/padding that
     boxed in all four cards. The per-card borders (.program-pick__option) stay. */
  border: 0;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  margin-top: clamp(1.5rem, 2.4vw, 2.875rem); /* 24 → 46 (label→card gap) */
  /* Align the card row with the label: card 1 starts at x=488.71 = label's
     own left edge, so apply the same 8.71 px left padding. */
  padding-left: clamp(0.375rem, 0.4536vw, 0.5444rem);
}
body.page-kontakt .program-pick__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);                              /* we position children manually */
  position: relative;
  /* Figma cards are 403.674 × 258.85 (aspect ≈ 1.56). Because the artboard's
     four-card row over-fills 1920 px, our 75 % column squeezes each card to
     ~340 px wide; we keep the Figma vertical rhythm by anchoring the height
     to 258.85 px (13.482vw at 1920). Hugging Figma's absolute height keeps
     the form's row-1 dimension at 400 px which preserves the section's
     vertical rhythm in the rest of the page. */
  height: auto; /* 176 → 258.85 px */
  min-height: 11rem;
  border: 1px solid var(--color-rule);
  border-radius: 5px;
  background: var(--color-bg);
  cursor: pointer;
  overflow: visible;
}
body.page-kontakt .program-pick__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.page-kontakt .program-pick__option-num {
  position: static;
  top:  clamp(0.5rem, 0.8849vw, 1.0625rem); /* 8 → 16.99 px */
  left: clamp(0.5rem, 0.9406vw, 1.13rem);   /* 8 → 18.06 px */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 1.0417vw, 1.25rem); /* 15 → 20 */
  line-height: 1;
  letter-spacing: 0.03em;                          /* Figma 0.6 / 20 */
  color: var(--color-text);
  margin: 0;
}
body.page-kontakt .program-pick__option-title {
  position: static;
  top:  clamp(2rem, 3.615vw, 4.337rem); /* 32 → 69.42 px (692-622.58) */
  left: clamp(0.5rem, 0.9406vw, 1.13rem);
  right: clamp(0.5rem, 0.9406vw, 1.13rem);
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.25rem, 1.5625vw, 1.875rem); /* 20 → 30 */
  line-height: 1.1;                               /* Figma 33/30 */
  letter-spacing: 0.03em;                         /* Figma 0.9 / 30 */
  color: var(--color-text);
  margin: 0;
  display: block;
}
body.page-kontakt .program-pick__option-desc {
  position: static;
  bottom: clamp(0.75rem, 1.084vw, 1.3rem); /* 12 → 20.83 (258.85-(817.44-622.58+40)) */
  left:  clamp(0.5rem, 0.9406vw, 1.13rem);
  right: clamp(0.5rem, 0.9406vw, 1.13rem);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.9375rem, 1.0417vw, 1.25rem); /* 15 → 20 */
  line-height: 1.4;                                  /* Figma 20/20 */
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  display: block;
  /* Figma desc width 357.557 < card 403.674 → ~46 px right padding; we use
     auto-right via container plus 23 px each side for visual balance. */
  margin-top: auto;
}
/* Selected card — chartreuse green with white border. */
body.page-kontakt .program-pick__option:has(input:checked),
body.page-kontakt .program-pick__option--selected {
  background: var(--rf-green-02);
  border-color: var(--rf-white);
}

/* ── Team section ──────────────────────────────────────────────────────────
   Figma anchors:
     team-label   x=47   y=1386   20 px Instrument Sans   (paired with bullet at x=20 y=1391.88)
     team-title   x=495  y=1384   60 px GT Sectra Book
     row 1 photos y=1559.39   row 2 photos y=2220.06
     photo w=455.45 h=535.39   x = 19.55, 495, 970.45, 1445.9 (stride ≈ 475.45)
     name   y=2113.79   15 px Instrument Sans   tracking -0.15
     role   y=2132.9    15 px Instrument Sans   50 % opacity
     email  x=258 (calc 12.5%+18)   y=2113.79
     phone  y=2132.9   50 % opacity
   The team header reuses the same 25/75 grid as the hero so the bullet
   lands at x≈20 and the title at x≈495. The photo grid uses the container's
   inner width and a 20-px gap. */
body.page-kontakt section[aria-labelledby="team-title"] {
  /* Figma: form bottom ≈ y=1184 (last row's content ends ~1184), team
     title at y=1384 → 200 px between form's visual end and team title. */
  padding-block: clamp(5rem, 10.42vw, 12.5rem) clamp(2.5rem, 3.93vw, 4.71rem);
  /*               80 → 200                                              40 → 75 */
}
body.page-kontakt .section__grid--team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 0;
  align-items: start;
}
@media (max-width: 767px) {
  body.page-kontakt .section__grid--team {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
body.page-kontakt .section__grid--team > .section-label {
  font-size: clamp(0.9375rem, 1.0417vw, 1.25rem); /* 15 → 20 */
  letter-spacing: -0.01em;
  line-height: 1;
  gap: clamp(0.75rem, 1.04vw, 1.25rem);
  padding-top: 0.45em;
}
body.page-kontakt .section__grid--team > .section-label .section-label__bullet {
  width:  clamp(0.4375rem, 0.4437vw, 0.5325rem);
  height: clamp(0.4375rem, 0.4437vw, 0.5325rem);
}
body.page-kontakt #team-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 3.125vw, 3.75rem); /* 32 → 60 */
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin: 0;
  /* Figma offset 15 px inside the right col (calc(25%+15)) */
  padding-left: clamp(0.5rem, 0.781vw, 0.9375rem);
}

/* Photo grid: 4-column, 20 px gap, photo aspect 455.45 / 535.39 = 0.8506. */
body.page-kontakt .team-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.04vw, 1.25rem) clamp(0.875rem, 1.04vw, 1.25rem);
  /*                     14 → 20 px both axes  */
  /* Row gap between row 1 and row 2 is much larger in Figma: 660.67 photo-stride
     minus 535.39 photo height minus ~106 captions = ~19 px below caption and
     then row 2 photos start. To get the same visual rhythm we set a larger
     `row-gap` than the inter-card gap. */
  row-gap: clamp(2.5rem, 4.18vw, 5rem); /* 40 → 80 — yields ~125 between photo bottoms */
  margin-top: clamp(2.5rem, 5.99vw, 7.19rem); /* 40 → 115 (header→photo gap) */
}
@media (max-width: 1023px) {
  body.page-kontakt .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body.page-kontakt .team-grid {
    grid-template-columns: 1fr;
  }
}
body.page-kontakt .team-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
body.page-kontakt .team-tile__photo {
  width: 100%;
  aspect-ratio: 455.45 / 535.39;
  object-fit: cover;
  background: var(--color-bg-soft);
  border-radius: 0;
  display: block;
}
/* Caption block: name + role + contact form a tight 4-row mini-layout that
   mirrors Figma's 17 px line-stack underneath the photo (y=2113.79 onwards). */
body.page-kontakt .team-tile__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.8125rem, 0.781vw, 0.9375rem); /* 13 → 15 */
  line-height: 17px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: clamp(1rem, 1.0417vw, 1.25rem) 0 0;    /* 16 → 20 below photo */
  padding-left: clamp(0.125rem, 0.234vw, 0.28rem); /* echo Figma 4.07 offset */
}
body.page-kontakt .team-tile__role {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.8125rem, 0.781vw, 0.9375rem);
  line-height: 17px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  opacity: 0.75;
  margin: 0;
  padding-left: clamp(0.125rem, 0.234vw, 0.28rem);
}
body.page-kontakt .team-tile__contact {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.8125rem, 0.781vw, 0.9375rem);
  line-height: 17px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  padding-left: clamp(0.125rem, 0.234vw, 0.28rem);
}
/* The contact <p> contains the email (full opacity) on line 1 and the phone
   (50 % opacity) on line 2. We split with the second line via ::after styling
   on <br>; simplest: target the trailing text-node via :not selectors —
   easier still, just apply 50 % opacity to the second visual row by using a
   nested span. Markup keeps a <br>, so we rely on visual proximity; the
   phone number's slightly muted look matches Figma at viewing distance. */
body.page-kontakt .team-tile__contact a {
  color: inherit;
  text-decoration: none;
}
body.page-kontakt .team-tile__phone {
  opacity: 0.75;
  display: inline-block;
}

/* ── Final responsive tweaks (mobile/narrow) ──────────────────────────── */
@media (max-width: 1023px) {
  body.page-kontakt .program-pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-kontakt .program-pick__option {
    height: auto;
    min-height: 11rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow: visible;
}
}
@media (max-width: 767px) {
  body.page-kontakt .form-step,
  body.page-kontakt .form-step:nth-of-type(1) {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }
  body.page-kontakt .form-step__index { padding-left: 0; }
  body.page-kontakt .form-step__label { padding-left: 0;
  line-height: 1.4;
}
  body.page-kontakt .program-pick {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  body.page-kontakt .program-pick__option {
    height: auto;
    padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 11rem;
  overflow: visible;
}
  body.page-kontakt .program-pick__option-num,
  body.page-kontakt .program-pick__option-title,
  body.page-kontakt .program-pick__option-desc {
    position: static;
  }
  body.page-kontakt .program-pick__option-title {
    margin-block: var(--space-3);
  position: static;
}
  body.page-kontakt .page-hero__grid > .section-label,
  body.page-kontakt .section__grid--team > .section-label {
    padding-top: 0;
  }
  body.page-kontakt .page-hero__title { padding-left: 0; }
  body.page-kontakt #team-title { padding-left: 0; }
  body.page-kontakt .team-grid {
    margin-top: var(--space-7);
    row-gap: var(--space-7);
  }
}
@media (max-width: 480px) {
  body.page-kontakt .page-hero__title,
  body.page-kontakt #team-title {
    font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem);
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE QA FIXES — issues found walking the site at ~375 px. Additive and
   scoped to small screens so desktop output stays unchanged.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Testimonials author name was rendering one letter per line: the desktop
     `width: min-content` on the byline + a global mobile break-word rule made
     min-content resolve to a single character. Size it to the column instead. */
  .testimonials__byline strong {
    width: auto;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Om os "approach" decorative tiles became three full-width ~280 px lime
     blocks (single-column grid × ~1:1 aspect-ratio). Keep them as a compact
     three-up row so they read as a small accent rather than empty boxes. */
  body.page-om-os .approach__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Hero film — tap-to-play fallback (iOS Low Power Mode et al.)
   Muted autoplay is blocked by iOS in Low Power Mode (and can be blocked by
   other engines). The film section is decorative (aria-hidden), so this is a
   POINTER-ONLY affordance: a tap anywhere on the frame starts playback, and a
   play glyph appears only while playback is actually blocked (.is-paused, set
   by hero-video.js when play() rejects). Where muted autoplay succeeds — desktop
   especially — the class is never added, so nothing changes visually.
   ════════════════════════════════════════════════════════════════════════ */
.hero-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5rem;
  height: 4.5rem;
  display: none;
  place-items: center;
  color: #fff;
  background: rgba(20, 20, 20, 0.5);
  border-radius: 50%;
  pointer-events: none;          /* taps fall through to the frame */
  z-index: 3;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero-video.is-paused .hero-video__frame { cursor: auto; }
.hero-video.is-paused .hero-video__play { display: grid; }

/* ════════════════════════════════════════════════════════════════════════
   Kontakt form — attachment field + submit status (step 04)
   ════════════════════════════════════════════════════════════════════════ */
/* Step 04 also holds the action buttons, so the floating-label field (whose
   input/textarea is absolutely positioned to fill its relative parent) must be
   wrapped — otherwise the overlay stretches over the buttons and steals clicks.
   This contains the overlay to the label area; the buttons sit below it. */
body.page-kontakt .form-step .form-field {
  position: relative;
  min-height: 20px;
}

/* Attach + Send buttons: stacked on mobile, side-by-side on desktop (attach to
   the left of Send). A clear gap separates them from the message field above. */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .form-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}
.form-attach__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
  min-height: 44px;
}
.form-attach__button:hover,
.form-attach__button:focus-within {
  background: var(--color-bg-soft);
}
.form-attach__plus {
  font-size: 1.2em;
  line-height: 0;
}
.form-attach__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
}
.form-attach__list li {
  padding: 0.15rem 0;
}
.form-steps__status {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}

/* Testimonial tile without a portrait: neutral initials card (same footprint
   as the photo tiles, so the strip and dots stay aligned). */
.testimonials__photo-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-serif);
  font-weight: var(--fw-book);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
  background: var(--color-bg-stone);
}

/* Brand audit: focusable controls retain a real hit area around the visual dot. */
.testimonials__dot::before {
  content: "";
  position: absolute;
  width: var(--bullet-size);
  height: var(--bullet-size);
  inset: 0;
  margin: auto;
  background: var(--color-marker);
}
.program-pick__option:has(input:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

/* Optional film control: native button, visible with keyboard and touch. */
.hero-video__toggle {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  min-height: 44px;
  max-width: calc(100% - 2 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  background: var(--rf-ink);
  color: var(--rf-white);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  line-height: 1.3;
  transition: opacity var(--dur-base) var(--ease-out);
}
.hero-video__toggle:hover { opacity: 0.8; }
.hero-video__toggle:focus-visible { outline: 2px solid var(--rf-white); outline-offset: 3px; }

/* Handover 05 web opener. Timeline is in /js/modules/web-opener.js. */
html.rf-opener-pending main,
html.rf-opener-pending .site-footer,
html.rf-opener-pending .site-nav__inner {
  visibility: hidden;
}

html.rf-opener-active {
  overflow: hidden; /* the mock never scrolls during the intro */
}
html.rf-opener-active .site-nav__menu li,
html.rf-opener-active .site-nav__toggle {
  opacity: 0;
}
html.rf-opener-active .hero__title {
  visibility: hidden;
}
html.rf-opener-active .hero__title.rf-scrambling {
  visibility: visible;
  /* The hero line performs ON the takeover stage */
  position: relative;
  z-index: 95;
}

/* ── Takeover stage: opaque cover below the nav bar (z 100) but above all
   page content — nothing behind it is visible until the intro lifts it. ── */
.rf-opener {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-bg);
}
.rf-opener.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
/* Mask box: exactly the wordmark's line box, so the exit slide disappears
   behind its own baseline (mock f59-f68). Centered at 54% viewport height
   (measured: bbox centre 311/540 in the mock incl. browser chrome). */
.rf-opener__clip {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.rf-opener__wordmark {
  position: relative;
  width: clamp(180px, 24vw, 460px);
  aspect-ratio: 71.2139 / 28.0088;
  color: var(--color-text);
}
.rf-opener__letter { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 var(--clip-right) 0 var(--clip-left)); }
.rf-opener__letter.is-resolved { opacity: 1; }
.rf-opener__letter.rf-clip-top { opacity: 1; clip-path: inset(0 var(--clip-right) 50% var(--clip-left)); }
.rf-opener__letter img { display: block; width: 100%; height: 100%; }
.rf-opener__letter.rf-notch::after {
  content: ''; position: absolute; right: 2%; top: 40%; width: 8%; height: 12%; background: var(--color-bg);
}
/* The early composition renders ~35% larger and to the right (measured:
   mock f022-f025), then slides home progressively (f027-f039, ~480ms). The
   letters transform on their own layer so the fragment layer's measured
   coordinates stay in final-position space. */
.rf-opener__letters {
  position: absolute;
  inset: 0;
  transform-origin: 0 100%;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rf-opener__letters.rf-scale-big {
  transform: translateX(15.4%) scale(1.35);
  transition: none;
}
/* Partial-glyph states: top half of the 'e' (mock f022) and a broken glyph
   junction — a small stage-coloured mask over the letter's right-middle
   (mock f039 crossbar-less 'e', f145 broken 'R'). */
.rf-letter {
  position: relative;
}
.rf-letter.rf-clip-top {
  clip-path: inset(0 0 50% 0);
}
.rf-letter.rf-notch::after {
  content: '';
  position: absolute;
  right: 8%;
  top: 38%;
  width: 34%;
  height: 26%;
  background: var(--color-bg);
}
/* Exit: straight down behind the mask, strong ease-in (measured
   cubic-bezier(.95,.03,.72,.78), 400ms, mock f59-f68). */
.rf-opener__wordmark.is-exiting {
  transform: translateY(112%);
  transition: transform 400ms cubic-bezier(0.95, 0.03, 0.72, 0.78);
}
.rf-opener__frags {
  position: absolute;
  inset: 0;
}
.rf-frag {
  position: absolute;
  background: var(--color-text);
}
.rf-letter {
  color: transparent;
}
.rf-letter.is-resolved {
  color: inherit;
}

/* ── Nav logo: hidden behind its own mask from t=0, rises up into the slot
   at 2800ms (mock f71-f80) ── */
html.rf-opener-active .site-nav__logo {
  overflow: hidden;
}
html.rf-opener-active .site-nav__logo img {
  transform: translateY(115%);
}
html.rf-opener-active .site-nav__logo.rf-logo-in img {
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* ── Nav toggle (mobile) rides with the first menu item ── */
html.rf-opener-active .site-nav__menu li.rf-nav-el-in,
html.rf-opener-active .site-nav__toggle.rf-nav-el-in {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

/* ── CTA: dot → leftward bar → rounded pill → label (mock f82-f117) ──
   All stages are clip-path states on the real pill so the end state is
   untouched. Right edge stays anchored throughout. */
html.rf-opener-active .site-nav__cta {
  color: transparent;
  clip-path: inset(50% 0 50% 100%);
}
html.rf-opener-active .site-nav__cta.rf-cta-dot {
  clip-path: inset(calc(50% - 7px) 0 calc(50% - 7px) calc(100% - 14px));
}
html.rf-opener-active .site-nav__cta.rf-cta-bar {
  clip-path: inset(calc(50% - 7px) 0 calc(50% - 7px) 0);
  transition: clip-path 160ms ease-out;
}
html.rf-opener-active .site-nav__cta.rf-cta-pill {
  clip-path: inset(0 0 0 0 round var(--radius-pill));
  transition: clip-path 120ms ease-out;
}
html.rf-opener-active .site-nav__cta.rf-cta-label {
  color: var(--color-text-invert);
  transition: color 60ms linear;
}

/* ── Hero line (mock f111-f157) ── */
.rf-hero__word {
  display: none;
}
.rf-hero__word.is-ghost {
  display: inline;
  /* Pale greenish-beige ghost as in the mock; snaps dark, no tween. */
  color: color-mix(in srgb, var(--rf-grey-01) 26%, var(--rf-bone));
}
.rf-hero__word.is-ghost.is-dark {
  color: inherit;
}
.rf-hero__word--last .rf-letter {
  color: transparent;
}
.rf-hero__word--last .rf-letter.is-resolved {
  color: inherit;
}
/* The missing word space before the last word eases open (mock f148-f150). */
.rf-hero__space {
  display: inline-block;
  width: 0;
}
.rf-hero__space.is-open {
  width: 0.28em;
  transition: width 80ms ease-out;
}
/* Lone gray fragment that fades in beside "Jeres" (mock f111-f130). */
.rf-hero__frag {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  margin-left: 0.15em;
  vertical-align: middle;
  background: var(--color-text);
  opacity: 0;
  animation: rf-hero-frag-in 360ms ease-out forwards;
}
@keyframes rf-hero-frag-in {
  to { opacity: 0.35; }
}

/* Belt-and-braces: the bootstrap never engages under reduced motion, but if
   the classes are ever present anyway, show everything immediately. */
@media (prefers-reduced-motion: reduce) {
  html.rf-opener-pending main,
  html.rf-opener-pending .site-footer,
  html.rf-opener-pending .site-nav__inner,
  html.rf-opener-active .hero__title { visibility: visible; }
  .rf-opener { display: none; }
  html.rf-opener-active { overflow: visible; }
  html.rf-opener-active .site-nav__menu li,
  html.rf-opener-active .site-nav__toggle { opacity: 1; }
  html.rf-opener-active .site-nav__logo img { transform: none; }
  html.rf-opener-active .site-nav__cta { color: var(--color-text-invert); clip-path: none; }
  .rf-letter, .rf-hero__word--last .rf-letter { color: inherit; }
  .rf-hero__word { display: inline; visibility: visible; opacity: 1; }
}

.rf-opener__skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-5);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
}
@media (prefers-reduced-motion: reduce) {
  /* Offscreen process/KPI cards stay reachable without scroll animation. */
  body.page-resultater .numbered-grid,
  body.page-programmer-afklar .numbered-grid {
    transform: none !important;
    margin-inline: 0;
    padding-inline: var(--gutter);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  body.page-resultater .numbered-tile,
  body.page-programmer-afklar .numbered-tile { scroll-snap-align: start; }
}

body.page-kontakt .form-step input:not([type="checkbox"]):not([type="file"]):focus-visible,
body.page-kontakt .form-step textarea:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}
/* A CMS collection may have any number of photographs. */
body.page-om-os .kultur__strip[data-static="true"] {
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-4);
  overflow-x: auto;
  padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
}
body.page-om-os .kultur__strip[data-static="true"] picture {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  opacity: 1;
  width: clamp(180px, 24vw, 465px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  body.page-home .testimonials__photos { flex-wrap: wrap; }
}