/* ==========================================================================
   HSV Combi – designsystem (præsentationsudkast v0.1)
   Farver, typografi og formsprog fra HSV_Designguide_ELEMENTS.pdf
   ========================================================================== */

/* ---------- Skrifttyper ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2"), url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
/* Breve Sans Text: de ulicenserede filer i designpakken mangler store bogstaver (A–Z er erstattet af symboler).
   Når de licenserede webfont-filer (woff2) foreligger, indsæt @font-face her og sæt --font-display til
   "Breve Sans Text". Indtil da bruges Inter i fed vægt som display-skrift. */

/* ---------- Tokens ---------- */
:root {
  /* Brandfarver */
  --pine: #1d4634;
  --pine-900: #112a1f;
  --pine-800: #173a2b;
  --pine-600: #2b5c46;
  --greenish: #b4c4ba;
  --greenish-300: #d3ddd6;
  --sand: #eee7e1;
  --sand-200: #f6f2ee;
  --sand-400: #e3d9cf;
  --grey: #f3f3f3;
  --blackish: #555555;
  --white: #ffffff;

  /* Semantik */
  --bg: var(--white);
  --text: #555555;   /* Black-ish fra brandbogen */
  --heading: var(--pine);
  --muted: #6b6b6b;
  --line: rgba(29, 70, 52, 0.14);
  --line-strong: rgba(29, 70, 52, 0.28);
  --focus: var(--pine);
  --alert: #9a3b1b;

  /* Typografi */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-black: 800;

  --fs-display: clamp(2.6rem, 1.6rem + 4.2vw, 5.25rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-xs: 0.8rem;

  /* Rum */
  --container: 85rem;   /* 1360 px ved normal tekststørrelse; vokser med skærmen over 1920 px (se STORE SKÆRME) */
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 140px);
  --header-h: 84px;
  --radius: 2px;
  --radius-img: 18px;
  --radius-img-sm: 12px;
  /* Afstanden fra containerens kant til skærmkanten (til elementer, der skal gå helt ud) */
  --kant: calc((100vw - min(100vw, calc(var(--container) + var(--gutter) * 2))) / 2 + var(--gutter));

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow: 0 1px 0 rgba(17, 42, 31, 0.06), 0 18px 40px -24px rgba(17, 42, 31, 0.35);
  --shadow-img: 0 24px 52px -34px rgba(17, 42, 31, 0.55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 72px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible, .section--pine :focus-visible, .site-footer :focus-visible, .utility :focus-visible { --focus: var(--sand); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--pine); color: #fff; padding: 12px 18px; text-decoration: none; }
.skip-link:focus { top: 16px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--sand { background: var(--sand); }
.section--sand-light { background: var(--sand-200); }
.section--grey { background: var(--grey); }
.section--pine { background: var(--pine); color: rgba(255, 255, 255, 0.82); }
/* Dekorative cirkler må aldrig skubbe siden bredere */
.section, .clients { position: relative; }
.section:has(> .circles), .clients:has(> .circles), .page-hero:has(> .circles) { overflow: hidden; }
.section--pine h1, .section--pine h2, .section--pine h3 { color: #fff; }
.section--pine .eyebrow { color: var(--greenish); }
.section--pine .eyebrow::before { background: var(--greenish); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* ---------- Typografi-komponenter ---------- */
/* Signaturgreb fra designguiden: første led i Breve Sans Bold, resten i Inter Regular */
.b { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.035em; }
.display { font-size: var(--fs-display); line-height: 1; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); max-width: 60ch; }
.section--pine .lead { color: rgba(255, 255, 255, 0.84); }
.measure { max-width: 64ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow med den korte grønne streg fra designguiden */
.eyebrow {
  display: inline-flex; flex-direction: column; gap: 14px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pine);
}
.eyebrow::before { content: ""; width: 72px; height: 6px; background: var(--greenish); }
.eyebrow--inline { flex-direction: row; align-items: center; gap: 12px; }
.eyebrow--inline::before { width: 28px; height: 4px; }

.section-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}

/* ---------- Knapper og links ---------- */
.btn {
  --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine);
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 14px 22px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  font-weight: 600; font-size: 0.98rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { --btn-bg: var(--pine-900); --btn-bd: var(--pine-900); }
.btn .arrow { transition: transform 0.25s var(--ease); flex: none; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--pine); --btn-bd: var(--line-strong); }
.btn--outline:hover { --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine); }
.btn--light { --btn-bg: var(--sand); --btn-fg: var(--pine); --btn-bd: var(--sand); }
.btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--pine); --btn-bd: #fff; }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--pine); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px; transition: background-size 0.3s var(--ease);
}
.link-arrow:hover { background-size: 100% 1.5px; }
.link-arrow .arrow { transition: transform 0.25s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.section--pine .link-arrow, .on-dark .link-arrow { color: #fff; }

/* ---------- Dekorative cirkler (logoets formsprog) ---------- */
/* Designpakkens element "Elementer": logoets to cirkler i logoets proportioner (sage-cirklen er størst) */
.circles { position: absolute; pointer-events: none; width: var(--size, 360px); aspect-ratio: 1.338; }
.circles::before, .circles::after { content: ""; position: absolute; border-radius: 50%; }
.circles::before { width: 57.1%; aspect-ratio: 1; left: 0; bottom: 0; background: var(--c1, var(--pine)); }
.circles::after { width: 64.7%; aspect-ratio: 1; right: 0; top: 0; background: var(--c2, var(--greenish)); }
/* "Elementer Gennemsigtig": begge cirkler i 50 % – bruges på lyse flader */
.circles--muted { --c1: rgba(29, 70, 52, .5); --c2: rgba(180, 196, 186, .5); }
/* På pine: kun sage-toner, så cirklerne står som lys på den mørke flade */
.circles--pine { --c1: rgba(180, 196, 186, .14); --c2: rgba(180, 196, 186, .3); }

/* ---------- Utility bar ---------- */
.utility { background: var(--pine-900); color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; }
.utility .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.utility a { color: #fff; text-decoration: none; }
.utility a:hover { text-decoration: underline; text-underline-offset: 3px; }
.utility__service { display: flex; align-items: center; gap: 10px; }
.utility__service .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--greenish); box-shadow: 0 0 0 4px rgba(180, 196, 186, 0.18); }
.utility__service strong { font-weight: 600; }
.utility__right { display: flex; align-items: center; gap: 22px; }
.lang { display: flex; gap: 2px; }
.lang a, .lang span { padding: 3px 7px; border-radius: 2px; font-weight: 500; }
.lang__kommer { opacity: .45; cursor: default; }
.lang [aria-current="true"] { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 720px) {
  .utility__label, .utility__career { display: none; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(17, 42, 31, 0.5); }
.site-header__bar { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { width: 148px; height: auto; }
.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: var(--header-h); padding: 0 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--pine); font-weight: 500; font-size: 0.97rem; text-decoration: none; white-space: nowrap;
}
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 22px; height: 2px; background: var(--pine); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link .chev { transition: transform 0.2s; }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-header__cta { flex: none; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line-strong); background: none; border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: var(--pine); position: relative; transition: transform 0.2s, background 0.2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__link { padding: 0 9px; font-size: 0.93rem; }
  .brand img { width: 130px; }
}
@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  .nav, .site-header__cta { display: none; }
  .burger { display: inline-flex; }
  .mega { display: none; }   /* mobilmenuen overtager – ellers breder megamenuen siden ud */
}

/* ---------- Mega menu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(17, 42, 31, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: minmax(240px, 3.4fr) minmax(0, 8.6fr); min-height: 300px; }
.mega__intro { background: var(--sand); border-radius: var(--radius-img); margin: 26px 0; padding: 32px clamp(22px, 2.2vw, 36px); position: relative; overflow: hidden; display: grid; align-content: center; gap: 0; }
.mega__intro p { margin: 14px 0 22px; max-width: 34ch; font-size: 0.95rem; }
.mega__intro .h3 { font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.55rem); font-weight: 400; line-height: 1.2; }
.mega__intro .circles { right: -70px; bottom: -80px; --size: 210px; opacity: .55; z-index: -1; }
.mega__items { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; padding: 26px 0 26px clamp(20px, 2vw, 36px); align-content: start; }
.mega__item a { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 14px; text-decoration: none; border-radius: var(--radius); transition: background 0.15s; }
.mega__item a:hover { background: var(--grey); }
.mega__item .num { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--greenish); color: var(--pine); font-size: 0.78rem; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.mega__item strong { color: var(--pine); font-weight: 600; }
.mega__item span.desc { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.mega__process { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 14px 14px; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; }
.mega__process i { flex: 1; height: 1px; background: var(--line-strong); }

/* ---------- Mobil-navigation ---------- */
.drawer { position: fixed; inset: 0; z-index: 150; background: #fff; transform: translateX(100%); transition: transform 0.3s var(--ease); display: flex; flex-direction: column; visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.drawer__body { overflow-y: auto; padding: 8px var(--gutter) 32px; flex: 1; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer .drawer__link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 1.25rem; color: var(--pine); text-decoration: none; cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer .drawer__link { border-bottom: 1px solid var(--line); }
.drawer details[open] summary .chev { transform: rotate(180deg); }
.drawer details ul { list-style: none; padding: 0 0 16px; }
.drawer details li a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; }
.drawer__foot { padding: 20px var(--gutter) 28px; border-top: 1px solid var(--line); display: grid; gap: 12px; background: var(--sand-200); }
.drawer__foot .btn { justify-content: center; }
body.no-scroll { overflow: hidden; }

/* ---------- Brødkrumme ---------- */
.breadcrumb { font-size: var(--fs-small); color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--greenish); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--pine); text-decoration: underline; }

/* ---------- Forside-hero ---------- */
/* 3D-filmen står uden ramme direkte på sandfladen: videoens hvide baggrund ganges væk
   (mix-blend-mode: multiply), ligesom renderingerne på flyerens forside. Ingen forfædre
   mellem video og sandflade må danne egen stakkontekst (z-index, opacity, transform),
   ellers blandes videoen ikke med sandfarven. Logoets cirkler står allerede i headeren. */
.hero { background: var(--sand); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr; }
.hero__content { padding-block: clamp(44px, 7vw, 72px) 8px; display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; z-index: 2; container-type: inline-size; }
.hero__content .btn-row { margin-top: 6px; }
/* Overskriften skaleres efter tekstspaltens bredde, så "Komplette osteanlæg" altid står på én linje */
.hero__title { font-size: clamp(2.05rem, 1.2rem + 2.5vw, 3.5rem); line-height: 1.04; }
@supports (font-size: 1cqi) { .hero__title { font-size: clamp(1.9rem, 10.2cqi, 3.5rem); } }
.hero__title .b { display: block; }
.hero .lead { font-size: clamp(1.04rem, 0.98rem + 0.22vw, 1.16rem); max-width: 46ch; }
.hero__film { position: relative; margin: 0 calc(var(--gutter) * -1); }
/* Filmen er en montage: oversigter på hvid bund og nærbilleder, der fylder hele rammen.
   Bløde kanter (maske) gør, at nærbillederne også glider over i sandfladen uden hård kant. */
.hero__video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
.hero__film-cap { display: flex; align-items: center; gap: 12px; padding: 4px var(--gutter) 28px; font-size: var(--fs-small); color: var(--muted); }
.hero__film-cap::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--greenish); }
.hero__film-cap:has(.hero__film-knap:not([hidden]))::before { display: none; }
.hero__film-knap { flex: none; width: 38px; height: 38px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--pine); border: 1.5px solid var(--line-strong); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.hero__film-knap:hover { background: var(--pine); border-color: var(--pine); color: #fff; }
.hero__film-knap .ikon-afspil, .hero__film-knap.er-pause .ikon-pause { display: none; }
.hero__film-knap.er-pause .ikon-afspil { display: block; }
.play { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--pine); display: grid; place-items: center; border: 0; cursor: pointer; transition: transform 0.2s var(--ease); flex: none; }
.play:hover { transform: scale(1.06); }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(700px, calc(100svh - 124px)); align-items: center; }
  .hero__content { padding-block: clamp(56px, 6vw, 88px); padding-right: 24px; }
  /* Filmen går helt ud til skærmkanten i højre side og toner blødt ind fra venstre */
  .hero__film { justify-self: end; width: min(calc(100% + var(--kant)), 77.5rem); margin: 0 calc(var(--kant) * -1) 0 0; }
  .hero__video {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 12%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 12%);
            mask-composite: intersect;
  }
  .hero__film-cap { justify-content: flex-end; padding: 0 calc(var(--kant) + 4px) 0 0; margin-top: -6px; }
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Undersidehero ---------- */
.page-hero { background: var(--sand); position: relative; overflow: hidden; padding-top: clamp(28px, 3vw, 40px); }
.page-hero__grid { display: grid; gap: 40px; padding-block: clamp(28px, 5vw, 72px) clamp(56px, 7vw, 104px); position: relative; z-index: 2; }
.page-hero__text { display: grid; gap: 26px; align-content: center; }
.page-hero__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--sand-400); border-radius: var(--radius-img); box-shadow: var(--shadow-img); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media--render { background: linear-gradient(160deg, #fff 30%, var(--sand-200)); }
.page-hero__media--render img { object-fit: contain; padding: 3%; }
.page-hero .circles { --size: 220px; right: 4%; top: -70px; z-index: 1; }
/* Brødkrummen skal altid kunne læses – også når boblerne går ind over den på mobil */
.page-hero .breadcrumb { position: relative; z-index: 2; }
@media (min-width: 960px) {
  .page-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; }
}
.page-hero--pine { background: var(--pine); color: rgba(255,255,255,.84); }
.page-hero--pine h1, .page-hero--pine .eyebrow { color: #fff; }
.page-hero--pine .eyebrow::before { background: var(--greenish); }
.page-hero--pine .breadcrumb, .page-hero--pine .breadcrumb a { color: rgba(255,255,255,.72); }
.page-hero--pine .lead { color: rgba(255,255,255,.86); }
@media (min-width: 960px) { .page-hero--pine .page-hero__media { aspect-ratio: 4 / 3; align-self: center; } }

/* ---------- Kundebånd ---------- */
.clients { border-bottom: 1px solid var(--line); }
.clients .container { display: grid; gap: 20px; padding-block: 34px; align-items: center; }
.clients__label { font-size: var(--fs-small); color: var(--muted); max-width: 26ch; }
.clients__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 16px clamp(12px, 1.6vw, 24px); align-items: center; justify-items: center; }
.clients__list li { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; letter-spacing: -0.01em; color: #6f7671; }

/* ---------- Nøgletal ---------- */
.stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.stats li { padding: 28px 24px 8px 0; border-bottom: 1px solid var(--line); }
.stats__num { display: block; font-family: var(--font-display); font-weight: var(--display-black); font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1; color: var(--pine); letter-spacing: -0.02em; }
.stats__num small { font-size: .4em; font-weight: 600; letter-spacing: 0; margin-left: .3em; }
.stats__label { display: block; margin-top: 12px; font-size: 0.95rem; line-height: 1.45; max-width: 24ch; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats li { padding: 36px 32px 28px 0; border-bottom: 0; }
  .stats li + li { padding-left: 32px; border-left: 1px solid var(--line); }
}
.section--pine .stats { border-color: rgba(255,255,255,.3); }
.section--pine .stats li { border-color: rgba(255,255,255,.14); }
.section--pine .stats__num { color: #fff; }

/* ---------- Kort ---------- */
.cards { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); border-radius: var(--radius-img) var(--radius-img) 0 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__media--render { background: linear-gradient(160deg, #fff 35%, var(--sand-200)); }
.card__media--render img { object-fit: contain; padding: 4%; }
.card__body { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; flex: 1; }
.card__kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card__title { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__text { font-size: 0.98rem; }
.card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; color: var(--pine); font-weight: 600; font-size: 0.95rem; }
.card__foot .arrow-circle { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.card:hover .arrow-circle { background: var(--pine); border-color: var(--pine); color: #fff; }
.card--sand { background: var(--sand-200); border-color: transparent; }
@media (min-width: 1024px) {
  .cards--3 > .card--bred { grid-column: span 2; }
  .cards--3 > .card--bred .card__media { aspect-ratio: 21 / 9; }
}

/* ---------- Split (tekst / medie) ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--midt { align-items: center; }
  .split--wide-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--reverse > :first-child { order: 2; }
}
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-img); }

/* 3D-renderinger: vises i deres eget format på en blød flade – aldrig beskåret */
.is-render { aspect-ratio: auto !important; height: auto; object-fit: contain; mix-blend-mode: multiply;
  background: linear-gradient(165deg, #fff 25%, var(--sand-200)); border-radius: var(--radius-img);
  box-shadow: none; border: 1px solid var(--line); padding: clamp(10px, 1.6vw, 22px); }
.card__media .is-render, .page-hero__media .is-render { border: 0; border-radius: 0; padding: 0; background: none; height: 100%; }
.card__media--render, .page-hero__media--render { display: grid; place-items: center; }
.card__media--render .is-render { aspect-ratio: 4 / 3 !important; padding: 6%; }
.split__media figcaption, .fig-caption { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); display: flex; gap: 10px; }
.fig-caption::before, .split__media figcaption::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--greenish); margin-top: 0.7em; }

.checklist { list-style: none; display: grid; gap: 12px; }
.tiles { list-style: none; display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-img); padding: 24px 24px 26px; display: grid; gap: 8px; align-content: start; overflow: hidden; transition: border-color .2s, box-shadow .25s var(--ease); }
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile__no { width: 34px; height: 34px; border-radius: 50%; background: var(--greenish-300); color: var(--pine); display: grid; place-items: center; font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.tile strong { color: var(--pine); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.tile span:not(.tile__no) { font-size: .94rem; color: var(--muted); }
.tiles--kompakt { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
@media (min-width: 1200px) { .tiles--kompakt { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles--kompakt .tile { padding: 18px 20px 20px; }
.tiles--kompakt .tile a { display: grid; gap: 6px; text-decoration: none; }
.tiles--kompakt .tile a::after { content: ""; position: absolute; inset: 0; }
.tiles--kompakt .tile strong { font-size: .98rem; }
.tiles--kompakt .tile span { font-size: .88rem; }
.checklist--bred { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 14px 40px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; border-radius: 50%; background: var(--greenish-300); }
.checklist li::after { content: ""; position: absolute; left: 7px; top: calc(0.28em + 5px); width: 5px; height: 9px; border: solid var(--pine); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checklist--2 { grid-template-columns: 1fr; gap: 14px 40px; }
@media (min-width: 720px) { .checklist--2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Interaktivt osteri: oversigt + tre moduler ---------- */
.osteri { display: grid; gap: 26px; }
.osteri__stage { position: relative; overflow: hidden; aspect-ratio: var(--forhold, 2400 / 1174); background: #fff; transition: aspect-ratio .4s var(--ease); }
.osteri__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: multiply; opacity: 0; transform: scale(1.04); transition: opacity .75s var(--ease), transform 1.1s var(--ease); }
.osteri__img.is-current { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .osteri__img { transition: opacity .2s linear; transform: none !important; } }

.hotspot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--pine); color: #fff; font-weight: 600; font-size: .9rem;
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 0 5px rgba(180,196,186,.55), 0 8px 18px -6px rgba(17,42,31,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), transform .25s var(--ease), background .2s, box-shadow .2s;
}
.hotspot.is-visible { opacity: 1; pointer-events: auto; animation: dotIn .5s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes dotIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.hotspot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--greenish); animation: ping 2.6s var(--ease) infinite; opacity: 0; }
.hotspot:nth-of-type(2n)::before { animation-delay: .6s; }
.hotspot:nth-of-type(3n)::before { animation-delay: 1.2s; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.hotspot:hover, .hotspot.is-active { transform: translate(-50%, -50%) scale(1.14); background: var(--pine-900); box-shadow: 0 0 0 6px var(--greenish), 0 10px 24px -6px rgba(17,42,31,.7); }
.hotspot.is-active::before { animation: none; }
.hotspot--line {
  width: auto; height: auto; border-radius: 999px; padding: 10px 18px; font-size: .88rem;
  background: rgba(255,255,255,.95); color: var(--pine); border: 1.5px solid var(--pine);
  box-shadow: 0 10px 26px -14px rgba(17,42,31,.7);
}
.hotspot--line::before { display: none; }
.hotspot--puls::before { display: block; inset: -6px; border-radius: 999px; border: 2px solid var(--pine); animation: puls 2.4s var(--ease) infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(1.14); opacity: 0; } }
.hotspot--puls { padding: 14px 24px; font-size: 1rem; box-shadow: 0 0 0 5px rgba(180,196,186,.45), 0 12px 28px -14px rgba(17,42,31,.8); }
.hotspot--line.is-chosen { background: var(--pine); color: #fff; box-shadow: 0 0 0 6px var(--greenish); }
.hotspot--line:hover, .hotspot--line.is-active { background: var(--pine); color: #fff; box-shadow: 0 0 0 5px rgba(180,196,186,.55); }
.hotspot--line .lbl { white-space: nowrap; font-weight: 600; }
@media (max-width: 720px) { .hotspot--line { padding: 7px 12px; font-size: .74rem; } }
.hotspot[data-line="selv"], .hotspot[data-line="lager"] { background: #fff; color: var(--pine); box-shadow: 0 0 0 2px var(--pine), 0 0 0 6px rgba(180,196,186,.45), 0 8px 18px -6px rgba(17,42,31,.5); }
.hotspot[data-line="selv"]:hover, .hotspot[data-line="selv"].is-active,
.hotspot[data-line="lager"]:hover, .hotspot[data-line="lager"].is-active { background: var(--pine); color: #fff; box-shadow: 0 0 0 6px var(--greenish), 0 10px 24px -6px rgba(17,42,31,.7); }
.hotspot--module { width: 52px; height: 52px; font-size: 1.15rem; box-shadow: 0 0 0 7px rgba(180,196,186,.5), 0 10px 26px -8px rgba(17,42,31,.7); }

.hotspot-tip {
  position: absolute; z-index: 3; left: var(--x); top: var(--y); width: min(330px, 74vw);
  transform: translate(-50%, calc(-100% - 40px)); background: #fff; box-shadow: var(--shadow);
  border-top: 4px solid var(--pine); padding: 18px 0; pointer-events: auto; animation: tipIn .25s var(--ease);
}
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, calc(-100% - 28px)); } }
.hotspot-tip[hidden] { display: none; }
.hotspot-tip strong, .hotspot-tip p, .hotspot-tip a { margin-inline: 20px; }
.hotspot-tip strong { display: block; color: var(--pine); font-size: 1.05rem; margin-bottom: 6px; }
.hotspot-tip p { font-size: .92rem; line-height: 1.5; margin-bottom: 12px; }
.hotspot-tip.is-below { transform: translate(-50%, 40px); }
.hotspot-tip.is-left { transform: translate(calc(-100% + 44px), calc(-100% - 40px)); }
.hotspot-tip.is-left.is-below { transform: translate(calc(-100% + 44px), 40px); }
.hotspot-tip.is-right { transform: translate(-44px, calc(-100% - 40px)); }
.hotspot-tip.is-right.is-below { transform: translate(-44px, 40px); }

.osteri__back { position: absolute; left: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--pine); color: #fff; border: 0; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(17,42,31,.8); }
.osteri__back .arrow { transform: rotate(180deg); }
.osteri__back:hover { background: var(--pine-900); }
.osteri__views { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: flex; gap: 6px; padding: 5px; background: rgba(255,255,255,.94); border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(17,42,31,.7); }
.osteri__views button { padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--pine); font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.osteri__views button:hover { background: var(--grey); }
.osteri__views button[aria-pressed="true"] { background: var(--pine); color: #fff; }
@media (max-width: 720px) { .osteri__views { right: 8px; bottom: 8px; } .osteri__views button { padding: 7px 11px; font-size: .78rem; } }
.osteri__tag { position: absolute; left: 16px; top: 16px; z-index: 4; background: var(--pine); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .04em; padding: 12px 20px; box-shadow: 0 10px 24px -14px rgba(17,42,31,.8); }

.osteri__list { list-style: none; display: grid; grid-template-columns: 1fr; column-gap: 28px; border-top: 1px solid var(--line-strong); }
@media (min-width: 640px) { .osteri__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .osteri__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.osteri__list li { border-bottom: 1px solid var(--line); }
.osteri__list button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 13px 4px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--pine); font-weight: 500; font-size: .98rem; transition: background .15s, padding .2s var(--ease); }
.osteri__list .n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--greenish); display: grid; place-items: center; font-size: .8rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.osteri__list .arrow { opacity: 0; transform: translateX(-6px); transition: .2s var(--ease); }
.osteri__list button:hover, .osteri__list button.is-active { background: var(--grey); padding-left: 12px; }
.osteri__list button:hover .n, .osteri__list button.is-active .n { background: var(--pine); color: #fff; border-color: var(--pine); }
.osteri__list button:hover .arrow, .osteri__list button.is-active .arrow { opacity: 1; transform: none; }
.osteri__hint { font-size: var(--fs-small); color: var(--muted); display: flex; gap: 10px; align-items: center; }

@media (max-width: 720px) {
  .hotspot { width: 30px; height: 30px; font-size: .78rem; box-shadow: 0 0 0 4px rgba(180,196,186,.55); }
  .hotspot--module { width: 40px; height: 40px; font-size: .95rem; }
  .hotspot-tip { width: min(280px, 82vw); }
  .osteri__stage { margin-inline: calc(var(--gutter) * -1); }
}

/* ---------- 3D-knap ved kortet (script fra /hsv-3d/embed/) ----------
   Knappen lægger sin egen stil ind; her tilpasses den sitets knapper (to klasser, så den vinder). */
.osteri-3d { margin-bottom: 28px; }
.osteri-3d:empty { display: none; }   /* mobil/tablet: ingen knap og ingen tom afstand */
.osteri-3d .hsv3d-knap { min-height: 52px; padding: 14px 22px; gap: 12px; border-radius: var(--radius);
  background: var(--pine); font-size: .98rem; box-shadow: none; transition: background .2s var(--ease); }
.osteri-3d .hsv3d-knap:hover { background: var(--pine-900); box-shadow: none; }
.osteri-3d .hsv3d-knap:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }

/* ---------- Faseforløb (tidslinje) ---------- */
.phases { position: relative; }
.phases__track { list-style: none; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; position: relative; }
.phases__track::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 2px; background: var(--line-strong); }
.section--pine .phases__track::before { background: rgba(255,255,255,.22); }
.phases__tab {
  position: relative; flex: 1 0 118px; scroll-snap-align: start;
  display: grid; justify-items: start; gap: 14px; padding: 0 10px 12px 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
}
.phases__tab .dot { width: 42px; height: 42px; border-radius: 50%; background: var(--sand); border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; color: var(--pine); transition: 0.2s var(--ease); position: relative; }
.section--pine .phases__tab .dot { background: var(--pine); border-color: rgba(255,255,255,.35); color: #fff; }
.phases__tab .label { font-size: 0.88rem; font-weight: 500; line-height: 1.3; max-width: 13ch; }
.phases__tab:hover .dot { border-color: var(--pine); }
.phases__tab[aria-selected="true"] .dot { background: var(--pine); border-color: var(--pine); color: #fff; box-shadow: 0 0 0 6px var(--greenish); }
.section--pine .phases__tab[aria-selected="true"] .dot { background: var(--sand); color: var(--pine); border-color: var(--sand); box-shadow: 0 0 0 6px rgba(180,196,186,.45); }
.phases__tab[aria-selected="true"] .label { font-weight: 600; }
.phases__tab.is-done .dot { background: var(--greenish-300); border-color: var(--greenish); }
.section--pine .phases__tab.is-done .dot { background: var(--pine-600); }
.phases__panel { margin-top: 36px; display: grid; gap: 28px; align-items: center; }
.phases__panel[hidden] { display: none; }
@media (min-width: 900px) { .phases__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.phases__panel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-img); }
.phases__panel .phase-no { font-family: var(--font-display); font-weight: var(--display-black); font-size: 1rem; color: var(--greenish); letter-spacing: 0.04em; }

/* ---------- Cases ---------- */
.case-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 960px) { .case-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; } .case-grid .case--feature { grid-row: span 2; } }
.case { position: relative; overflow: hidden; background: var(--pine); color: #fff; display: flex; min-height: 300px; isolation: isolate; border-radius: var(--radius-img); }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s var(--ease); }
.case::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,42,31,.05) 20%, rgba(17,42,31,.88) 100%); }
.case:hover img { transform: scale(1.04); }
.case__body { margin-top: auto; padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; max-width: 560px; }
.case__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.tag--light { background: var(--greenish-300); color: var(--pine); backdrop-filter: none; }
.case__title { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.case__title a { text-decoration: none; }
.case__title a::after { content: ""; position: absolute; inset: 0; }
.case__meta { font-size: 0.92rem; color: rgba(255,255,255,.85); }
.case--feature { min-height: 520px; }

/* ---------- Citat ---------- */
.quote { position: relative; overflow: hidden; }
.quote blockquote { margin: 0; display: grid; gap: 32px; max-width: 1040px; position: relative; z-index: 2; }
.quote p { font-family: var(--font-display); font-weight: var(--display-weight); color: #fff; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -0.015em; text-indent: -0.42em; }
.quote footer { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.84); }
.quote footer strong { color: #fff; display: block; font-weight: 600; }
.quote .circles { --size: 420px; right: -120px; bottom: -150px; }

/* ---------- Split-CTA (Projekt | Service) ---------- */
.dual-cta { display: grid; }
@media (min-width: 960px) { .dual-cta { grid-template-columns: 1fr 1fr; } }
.dual-cta__col { padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 80px); display: grid; gap: 22px; align-content: start; position: relative; overflow: hidden; }
.dual-cta__col--project { background: var(--sand); }
.dual-cta__col--service { background: var(--pine); color: rgba(255,255,255,.84); }
.dual-cta__col--service h2 { color: #fff; }
.dual-cta__col--service .eyebrow { color: var(--greenish); }
.dual-cta__col--service .eyebrow::before { background: var(--greenish); }
.phone-big { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: var(--display-black); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); color: #fff; text-decoration: none; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.phone-big:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.phone-big .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--sand); color: var(--pine); display: grid; place-items: center; flex: none; }

/* ---------- Skimlag (til direktøren) ---------- */
.skim { background: var(--sand-200); border: 1px solid var(--line); position: relative; }
.skim__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.skim__head p { font-size: var(--fs-small); color: var(--muted); }
.skim__head strong { color: var(--pine); font-weight: 600; }
.skim__grid { display: grid; }
.skim__col { padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.skim__col + .skim__col { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .skim__grid { grid-template-columns: repeat(3, 1fr); } .skim__col + .skim__col { border-top: 0; border-left: 1px solid var(--line); } }
.skim__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.skim__value { font-size: 1.2rem; color: var(--pine); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.skim__col p { font-size: 0.95rem; }

/* ---------- Sticky under-navigation ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; align-items: center; gap: 24px; }
.subnav ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav ul a { display: block; padding: 18px 12px; white-space: nowrap; font-size: 0.93rem; font-weight: 500; color: var(--muted); text-decoration: none; position: relative; }
.subnav ul a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--pine); transform: scaleX(0); transition: transform 0.25s var(--ease); transform-origin: left; }
.subnav ul a:hover { color: var(--pine); }
.subnav ul a.is-active { color: var(--pine); }
.subnav ul a.is-active::after { transform: scaleX(1); }
.subnav .btn { flex: none; }
@media (max-width: 720px) { .subnav .btn { display: none; } }

/* ---------- Parametre / specifikationer ---------- */
.params { display: grid; border-top: 1px solid var(--line-strong); }
.params div { display: grid; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .params div { grid-template-columns: minmax(180px, 4fr) 8fr; } }
.params dt { color: var(--pine); font-weight: 600; }
.params dd { margin: 0; }

/* ---------- Produktliste ---------- */
.product { display: grid; gap: 24px; padding-block: 36px; border-top: 1px solid var(--line); align-items: center; }
.product:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .product { grid-template-columns: 60px minmax(0, 3fr) minmax(0, 6fr) 150px; gap: 40px; } }
.product__no { font-family: var(--font-display); font-weight: var(--display-black); font-size: 1.1rem; color: var(--greenish); }
.product__img { aspect-ratio: 4/3; overflow: hidden; background: var(--grey); border-radius: var(--radius-img-sm); }
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product h3 { margin-bottom: 8px; }
.product .link-arrow { justify-self: start; }

/* ---------- Ekspert-/kontaktkort ---------- */
.contact-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 26px; background: #fff; border: 1px solid var(--line); }
.avatar--foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.03); flex: none; background: var(--sand-200); }
.avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--greenish); color: var(--pine); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--display-black); font-size: 1.5rem; position: relative; overflow: hidden; }
.avatar::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--pine); left: -18%; bottom: -18%; opacity: .16; }
.contact-card strong { display: block; color: var(--pine); font-size: 1.1rem; font-weight: 600; }
.contact-card .role { font-size: 0.92rem; color: var(--muted); }
.contact-card .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 0.95rem; }
.contact-card .links a { color: var(--pine); font-weight: 500; text-underline-offset: 3px; }

.cta-panel { display: grid; gap: 32px; background: var(--sand); padding: clamp(32px, 5vw, 72px); position: relative; overflow: hidden; }
@media (min-width: 960px) { .cta-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 64px; } }
.cta-panel .circles { --size: 240px; right: -40px; top: -110px; }
.form-card { position: relative; overflow: hidden; }
.form-card .circles { --size: 200px; right: -78px; bottom: -96px; opacity: .5; z-index: 0; }
.form-card > *:not(.circles) { position: relative; z-index: 1; }
.facts { position: relative; overflow: hidden; }
.facts .circles { --size: 150px; right: -58px; top: -62px; opacity: .45; }
.facts > *:not(.circles) { position: relative; z-index: 1; }
.dual-cta__col--project .circles { --size: 230px; left: -90px; bottom: -110px; opacity: .5; }
.clients { position: relative; overflow: hidden; }
.clients .circles { --size: 170px; right: -96px; top: -104px; opacity: .3; }
.clients > .container { position: relative; z-index: 1; }

/* ---------- Procesflow (diagram) ---------- */
.flow { list-style: none; display: grid; gap: 0; counter-reset: flow; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(var(--cols, 5), 1fr); } }
.flow li { position: relative; padding: 54px 20px 24px 0; display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--greenish); }
/* Cirklen på linjen – samme motiv som flyerens projektforløb */
.flow li::before { counter-increment: flow; content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg-flow, #fff); border: 2px solid var(--pine); box-sizing: border-box; }
/* Nummeret står under linjen med luft til den – som en lille overskrift over trinnet */
.flow li::after { content: counter(flow, decimal-leading-zero); position: absolute; top: 24px; left: 0; line-height: 1;
  font-family: var(--font-display); font-weight: var(--display-black); font-size: .82rem; color: var(--muted); letter-spacing: .08em; }
.flow li:first-child::before, .flow li:last-child::before { background: var(--pine); }
.flow li strong { color: var(--pine); font-weight: 600; }
.flow li span { font-size: 0.93rem; }
.section--grey .flow { --bg-flow: var(--grey); }
.section--sand .flow { --bg-flow: var(--sand); }

/* ---------- Faktaboks / case-sidebar ---------- */
.facts { background: var(--sand-200); border-top: 4px solid var(--pine); padding: 28px; display: grid; gap: 0; }
.facts dl { margin: 0; display: grid; }
.facts dl div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--pine); font-weight: 600; }
.sticky-col { position: sticky; top: calc(var(--header-h) + 90px); display: grid; gap: 18px; align-content: start; }
.contact-card--aside { border-radius: var(--radius-img); gap: 16px; padding: 20px; }
.contact-card--aside .avatar--foto { width: 60px; height: 60px; }
.contact-card--aside strong { font-size: 1rem; }
.contact-card--aside .links { font-size: .9rem; gap: 2px 12px; }

.prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.05vw, 2rem); margin-bottom: 18px; }
.prose p, .prose li, .prose blockquote p { max-width: 68ch; }
.prose .lead { max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.prose > section + section { margin-top: clamp(56px, 7vw, 96px); }
.prose figure { margin: 36px 0 0; }
.prose figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-img); box-shadow: var(--shadow-img); }
.figure--m { max-width: 560px; }
.figure--s { max-width: 400px; }
.figure--render img { object-fit: contain; background: linear-gradient(160deg, #fff 30%, var(--sand-200)); box-shadow: none; border: 1px solid var(--line); padding: 14px; }

.kontaktvej { display: flex; flex-wrap: wrap; gap: 12px; }
.kontaktvej .btn { flex: 1 1 260px; justify-content: center; }

/* ---------- Leveranceniveauer (formsprog fra flyeren) ---------- */
.niveauer { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.niveau { position: relative; display: grid; gap: 8px; align-content: start; padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius-img); text-decoration: none; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.niveau:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.niveau--sand { background: var(--sand-200); color: var(--text); }
.niveau--sage { background: var(--greenish-300); color: var(--text); }
.niveau--pine { background: var(--pine); color: rgba(255,255,255,.82); }
.niveau__mark { display: flex; align-items: center; margin-bottom: 18px; height: 40px; }
.niveau__cirkel { width: 40px; height: 40px; border-radius: 50%; display: block; }
.niveau__cirkel + .niveau__cirkel { margin-left: -14px; }
.niveau--sand .niveau__cirkel--1 { background: var(--pine); }
.niveau--sage .niveau__cirkel--1 { background: var(--pine); }
.niveau--sage .niveau__cirkel--2 { background: rgba(255,255,255,.66); }
.niveau--pine .niveau__cirkel--1 { background: var(--greenish); }
.niveau--pine .niveau__cirkel--2 { background: rgba(180,196,186,.55); }
.niveau--pine .niveau__cirkel--3 { background: #fff; }
.niveau__no { font-family: var(--font-display); font-weight: var(--display-black); font-size: .82rem; letter-spacing: .1em; color: var(--muted); }
.niveau--pine .niveau__no { color: var(--greenish); }
.niveau__navn { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); }
.niveau--pine .niveau__navn { color: #fff; }
.niveau__titel { font-size: 1.22rem; font-weight: 600; line-height: 1.25; color: var(--pine); margin-top: 6px; }
.niveau--pine .niveau__titel { color: #fff; }
.niveau__tekst { font-size: .96rem; margin-top: 2px; }
.niveau__link { margin-top: 14px; font-weight: 600; font-size: .95rem; color: var(--pine); display: inline-flex; align-items: center; gap: 8px; }
.niveau--pine .niveau__link { color: #fff; }
.niveau:hover .niveau__link .arrow { transform: translateX(4px); }
.niveau__link .arrow { transition: transform .25s var(--ease); }

/* ---------- Procesflow ---------- */
.procesflow { display: grid; gap: 14px; }
.procesflow__raekke { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: none; }
.procesflow__trin a { position: relative; display: grid; gap: 6px; align-content: start; height: 100%; padding: 18px 20px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-img); text-decoration: none;
  transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.procesflow__trin a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.procesflow__trin .n { font-family: var(--font-display); font-weight: var(--display-black); font-size: .85rem; color: var(--greenish); }
.procesflow__trin strong { color: var(--pine); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.procesflow__trin .t { font-size: .88rem; color: var(--muted); }
.procesflow__gaffel { display: grid; gap: 12px; padding: 4px 0; }
@media (min-width: 760px) { .procesflow__gaffel { grid-template-columns: 1fr 1fr; } }
.procesflow__vej { position: relative; padding: 18px 20px 20px 22px; background: var(--greenish-300); border-radius: var(--radius-img); }
.procesflow__vej::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--pine); }
.procesflow__vejnavn { font-weight: 600; color: var(--pine); margin-bottom: 6px; }
.procesflow__vej p { font-size: .92rem; }
.procesflow__tvaers { display: grid; gap: 10px; padding: 18px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-img); background: rgba(255,255,255,.55); }
.procesflow__tvaersnavn { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.procesflow__tvaers ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.procesflow__tvaers a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: .9rem; font-weight: 500; color: var(--pine); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.procesflow__tvaers a:hover { background: var(--pine); border-color: var(--pine); color: #fff; }

/* ---------- Formularer ---------- */
.form { display: grid; gap: 16px; max-width: 680px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: 0.88rem; font-weight: 600; color: var(--pine); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 11px 13px; font-size: 0.95rem; background: #fff; border: 1.5px solid #b9bfbb; border-radius: var(--radius-img-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pine-600); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px var(--greenish); }
.field .hint { font-size: 0.85rem; color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented label { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 48px; border: 1.5px solid #b9bfbb; background: #fff; cursor: pointer; font-weight: 600; color: var(--pine); transition: border-color 0.15s, background 0.15s; }
.segmented label span { font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.segmented input { position: absolute; left: 16px; top: 19px; width: 20px; height: 20px; accent-color: var(--pine); margin: 0; }
.segmented label:has(input:checked) { border-color: var(--pine); background: var(--sand-200); box-shadow: inset 0 0 0 1px var(--pine); }
.dropzone { border: 1.5px dashed var(--line-strong); background: var(--sand-200); padding: 24px; text-align: center; font-size: 0.93rem; color: var(--muted); cursor: pointer; }
.dropzone strong { color: var(--pine); }
.consent { display: flex; gap: 12px; font-size: 0.9rem; align-items: flex-start; }
.consent input { width: 20px; height: 20px; accent-color: var(--pine); margin-top: 2px; flex: none; }
.alert-box { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 20px; background: #fff4ec; border-left: 4px solid var(--alert); color: #5b2a14; font-size: 0.95rem; }
.alert-box[hidden] { display: none; }
.alert-box a { color: #5b2a14; font-weight: 700; }
.steps-ind { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--muted); }
.steps-ind i { width: 28px; height: 4px; background: var(--line-strong); display: block; }
.steps-ind i.on { background: var(--pine); }

/* ---------- Ikonknap (luk mobilmenu) ---------- */
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; color: var(--pine); }
.icon-btn:hover { background: var(--pine); color: #fff; border-color: var(--pine); }

/* ---------- Footer ---------- */
.site-footer { background: var(--pine-900); color: rgba(255,255,255,.76); position: relative; overflow: hidden; font-size: 0.95rem; }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__top { display: grid; gap: 48px; padding-block: clamp(64px, 8vw, 110px) 48px; position: relative; z-index: 2; }
@media (min-width: 960px) { .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; } }
.footer__brand img { width: 170px; }
.footer__brand p { margin-top: 22px; max-width: 34ch; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__cols h2 { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--greenish); margin-bottom: 16px; }
.footer__cols ul { list-style: none; display: grid; gap: 9px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-block: 24px 32px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 0.86rem; position: relative; z-index: 2; }
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .circles { --size: 520px; right: -140px; top: -220px; --c1: rgba(255,255,255,.035); --c2: rgba(180,196,186,.07); }

/* ---------- Redaktionelle noter (til præsentation) ---------- */
.note { display: none; }
body.show-notes .note {
  display: block; margin: 12px 0; padding: 10px 14px; font-size: 0.82rem; line-height: 1.45;
  background: #fff8d6; color: #5a4a00; border-left: 3px solid #d9b200; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-weight: 500;
}
body.show-notes .note::before { content: "Note · "; font-weight: 700; }
.notes-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 0.82rem; font-weight: 600; color: var(--pine); cursor: pointer; border-radius: 999px; }
.notes-toggle .sw { width: 30px; height: 18px; border-radius: 999px; background: #c9cfcb; position: relative; transition: background 0.2s; }
.notes-toggle .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.notes-toggle[aria-pressed="true"] .sw { background: var(--pine); }
.notes-toggle[aria-pressed="true"] .sw::after { transform: translateX(12px); }

/* ---------- Diverse ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.kpi-inline { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.93rem; }
.kpi-inline span { display: inline-flex; align-items: center; gap: 8px; }
.kpi-inline span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--greenish); }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.center { text-align: center; }
.video-frame { position: relative; background: #fff; }
.video-frame .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; background: var(--pine); color: #fff; box-shadow: 0 0 0 10px rgba(180,196,186,.5); }
.video-frame .play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-frame .label { position: absolute; left: 20px; bottom: 16px; font-size: 0.85rem; color: var(--muted); background: rgba(255,255,255,.9); padding: 6px 10px; }

@media print {
  .utility, .site-header, .site-footer, .notes-toggle, .subnav, .btn, .no-print { display: none !important; }
  body { font-size: 11pt; }
  .section { padding-block: 24px; }
}

/* ---------- Toast (sider uden for præsentationen) ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; background: var(--pine-900); color: #fff; padding: 14px 20px; font-size: 0.92rem; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }

/* ---------- Tilføjelser: undersider ---------- */
.page-hero__media--render { background: var(--sand); aspect-ratio: 16 / 10; }
.page-hero__media--render img { mix-blend-mode: multiply; }
.page-hero--pine .page-hero__media--render { background: linear-gradient(160deg, #fff 30%, var(--sand-200)); }
.page-hero--pine .page-hero__media--render img { mix-blend-mode: normal; }
.page-hero .video-frame .play { width: 72px; height: 72px; }

/* Procestrin-navigation (placering i osteriet) */
.stepnav { border-bottom: 1px solid var(--line); background: #fff; }
.stepnav .container { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.stepnav__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: none; }
.stepnav ol { list-style: none; display: flex; align-items: center; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.stepnav ol::-webkit-scrollbar { display: none; }
.stepnav li { display: flex; align-items: center; gap: 6px; flex: none; }
.stepnav li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }
.stepnav a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; text-decoration: none; font-size: .88rem; color: var(--muted); white-space: nowrap; }
.stepnav a .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--greenish); display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--pine); }
.stepnav a:hover { background: var(--grey); color: var(--pine); }
.stepnav a[aria-current="step"] { background: var(--pine); color: #fff; font-weight: 600; }
.stepnav a[aria-current="step"] .n { background: #fff; border-color: #fff; }
@media (max-width: 900px) { .stepnav__label { display: none; } }

/* Procesprincipper (to spor) */
.principles { display: grid; gap: 24px; }
@media (min-width: 960px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { background: #fff; padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; align-content: start; border-top: 4px solid var(--pine); }
.principle--alt { border-top-color: var(--greenish); }
.principle ol { list-style: none; display: grid; gap: 0; }
.principle li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; position: relative; padding-bottom: 18px; }
.principle li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 34px; bottom: 2px; width: 2px; background: var(--line-strong); }
.principle li .n { width: 36px; height: 36px; border-radius: 50%; background: var(--sand); color: var(--pine); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.principle li strong { color: var(--pine); display: block; font-weight: 600; margin-top: 5px; }
.principle li span { font-size: .93rem; }

/* Callout */
.callout { display: grid; gap: 14px; padding: 28px 30px; background: var(--sand); border-left: 6px solid var(--pine); }
.callout .h3 { margin: 0; }

/* Tegner · Udvikler · Producerer (designguide) */
.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--sand); padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: start; }
.pillar svg { color: var(--pine); width: 56px; height: 56px; }
.pillar h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }

/* Organisation i balance */
.balance { display: grid; gap: 14px; }
.balance__bar { display: grid; grid-template-columns: 1fr 1fr; height: 64px; }
.balance__bar span { display: flex; align-items: center; padding-inline: 20px; font-weight: 600; font-size: .95rem; }
.balance__bar span:first-child { background: var(--pine); color: #fff; }
.balance__bar span:last-child { background: var(--greenish); color: var(--pine); justify-content: flex-end; }
.balance__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: .92rem; }
.balance__legend p:last-child { text-align: right; }

/* Enkle nummererede kort */
.num-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); min-height: 100%; }
a.num-card { padding-bottom: 62px; }
a.num-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
a.num-card .arrow-circle { position: absolute; right: 22px; bottom: 20px; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: var(--pine);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
a.num-card:hover .arrow-circle { background: var(--pine); border-color: var(--pine); color: #fff; }
a.num-card .arrow-circle .arrow { margin: 0; }
.num-card { border-radius: var(--radius-img); padding: 26px 26px 28px; }
.num-card .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--greenish-300); color: var(--pine); font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  transition: background .2s var(--ease), color .2s var(--ease); }
.num-card:hover .n { background: var(--pine); color: #fff; }
.num-card:not(a):hover .n { background: var(--greenish-300); color: var(--pine); }
.num-card strong { color: var(--pine); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.num-card span.t { font-size: .95rem; color: var(--text); }
.num-card .arrow { color: var(--pine); margin-top: 6px; }
.section--sand .num-card, .section--grey .num-card { border-color: transparent; }

/* Galleri: lige store billeder med billedtekst under */
.gallery { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.gallery figure { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.gallery img, .prose .gallery img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-img); box-shadow: var(--shadow-img); background: var(--grey); }
.gallery img.is-render, .prose .gallery img.is-render { aspect-ratio: 4 / 3 !important; object-fit: contain; box-shadow: none;
  border: 1px solid var(--line); padding: 14px; background: linear-gradient(165deg, #fff 25%, var(--sand-200)); }
.gallery figcaption { position: static; background: none; padding: 0; font-size: var(--fs-small); color: var(--muted); display: flex; gap: 10px; line-height: 1.4; }
.gallery figcaption::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--greenish); margin-top: 0.62em; }
.gallery--feature { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 860px) {
  .gallery--feature { grid-template-columns: 1.6fr 1fr; }
  .gallery--feature figure:first-child img { aspect-ratio: 3 / 2; }
}

/* Case-layout */
.case-layout { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1024px) { .case-layout { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); align-items: start; } }
.case-quote { position: relative; margin: 0; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px) clamp(26px, 3vw, 40px);
  background: var(--sand-200); border-radius: var(--radius-img); border-left: 4px solid var(--pine); overflow: hidden; }
.case-quote::before { content: "\201C"; position: absolute; right: 18px; top: -14px; font-family: var(--font-display);
  font-size: 9rem; line-height: 1; color: var(--greenish); opacity: .5; pointer-events: none; }
.case-quote p { position: relative; max-width: 46ch; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.34; color: var(--pine); font-weight: 500; letter-spacing: -.015em; }
.case-quote footer { margin-top: 18px; font-size: .92rem; color: var(--muted); }
.result-band { display: grid; gap: 1px; background: var(--line); margin-top: 28px; }
@media (min-width: 720px) { .result-band { grid-template-columns: repeat(3, 1fr); } }
.result-band div { background: var(--sand-200); padding: 22px; }
.result-band strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 800; color: var(--pine); letter-spacing: -.02em; line-height: 1.05; }
.result-band span { font-size: .9rem; }

/* Service */
.service-hero-phone { display: grid; gap: 8px; padding: 24px 26px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); max-width: 520px; }
.service-hero-phone small { color: rgba(255,255,255,.75); font-size: .88rem; }
.form-layout { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1024px) { .form-layout { grid-template-columns: minmax(0, 6fr) minmax(280px, 4fr); align-items: start; } }
.form-card { background: #fff; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-img); }
.success { text-align: center; padding: 40px 12px; display: grid; gap: 16px; justify-items: center; }
.success[hidden] { display: none; }
.success .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--greenish-300); color: var(--pine); display: grid; place-items: center; }

/* ---------- Skalavalg over osteriet (Specialudstyr / Linje / Turnkey) ---------- */
.scope { display: grid; gap: 22px; }
.scope__tabs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .scope__tabs { grid-template-columns: repeat(3, 1fr); } }
.scope__tab {
  display: grid; gap: 4px; align-content: start; padding: 20px 22px; text-align: left;
  background: #fff; border: 0; cursor: pointer; position: relative;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.scope__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pine); transform: scaleY(0); transform-origin: bottom; transition: transform .2s var(--ease); }
.scope__tab:hover { background: var(--sand-200); }
.scope__tab[aria-selected="true"] { background: var(--sand); }
.scope__tab[aria-selected="true"]::after { transform: scaleY(1); }
.scope__no { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--greenish); }
.scope__tab[aria-selected="true"] .scope__no { color: var(--pine); }
.scope__label { font-size: 1.22rem; font-weight: 600; color: var(--pine); letter-spacing: -.01em; }
.scope__sub { font-size: .92rem; color: var(--muted); }
.scope__caption { max-width: 78ch; font-size: 1.02rem; color: var(--text); min-height: 3em; }
.scope__cta { margin: 0; }

/* Dæmpede hotspots, når skalaen ikke omfatter dem */
.hotspot.is-out, .osteri__list a.is-out { opacity: .3; }
.hotspot.is-out { box-shadow: none; }
.hotspot.is-out::before { display: none; }
.osteri__stage.has-frame::after {
  content: ""; position: absolute; inset: 4% 2% 6%; border: 2px dashed var(--pine);
  pointer-events: none; animation: frameIn .4s var(--ease);
}
@keyframes frameIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.osteri__stage.has-frame .frame-label {
  position: absolute; left: 2%; top: calc(4% - 14px); background: var(--pine); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px;
}

/* ---------- Casefiltre ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.chip {
  padding: 9px 16px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--pine);
  font-size: .92rem; font-weight: 500; cursor: pointer; border-radius: 999px; transition: .15s var(--ease);
}
.chip:hover { border-color: var(--pine); }
.chip[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.filter-count { font-size: .92rem; color: var(--muted); margin-left: auto; }
.case-card[hidden] { display: none; }

/* ---------- Kontaktside ---------- */
.contact-routes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .contact-routes { grid-template-columns: repeat(4, 1fr); } }
.route { background: #fff; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; position: relative; transition: background .2s; }
.route:hover { background: var(--sand-200); }
.route strong { color: var(--pine); font-size: 1.12rem; font-weight: 600; }
.route span.t { font-size: .94rem; }
.route .val { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--pine); display: inline-flex; align-items: center; gap: 10px; }
.route .val .arrow { flex: none; transition: transform .25s var(--ease); }
.route:hover .val .arrow { transform: translateX(4px); }
.info-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
.info-grid > div { background: var(--sand-200); padding: 24px 26px; display: grid; gap: 6px; align-content: start; }
.info-grid dt, .info-grid .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info-grid dd, .info-grid .v { margin: 0; color: var(--pine); font-weight: 500; line-height: 1.5; }
.map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; color: var(--pine); font-size: .93rem; }
.people { display: grid; gap: 16px; }

/* Medarbejderkort */
.team { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.person:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.person__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-200); }
.person__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.person__body { padding: 16px 18px 20px; display: grid; gap: 2px; }
.person__body strong { color: var(--pine); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.person__body .role { font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
.person__link { font-size: .9rem; color: var(--pine); font-weight: 500; text-decoration: none; text-underline-offset: 3px; overflow-wrap: anywhere; }
.person__link:hover { text-decoration: underline; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(2, 1fr); } }
.receipt { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; background: var(--greenish-300); color: var(--pine); font-size: .95rem; align-items: center; }
.receipt strong { font-weight: 600; }

/* ---------- Kundelogoer ---------- */
.clients__list li { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; }
.clients__list img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .25s var(--ease), opacity .25s var(--ease); }
/* Brede ordmærker må fylde lidt mindre i højden, så alle logoer vejer ens */
.clients__list img.logo--bred { max-height: 26px; }


.clients__rammer { display: grid; gap: 20px clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .clients__rammer { grid-template-columns: minmax(170px, 210px) 1fr; } }
.clients__list li:hover img { filter: none; opacity: 1; }
.clients__list img.logo--invert { filter: grayscale(1) invert(1); opacity: .55; }
.clients__list li:hover img.logo--invert { filter: invert(1); opacity: .8; }
.clients__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; letter-spacing: -.01em; color: #6f7671; }

.footer__tagline { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--greenish); }
.footer__adskil { opacity: .4; margin: 0 6px; }

/* ---------- Kontrolrapport (smiley) i footer ---------- */
.smiley { display: inline-grid; gap: 8px; margin-top: 24px; justify-items: start; text-decoration: none; }
.smiley img { max-width: 260px; background: #fff; padding: 6px; }
.smiley span { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; }
.smiley:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Brandfarverne som flader (forslag 30/9, bruges først på Forprojekter) ----------
   Rytme: sand → overblik i sand/sage/pine → hvid med sandflade → pine → sand → sage → pine.
   Farverne følger flyeren: pine-blokke som ankre, sage som linjer og tekst på pine, sand bag renderinger. */
.section--klip { overflow: hidden; overflow: clip; }

/* Overblik (skimlag) i brandets rækkefølge sand → sage → pine */
.skim--farver { background: #fff; border: 0; border-radius: var(--radius-img); overflow: hidden;
  box-shadow: 0 1px 0 rgba(17, 42, 31, .05), 0 28px 60px -34px rgba(17, 42, 31, .45); }
.skim--farver .skim__head { border-bottom: 0; }
.skim--farver .skim__col { border: 0 !important; }
.skim--farver .skim__col:nth-child(1) { background: var(--sand-200); }
.skim--farver .skim__col:nth-child(2) { background: var(--greenish-300); }
.skim--farver .skim__col:nth-child(3) { background: var(--pine); color: rgba(255, 255, 255, .84); }
.skim--farver .skim__label { color: var(--pine); }
.skim--farver .skim__col:nth-child(3) .skim__label { color: var(--greenish); }
.skim--farver .skim__col:nth-child(3) .skim__value,
.skim--farver .skim__col:nth-child(3) .link-arrow { color: #fff; }
.skim--farver .skim__col:nth-child(3) :focus-visible { --focus: var(--sand); }

/* Sandflade bag en 3D-rendering – renderingens hvide bund blandes væk, så anlægget står på sand */
.flade { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--radius-img); padding: clamp(24px, 4vw, 56px); }
.flade > .circles { --size: 280px; --c1: var(--greenish); --c2: rgba(255, 255, 255, .7); right: -80px; top: -110px; opacity: .6; }
.flade > img, .flade > figcaption { position: relative; }
.flade img.is-render { mix-blend-mode: multiply; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.flade figcaption { color: var(--text); }
@media (min-width: 960px) {
  .flade--hoejre { margin-right: calc(var(--kant) * -1); padding-right: calc(var(--kant) + 12px); border-radius: var(--radius-img) 0 0 var(--radius-img); }
  .flade--venstre { margin-left: calc(var(--kant) * -1); padding-left: calc(var(--kant) + 12px); border-radius: 0 var(--radius-img) var(--radius-img) 0; }
}

/* Leverancer på pine – som flyerens felt med sage-streger */
.leverancer { list-style: none; display: grid; grid-template-columns: 1fr; column-gap: clamp(20px, 3vw, 44px); }
@media (min-width: 640px) { .leverancer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .leverancer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leverancer li { position: relative; padding: 20px 0 24px 38px; border-top: 1px solid rgba(180, 196, 186, .38);
  color: #fff; font-weight: 500; font-size: 1.06rem; line-height: 1.4; }
.leverancer li::before { content: ""; position: absolute; left: 0; top: 21px; width: 22px; height: 22px; border-radius: 50%; background: var(--greenish); }
.leverancer li::after { content: ""; position: absolute; left: 8px; top: 26px; width: 5px; height: 10px;
  border: solid var(--pine); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Sage-sektion: brandets Green-ish som flade – tekst i pine, renderingen som et hvidt "dokument" */
.section--sage { background: var(--greenish); color: var(--pine-800); }
.section--sage .lead { color: var(--pine-800); }
.section--sage .eyebrow::before { background: var(--pine); }
.section--sage .btn--outline { --btn-bd: rgba(29, 70, 52, .45); }
.section--sage .split__media .is-render { mix-blend-mode: normal; background: #fff; border: 0; padding: clamp(12px, 1.6vw, 22px);
  box-shadow: 0 34px 64px -38px rgba(17, 42, 31, .6); }
.section--sage .split__media figcaption { color: var(--pine-800); }
.section--sage .split__media figcaption::before { background: var(--pine); }
.circles--sage { --c1: rgba(29, 70, 52, .14); --c2: rgba(255, 255, 255, .38); }

/* Afslutning: næste skridt og kontaktpersoner i én pine-blok (som flyerens bagside) */
.afslutning__grid { display: grid; gap: clamp(40px, 5vw, 72px); position: relative; z-index: 1; }
@media (min-width: 960px) { .afslutning__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.afslutning__kontakt { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(180, 196, 186, .28); border-radius: var(--radius-img); background: rgba(255, 255, 255, .04); }
.afslutning__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--greenish); }
.kontakt-mini { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding-top: 18px; border-top: 1px solid rgba(180, 196, 186, .28); }
.kontakt-mini .avatar--foto { width: 64px; height: 64px; }
.kontakt-mini strong { display: block; color: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.kontakt-mini .role { font-size: .9rem; color: var(--greenish); }
.kontakt-mini .links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font-size: .93rem; }
.kontakt-mini .links a { color: #fff; text-underline-offset: 3px; }
.afslutning__kontakt .link-arrow { margin-top: 4px; justify-self: start; }

/* ==========================================================================
   FARVESYSTEM (farveguiden, godkendt 30/9 2026)
   Rytme: hero sand → hvid og farvet flade skiftevis → pine som ét anker → footer pine dyb.
   Kort og bokse får farve efter fladen, de står på (--kort), og har ingen ramme.
   ========================================================================== */
:root { --kort: var(--sand-200); --kort-hover: var(--sand); --panel: var(--sand); }
.section--sand, .section--grey, .section--sage-lys, .section--sand-light { --kort: #fff; --kort-hover: #fff; }
.section--sand { --panel: #fff; }
.section--pine { --kort: transparent; --kort-hover: rgba(255, 255, 255, .04); }

/* Lys sage som flade (én gang pr. side) */
.section--sage-lys { background: var(--greenish-300); --muted: #45524a; }
.section--sage-lys .lead, .section--sage-lys p { color: #34403a; }
.section--sage-lys .eyebrow::before { background: var(--pine); opacity: .35; }
.section--sage-lys .flow { --bg-flow: var(--greenish-300); }
.section--sage-lys .flow li { border-top-color: rgba(29, 70, 52, .35); }

/* Heroen er altid sand – også på service og cases (tidligere pine) */
.page-hero--pine { background: var(--sand); color: var(--text); }
.page-hero--pine h1 { color: var(--heading); }
.page-hero--pine .eyebrow { color: var(--pine); }
.page-hero--pine .breadcrumb, .page-hero--pine .breadcrumb a { color: var(--muted); }
.page-hero--pine .lead { color: var(--text); }
.page-hero--pine .circles--pine { --c1: rgba(29, 70, 52, .5); --c2: rgba(180, 196, 186, .5); }
.page-hero--pine .page-hero__media--render { background: var(--sand); }
.page-hero--pine .page-hero__media--render img { mix-blend-mode: multiply; }
.page-hero--pine .tag { background: rgba(29, 70, 52, .1); color: var(--pine); backdrop-filter: none; }
.page-hero--pine .btn--light { --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine); }
.page-hero--pine .btn--light:hover { --btn-bg: var(--pine-900); --btn-bd: var(--pine-900); }
.page-hero--pine .btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--pine); --btn-bd: var(--line-strong); }
.page-hero--pine .btn--ghost-light:hover { --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine); }
.page-hero--pine .service-hero-phone { background: rgba(255, 255, 255, .6); border-color: var(--line); }
.page-hero--pine .service-hero-phone small { color: var(--muted); }
.page-hero--pine .phone-big { color: var(--pine); }
.page-hero--pine .phone-big .ic { background: var(--pine); color: #fff; }
.page-hero--pine :focus-visible { --focus: var(--pine); }

/* Kort uden rammer – farven kommer fra fladen */
.card, .num-card, .tile, .person, .procesflow__trin a, .contact-card, .route {
  background: var(--kort); border-color: transparent; }
.card:hover, a.num-card:hover, .tile:hover, .person:hover, .procesflow__trin a:hover { border-color: transparent; }
.card__media--render, .card__media { background: var(--sand); }
.contact-routes { background: transparent; border: 0; gap: 12px; }
.route { border-radius: var(--radius-img); }
.route:hover { background: var(--kort-hover); box-shadow: var(--shadow); }
.contact-card { border-radius: var(--radius-img); }
.section--pine .num-card, .section--pine .tile { border-top: 1px solid rgba(180, 196, 186, .45); border-radius: 0; padding-inline: 0; }
.section--pine .num-card strong, .section--pine .tile strong { color: #fff; }
.section--pine .num-card span.t, .section--pine .tile span { color: rgba(255, 255, 255, .8); }
.section--pine .num-card .n, .section--pine .tile__no { background: var(--greenish); color: var(--pine); }
/* Ét fremhævet kort pr. gruppe (valgfrit): pine med hvid tekst */
.num-card--pine { background: var(--pine) !important; }
.num-card--pine strong { color: #fff; }
.num-card--pine span.t { color: rgba(255, 255, 255, .84); }
.num-card--pine .n { background: var(--greenish); color: var(--pine); }
.num-card--pine .arrow-circle { border-color: rgba(255, 255, 255, .4); color: #fff; }

/* Mellembokse: sandpanel med sage-streg øverst, skarpe hjørner */
.callout { background: var(--panel); border-left: 0; position: relative; padding-top: 38px; }
.callout::before { content: ""; position: absolute; left: 30px; top: 22px; width: 40px; height: 5px; background: var(--greenish); border-radius: 2px; }
.cta-panel { background: var(--panel); }

/* "Kort fortalt": tre felter i brandets rækkefølge sand → sage → pine (på alle sider) */
.skim { background: #fff; border: 0; border-radius: var(--radius-img); overflow: hidden;
  box-shadow: 0 1px 0 rgba(17, 42, 31, .05), 0 28px 60px -34px rgba(17, 42, 31, .45); }
.skim__head { border-bottom: 0; }
.skim__col { border: 0 !important; }
.skim__col:nth-child(1) { background: var(--sand-200); }
.skim__col:nth-child(2) { background: var(--greenish-300); }
.skim__col:nth-child(3) { background: var(--pine); color: rgba(255, 255, 255, .84); }
.skim__label { color: var(--pine); }
.skim__col:nth-child(3) .skim__label { color: var(--greenish); }
.skim__col:nth-child(3) .skim__value, .skim__col:nth-child(3) .link-arrow, .skim__col:nth-child(3) strong, .skim__col:nth-child(3) a { color: #fff; }
.skim__col:nth-child(3) :focus-visible { --focus: var(--sand); }

/* Portræt i logoets form: foto i cirkel med en sage-cirkel bagved */
/* Rammen (tilføjes af build.py) bærer ring og sage-cirkel – så gråtonefilteret på fotoet ikke gør cirklen grå */
.avatar-ramme { display: inline-block; flex: none; line-height: 0; border-radius: 50%; margin-right: 14px;
  box-shadow: 0 0 0 4px var(--kort, #fff), 18px -5px 0 0 var(--greenish); }
.contact-card--aside .avatar-ramme { margin-right: 10px; box-shadow: 0 0 0 3px var(--kort, #fff), 13px -4px 0 0 var(--greenish); }
.kontakt-mini .avatar-ramme, .section--pine .avatar-ramme, .quote footer .avatar-ramme { box-shadow: 0 0 0 4px var(--pine), 16px -5px 0 0 rgba(180, 196, 186, .45); }

/* 3D-renderinger står på sand (hvid bund blandes væk) */
.split__media:not(.flade):has(> .is-render) { background: var(--sand); border-radius: var(--radius-img); padding: clamp(16px, 2.4vw, 32px); }
.split__media:not(.flade):has(> .is-render) > .is-render { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; mix-blend-mode: multiply; }
.section--sand .split__media:not(.flade):has(> .is-render) { background: #fff; }
.section--sand .split__media:not(.flade):has(> .is-render) > .is-render { mix-blend-mode: normal; }
.split__media:not(.flade):has(> .is-render) figcaption { color: var(--text); }

/* Sandpanel-bro: sidste sektion før footeren, panelet ligger hen over skiftet til pine dyb */
.bro-sektion { background: linear-gradient(180deg, #fff 0 50%, var(--pine-900) 50% 100%); padding-block: clamp(48px, 6vw, 88px) 0; }
.bro-sektion + .site-footer .footer__top { padding-top: clamp(40px, 5vw, 72px); }
.bro-panel { position: relative; overflow: hidden; background: var(--sand); padding: clamp(32px, 5vw, 64px); display: grid; gap: 28px; }
@media (min-width: 960px) { .bro-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 56px; } }
.bro-panel .circles { --size: 240px; --c1: rgba(29, 70, 52, .5); --c2: rgba(180, 196, 186, .5); right: 8%; top: -118px; }
.bro-panel > *:not(.circles) { position: relative; z-index: 1; }
.bro-panel__handling { display: grid; gap: 14px; justify-items: start; }
.bro-panel__service { font-size: var(--fs-small); color: var(--text); padding-top: 14px; border-top: 1px solid var(--line-strong); width: 100%; }
.bro-panel__service a { color: var(--pine); font-weight: 600; }

/* Leverancer på lys sage (Forprojekter) */
.section--sage-lys .leverancer li { color: var(--pine); border-top-color: rgba(29, 70, 52, .22); }
.section--sage-lys .leverancer li::before { background: var(--pine); }
.section--sage-lys .leverancer li::after { border-color: #fff; }

/* Logolinjen samlet med cases på den grå pause (forsiden) */
.clients--i-cases { margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid var(--line-strong); }

/* Tags i heroen står på sand (heroen er altid sand nu) */
.page-hero .tag { background: rgba(29, 70, 52, .1); color: var(--pine); backdrop-filter: none; }
/* Flueben-prikker og nummerprikker skal kunne ses på lys sage */
.section--sage-lys .checklist li::before { background: #fff; }
.section--sage-lys .tile__no, .section--sage-lys .num-card .n { background: var(--greenish-300); }

/* Telefonboksen i HSV Service-heroen på sand (tidligere afhængig af page-hero--pine) */
.page-hero .service-hero-phone { background: rgba(255, 255, 255, .6); border-color: var(--line); }
.page-hero .service-hero-phone small { color: var(--muted); }
.page-hero .phone-big { color: var(--pine); }
.page-hero .phone-big .ic { background: var(--pine); color: #fff; }

/* Kontaktpersoner (kontakt og karriere): runde portrætter i logoets form –
   foto i cirkel med en sage-cirkel bagved, som bliver pine, når man peger på kortet */
.team .person { padding: 26px 22px 22px; }
.team .person__img { width: 124px; height: 124px; aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--sand-200); margin: 10px 30px 16px 0;
  box-shadow: 0 0 0 5px var(--kort, #fff), 24px -9px 0 0 var(--greenish); transition: box-shadow .25s var(--ease); }
.team .person__img img { object-position: 50% 20%; }
.team .person:hover .person__img { box-shadow: 0 0 0 5px var(--kort, #fff), 24px -9px 0 0 var(--pine); }
.team .person__body { padding: 0; }
@media (max-width: 719px) { .team .person__img { width: 96px; height: 96px; box-shadow: 0 0 0 4px var(--kort, #fff), 18px -7px 0 0 var(--greenish); } }

/* Hovedmenu: "Løsninger" og "Udstyr" er links til oversigtssiderne; pilen ved siden af folder
   undermenuen ud (klik, tastatur og touch). Mouseover på hele punktet åbner stadig undermenuen. */
.nav__gruppe { display: flex; align-items: center; }
.nav__gruppe .nav__link { padding-right: 4px; }
.nav__gruppe .nav__link::after { right: 4px; }
.nav__udfold { display: grid; place-items: center; width: 28px; height: 40px; margin-right: 6px; padding: 0; border: 0; background: none;
  color: var(--pine); cursor: pointer; border-radius: var(--radius); }
.nav__udfold:hover { background: var(--grey); }
.nav__udfold .chev { transition: transform .2s; }
.nav__udfold[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__gruppe:has(.nav__udfold[aria-expanded="true"]) .nav__link::after { transform: scaleX(1); }
.footer__cols h2 a { color: inherit; text-decoration: none; }
.footer__cols h2 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) { .nav__udfold { width: 22px; margin-right: 0; } .nav__gruppe .nav__link { padding-right: 2px; } .nav__list { gap: 0; } .site-header__bar { gap: 20px; } }
@media (min-width: 1081px) and (max-width: 1140px) { .nav__link { padding: 0 7px; font-size: .9rem; } .site-header__cta { padding-inline: 14px; gap: 10px; } .brand img { width: 118px; } }

/* ---------- Kortet som 3D-model eller 2D-kort ---------- */
.osteri-visning__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.osteri-visning__bar[hidden] { display: none; }
.visningsvalg { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); }
.visningsvalg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--pine); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.visningsvalg button:hover { background: var(--grey); }
.visningsvalg button[aria-pressed="true"] { background: var(--pine); color: #fff; }
.osteri-visning__bar .osteri-3d { margin: 0; }
.osteri-visning__bar .osteri-3d .hsv3d-knap { min-height: 44px; padding: 10px 18px; background: transparent; color: var(--pine);
  box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: .95rem; }
.osteri-visning__bar .osteri-3d .hsv3d-knap:hover { background: var(--pine); color: #fff; box-shadow: inset 0 0 0 1.5px var(--pine); }
.osteri-3d-ramme { height: clamp(540px, 74vh, 780px); }
.osteri-3d-ramme[hidden] { display: none; }
.osteri-3d-ramme iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
.osteri-3d-ramme { position: relative; background: #fff; }
.osteri-3d-ramme:empty::after { content: "3D-modellen indlæses …"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--pine); font-weight: 600; }

/* ---------- Rettelser efter den visuelle gennemgang (30/9) ---------- */
/* Dæmpet tekst skal holde AA på sand og lys sage */
:root { --muted: #5f5f5f; }
/* p.h3 (callouts, mega-menu) er overskrifter og skal være pine – hvide på pine */
.h3 { color: var(--heading); }
.section--pine .h3, .niveau--pine .h3 { color: #fff; }
/* Mellembokse og søjler på hvid er lys sand, så de ikke smelter sammen med en sand hero eller sand sektion */
:root { --panel: var(--sand-200); }
.pillar { background: var(--kort); }
.section--sand .pillar { background: #fff; }
/* Render-rammer: hvide kort på sand (hero) – og renderingen blandes ind i kortets egen bund */
.page-hero__media--render { background: #fff; }
.card__media--render .is-render { background: none; mix-blend-mode: multiply; }
/* Sandflade lige ved siden af en sand sektion bliver grå pause i stedet (ellers sand – hvid – sand) */
.section--sand + .section .flade, .section:has(+ .section--sand) .flade { background: var(--grey); }
/* Numre og faseetiketter i mørkere sage, så de kan læses */
.product__no, .procesflow__trin .n, .phases__panel .phase-no, .scope__no { color: #4f6b5c; }
.section--pine .phases__panel .phase-no { color: var(--greenish); }
/* Fasesporet: den valgte fases glorie må ikke klippes af */
.phases__track { padding: 8px 8px 16px; margin: -8px -8px 0; }
.phases__tab { padding-right: 14px; }
/* Pile i links må ikke skrumpe eller hænge løst, når teksten brydes */
.link-arrow .arrow { flex: none; }
.product .link-arrow { white-space: nowrap; }
/* Sidespalten med designparametre må kun være fast (sticky), når der er to kolonner */
@media (max-width: 959px) { .sticky-col { position: static; } }
/* Kontaktsiden: ingen rammer på infoboksene; én kolonne til medarbejderne på små mobiler */
.info-grid { background: transparent; border: 0; gap: 12px; }
.info-grid > div { border-radius: var(--radius-img); }
@media (max-width: 479px) { .team { grid-template-columns: 1fr; } }
/* Kort på lys sage: nummer og pil skal være synlige ved hover */
.section--sage-lys a.num-card:hover .n { background: var(--pine); color: #fff; }
a.num-card:hover .arrow-circle .arrow { color: #fff; }
/* Mobil: cirkelgrupper er hjørnedekoration – ikke bag brødkrumme, eyebrow eller overskrift */
@media (max-width: 767px) {
  .page-hero .circles { --size: 140px; top: -92px; right: -44px; }
  .section > .circles { --size: 220px !important; top: -150px !important; right: -120px !important; left: auto !important; bottom: auto !important; }
}
@media (min-width: 860px) { .product { grid-template-columns: 60px minmax(0, 3fr) minmax(0, 6fr) auto; } }
/* Renderinger i egen ramme: hvid flade som renderens egen baggrund – ingen hvid kasse inde i rammen */
.is-render, .gallery img.is-render, .prose .gallery img.is-render { background: #fff; }
/* Et ulige sidste kort i et 3-kolonners grid fylder hele rækken i stedet for at hænge alene */
@media (min-width: 720px) {
  .cards--3 > .num-card--bred { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: center; }
  .cards--3 > .num-card--bred .n { grid-row: span 2; }
}
/* 2D-kortets styrelinje: modulnavn, "Tilbage" og synsvinkler står over billedet – aldrig oven på prikkerne */
.osteri__styr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 44px; margin-bottom: -8px; }
.osteri__styr .osteri__tag, .osteri__styr .osteri__back, .osteri__styr .osteri__views { position: static; inset: auto; z-index: auto; box-shadow: none; }
.osteri__styr .osteri__tag { margin: 0; padding: 10px 18px; font-size: .95rem; line-height: 1.35; }
.osteri__styr .osteri__back { min-height: 44px; padding: 10px 18px; background: transparent; color: var(--pine); box-shadow: inset 0 0 0 1.5px var(--pine); }
.osteri__styr .osteri__back:hover { background: var(--pine); color: #fff; }
.osteri__styr .osteri__views { margin-left: auto; background: var(--kort); }
.osteri__styr .osteri__views[hidden] { display: none; }
@media (max-width: 720px) {
  .osteri__styr .osteri__views { margin-left: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .osteri__styr .osteri__views button { flex: none; }
}
/* Prikkerne følger kortets bredde (38 px → 30 px), så tætte prikker ikke rører hinanden på tablets */
.osteri__stage { container-type: inline-size; }
.hotspot:not(.hotspot--line):not(.hotspot--module) { width: clamp(30px, 4.2cqi, 38px); height: clamp(30px, 4.2cqi, 38px); }
.hotspot--module { width: clamp(40px, 5.8cqi, 52px); height: clamp(40px, 5.8cqi, 52px); }
.osteri__rul-hint { display: none; }
@media (max-width: 720px) {
  .hotspot--line { width: auto; height: auto; }   /* procesvej-knapperne beholder pilleformen på mobil */
  /* Inde i et modul kan billedet stryges sidelæns i en læsbar størrelse; oversigten passer til skærmen */
  .osteri__rul { margin-inline: calc(var(--gutter) * -1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .osteri__rul .osteri__stage { margin-inline: 0; }
  .osteri:not([data-visning="overview"]) .osteri__stage { width: 720px; }
  .osteri:not([data-visning="overview"]) .osteri__rul-hint { display: block; margin-top: -14px; font-size: var(--fs-small); color: var(--muted); }
}
/* Tekstboksen skubbes ind, så den ikke skæres af billedets kant (placerTip i hsv.js) */
.hotspot-tip { translate: var(--ret-x, 0px) var(--ret-y, 0px); }
@media (max-width: 720px) {
  /* Telefon: tekstboksen står under billedet i stedet for oven på det */
  .osteri > .hotspot-tip { position: relative; left: auto; top: auto; width: auto; margin-top: -10px; animation: none; transform: none !important; translate: none !important; }
  /* Synsvinkel-knapperne brydes i stedet for at blive skåret af */
  .osteri__styr .osteri__views { flex-wrap: wrap; overflow: visible; border-radius: 22px; }
}
/* Tekstboksen ved siden af prikken, når der ikke er plads over eller under (tablets og små skærme) */
.hotspot-tip.is-side-right { transform: translate(34px, -50%); animation-name: tipInSide; }
.hotspot-tip.is-side-left { transform: translate(calc(-100% - 34px), -50%); animation-name: tipInSide; }
@keyframes tipInSide { from { opacity: 0; } }
/* Tekstboksen må aldrig spærre for prikkerne: kun linket i den kan klikkes. Den toner blot frem på sin plads
   (før gled den ind fra pladsen over prikken – hen over selve prikken – så et klik ramte boksen i stedet) */
.osteri .hotspot-tip { pointer-events: none; animation: tipFade .2s var(--ease); }
.osteri .hotspot-tip a { pointer-events: auto; }
@keyframes tipFade { from { opacity: 0; } }

/* ==========================================================================
   INVESTERINGSGRUNDLAG (1/10): værdikategorier (forside), trin (Forprojekter),
   "Kort fortalt" med datapunkter og intern kundeværdi på casene
   ========================================================================== */
/* Forside: seks værdikategorier – hvide kort på sand */
.vaerdier { list-style: none; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 680px) { .vaerdier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vaerdier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vaerdi { background: var(--kort); border-radius: var(--radius-img); padding: clamp(22px, 2.4vw, 30px); display: grid; gap: 12px; align-content: start; }
.vaerdi__ikon { width: 60px; height: 60px; border-radius: 50%; background: var(--greenish-300); display: grid; place-items: center; color: var(--pine); }
.vaerdi__ikon svg { width: 34px; height: 34px; }
.vaerdi h3 { font-size: 1.15rem; font-weight: 600; color: var(--pine); line-height: 1.3; margin-top: 4px; }
.vaerdi p { font-size: .95rem; }
.vaerdi-fod { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.vaerdi-fod p { max-width: 64ch; }

/* Forprojekter: tre trin fra baseline til investeringsgrundlag – hvide kort på sand */
.trin3 { list-style: none; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; counter-reset: trin; }
@media (min-width: 960px) { .trin3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trin { background: var(--kort); border-radius: var(--radius-img); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 14px; align-content: start; }
.trin__hoved { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.trin__n { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--pine); color: #fff; font-weight: 700; font-size: .95rem; }
.trin__navn { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); }
.trin h3 { font-size: 1.15rem; font-weight: 600; color: var(--pine); line-height: 1.3; }
.trin .checklist { gap: 9px; font-size: .95rem; }
.afgraensning { margin-top: clamp(24px, 3vw, 40px); max-width: 920px; }

/* "Kort fortalt": datapunkterne for beregningen som små mærker, og en fælles bundlinje */
.skim__data { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.skim__data li { background: #fff; color: var(--pine); border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 600; line-height: 1.3; }
.skim__col .skim__value { font-size: 1.08rem; }
.skim__fod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 18px clamp(20px, 3vw, 36px); }
.skim__fod p { font-size: var(--fs-small); color: var(--text); max-width: 60ch; }
.skim__fod .links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Casene: dokumenteret kundeværdi – kun internt (?intern=1), til tallene er bekræftet og godkendt af kunden */
body.show-notes .note--blok h2 { font-size: 1rem; margin: 0 0 6px; color: inherit; }
body.show-notes .note--blok ul { margin: 6px 0 0 18px; list-style: disc; }
body.show-notes .note--blok li { margin: 2px 0; }
/* Renderinger i produktlisten vises hele (aldrig beskåret) på hvid flade */
.product__img--render { background: #fff; display: grid; place-items: center; }
.product__img--render img.is-render { width: 100%; height: 100%; object-fit: contain; padding: 4%; border: 0; border-radius: 0; mix-blend-mode: multiply; }

/* ==========================================================================
   RENDERSYSTEM (1/10) – én regel for alle 3D-renderinger; går forud for lagene ovenfor.
   1) Fritstående anlæg (.is-render): renderingens hvide bund ganges væk (multiply), så
      anlægget står direkte på fladen. Aldrig en hvid kasse, streg eller skygge om billedet.
   2) Nærbilleder, hvor motivet går ud over billedkanten (.is-fyld): vises som et foto, der
      fylder hele rammen (cover), så billedets kant og rammens kant er den samme – ingen
      afskåret kant midt i en flade. Uden modifier går motivet ud for neden, --hoejre til højre.
   Rammen (.rflade) er sand. På sandflader står fritstående anlæg direkte på fladen, og
   nærbilleder får en hvid ramme, så de ikke flyder ud i baggrunden.
   ========================================================================== */
:root img.is-render { display: block; width: 100%; height: auto; aspect-ratio: auto !important; object-fit: contain;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; mix-blend-mode: multiply; }
:root img.is-render.is-fyld { object-fit: cover; object-position: 50% 100%; }
:root img.is-render.is-fyld--hoejre { object-position: 100% 50%; }

/* Ramme om renderinger i figurer, gallerier og faser */
.rflade { display: block; position: relative; overflow: hidden; background: var(--sand); border-radius: var(--radius-img);
  padding: clamp(18px, 2.6vw, 36px); }
.rflade--fyld { padding: 0; aspect-ratio: 16 / 10; }
:root .rflade--fyld > img.is-render { width: 100%; height: 100%; }
.section--sand .rflade:not(.rflade--fyld) { background: none; padding: 0; border-radius: 0; overflow: visible; }
.section--sand .rflade--fyld { background: #fff; }
/* Side om side (galleri, faser): samme format, så rækken står lige */
.gallery .rflade, .phases__panel .rflade { aspect-ratio: 16 / 10; display: grid; place-items: center; }
:root .gallery .rflade > img.is-render:not(.is-fyld), :root .phases__panel .rflade > img.is-render:not(.is-fyld) { max-height: 100%; }
.gallery figure { grid-template-rows: auto auto; align-content: start; }

/* Undersidehero: fritstående anlæg står frit på sandfladen; nærbilleder i hvid fotoramme */
/* Baggrunden skal være sand (ikke gennemsigtig): herogitteret har z-index og danner sin egen stakkontekst,
   så multiply kun kan blande med det, der ligger inde i gitteret */
:root .page-hero__media--render { background: var(--sand); box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: auto; align-self: center; }
:root .page-hero__media--render:has(> img.is-fyld) { background: #fff; box-shadow: var(--shadow-img); border-radius: var(--radius-img);
  overflow: hidden; aspect-ratio: 16 / 10; }
:root .page-hero__media--render > img.is-fyld { height: 100%; }
:root .page-hero__media--render:not(:has(> img.is-fyld)) .label { position: static; display: flex; gap: 10px; margin-top: 12px;
  background: none; padding: 0; font-size: var(--fs-small); color: var(--muted); justify-self: start; }
:root .page-hero__media--render:not(:has(> img.is-fyld)) .label::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--greenish); margin-top: 0.7em; }

/* Kort og produktliste: sand billedflade, der flugter med kortets kanter */
:root .card__media--render { background: var(--sand); display: grid; place-items: center; }
:root .card__media--render > img.is-render { width: 100%; height: 100%; }
:root .card__media--render > img.is-render:not(.is-fyld) { padding: 6% !important; }
:root .product__img--render { background: var(--sand); display: block; }
:root .product__img--render > img.is-render { width: 100%; height: 100%; }
:root .product__img--render > img.is-render:not(.is-fyld) { padding: 5% !important; }
.section--sand .product__img--render { background: #fff; }

/* Sektionshoved med lang indledning (1/10): overskriften står i fuld bredde øverst, og indledning
   og brødtekst står side om side under den – topjusteret, så der ikke opstår tom plads over overskriften */
.section-head--stablet { grid-template-columns: 1fr; row-gap: 18px; }
.section-head--stablet > .stack:first-child .h2 { max-width: 22ch; }
@media (min-width: 900px) {
  .section-head--stablet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: baseline; }
  .section-head--stablet > .stack:first-child { grid-column: 1 / -1; margin-bottom: 6px; }
  .section-head--stablet > .stack:last-child { display: contents; }
  .section-head--stablet > .stack:last-child > * { margin-top: 0; }
}


/* 3D-rammen (1/10): 2D-oversigten står som pladsholder, indtil 3D-modellen melder klar (hsv3d:klar),
   og modellen toner derefter frem – så boksen aldrig står tom og hvid, mens 3D hentes */
.osteri-3d-ramme { background: #fff url("../img/osteri-fuld.webp?v=6") center / contain no-repeat; }
.osteri-3d-ramme.er-klar { background-image: none; }
.osteri-3d-ramme iframe { transition: opacity .6s var(--ease); }
.osteri-3d-ramme.is-indlaeser iframe { opacity: 0; }
.osteri-3d-ramme:empty::after, .osteri-3d-ramme.is-indlaeser::after { content: "3D-modellen indlæses …"; position: absolute; inset: auto auto 24px 50%;
  transform: translateX(-50%); display: block; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 20px -8px rgba(17, 42, 31, .35); color: var(--pine); font-weight: 600; font-size: .92rem; pointer-events: none; }

/* ==========================================================================
   PROCESFLOW OG PROCESVEJE (8/10) – de to sider fra masterudkast v2
   ========================================================================== */

/* Hero med anlægget i fuld bredde: teksten øverst og den brede rendering under den, direkte på sandfladen.
   Figuren har selv sandbaggrund, fordi herogitteret danner sin egen stakkontekst (multiply). På telefon kan
   renderingen stryges sidelæns i stedet for at blive ulæseligt lille. */
.page-hero--panorama .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); padding-bottom: clamp(44px, 5vw, 76px); }
.page-hero--panorama .page-hero__text { max-width: 920px; }
@media (min-width: 1000px) {
  .page-hero--panorama .page-hero__text { max-width: none; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: end; }
}
.page-hero__panorama { margin: 0; background: var(--sand); min-width: 0; }
.page-hero__panorama-rul { overflow-x: auto; scrollbar-width: none; }
.page-hero__panorama-rul::-webkit-scrollbar { display: none; }
/* Renderingen har hvid luft over og under anlægget – den trækkes ind, så billedteksten står tæt på */
.page-hero__panorama-rul img { min-width: 640px; margin-block: -3% -3.4%; }
.page-hero__panorama-rul { padding-block: 1px; }

/* De ti procestrin: masterens tabel som forløbsliste. Nummeret står på forløbslinjen (første og sidste fyldt,
   de øvrige hule – som logoets cirkler); på bred skærm tre spalter med overskrifterne i hovedet. */
.trinflow { --tl-kol: minmax(0, 3.2fr) minmax(0, 4fr) minmax(0, 4.8fr); --tl-gab: clamp(24px, 3vw, 52px); --tl-ind: 60px; }
.trinflow__hoved { display: none; }
.trinliste { list-style: none; }
.trinliste__trin { position: relative; display: grid; gap: 12px; padding: 24px 0 28px var(--tl-ind); border-top: 1px solid var(--line); }
.trinliste__trin::before, .trinflow__gaffel::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--greenish); }
.trinliste__trin--foerste::before { top: 40px; }
.trinliste__trin--sidste::before { bottom: auto; height: 30px; }
.trinliste__trin--sidste { border-bottom: 1px solid var(--line); }
.trinliste__nr { position: absolute; left: 0; top: 20px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--greenish); color: var(--pine); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.trinliste__trin--foerste .trinliste__nr, .trinliste__trin--sidste .trinliste__nr { background: var(--pine); border-color: var(--pine); color: #fff; }
.trinliste__titel { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--pine); }
.trinliste__trin p { margin: 0; }
.trinliste__label { display: block; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trinliste__trin .trinliste__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: .95rem; }
/* Stedet, hvor processen deler sig: en rude på linjen og en sage-boks med vejen videre */
.trinflow__gaffel { position: relative; padding: 16px 0 16px var(--tl-ind); border-top: 1px solid var(--line); }
.trinflow__gaffelmark { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; border-radius: 3px; background: var(--pine);
  transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 5px #fff; }
.trinflow__gaffelboks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  padding: 18px 24px; border-radius: var(--radius-img); background: var(--greenish-300); --muted: #45524a; color: #34403a; }
.trinflow__gaffelboks p { margin: 0; max-width: 62ch; }
.trinflow__gaffelboks strong { color: var(--pine); font-weight: 600; }
.trinflow__niveauer { list-style: none; display: grid; gap: 12px; }
@media (min-width: 900px) {
  .trinflow__hoved { display: grid; grid-template-columns: var(--tl-kol); column-gap: var(--tl-gab); padding: 0 0 14px var(--tl-ind);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .trinliste__trin { grid-template-columns: var(--tl-kol); column-gap: var(--tl-gab); align-items: start; padding-block: 26px 30px; }
  .trinliste__nr { top: 22px; }
  /* Spalteoverskrifterne står i hovedet – etiketterne i hver række er kun til skærmlæsere */
  .trinliste__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* De to procesveje: ét fælles første trin, en gaffel og to baner side om side (sand og lys sage) */
.veje { display: grid; }
.veje__start { justify-self: center; width: 100%; max-width: 600px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start;
  padding: 20px 26px 20px 22px; border-radius: var(--radius-img); background: var(--pine); color: rgba(255, 255, 255, .84); }
.veje__start p { margin: 0; display: grid; gap: 2px; }
.veje__start strong { color: #fff; font-size: 1.14rem; font-weight: 600; line-height: 1.3; }
.veje__start p > span { font-size: .94rem; }
.veje__nr { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--pine); font-size: .92rem; font-weight: 700; }
.veje__faelles { grid-column: 2; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--greenish); }
.veje__gaffel { position: relative; height: 34px; }
.veje__gaffel::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--greenish); }
.veje__baner { display: grid; gap: clamp(16px, 2vw, 28px); }
.vej { container-type: inline-size; display: grid; align-content: start; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--radius-img); background: var(--sand-200); }
.vej--b { background: var(--greenish-300); --muted: #45524a; color: #34403a; }
.vej__hoved { display: grid; gap: 10px; padding-bottom: 24px; }
.vej__hoved p { margin: 0; font-size: .98rem; }
.vej__hoved .vej__mark { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); }
.vej__mark span { font-size: .9rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.vej__titel { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--pine); }
.vej__kolonner { display: none; }
.vej__trin { list-style: none; display: grid; }
.vej__trin li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(29, 70, 52, .16); }
.vej__nr { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pine); color: #fff; font-size: .8rem; font-weight: 700; }
.vej__trin strong { padding-top: 3px; color: var(--pine); font-weight: 600; line-height: 1.35; }
.vej__udstyr { grid-column: 2; font-size: .95rem; line-height: 1.5; }
.veje__udstyr { margin-top: clamp(16px, 2vw, 28px); }
@container (min-width: 480px) {
  .vej__kolonner { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; padding-bottom: 10px;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .vej__kolonner span:first-child { grid-column: 2; }
  .vej__trin li { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
  .vej__nr { grid-row: auto; }
  .vej__udstyr { grid-column: 3; padding-top: 4px; }
}
@media (min-width: 900px) {
  .veje__baner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veje__gaffel { height: 56px; }
  .veje__gaffel::before { bottom: 50%; }
  .veje__gaffel::after { content: ""; position: absolute; left: 25%; right: 25%; top: 50%; bottom: 0; border: 2px solid var(--greenish); border-bottom: 0; border-radius: 16px 16px 0 0; }
}

/* Flere pile-links på række (ombrydes på smalle skærme) */
.link-raekke { display: flex; flex-wrap: wrap; gap: 10px 36px; }
/* Menuens ottende felt: indgang til procesflow og procesveje – ikon i stedet for nummer */
.mega__item--viden .num { background: var(--greenish-300); border-color: transparent; }
.procesflow > .link-raekke { margin-top: 10px; }

/* Casene ADL, TINE og Novonesis (ejerens godkendte tekster 14/10): fire nøgledata, nøgledata på casekortene og procesflow */
@media (min-width: 720px) { .result-band--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .result-band--4 { grid-template-columns: repeat(4, 1fr); } }
.result-band--4 strong { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); font-weight: 700; line-height: 1.2; }
.card__data { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.card__data li { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--pine); background: var(--greenish-300); padding: 5px 10px; border-radius: 999px; }
.case-flow { margin-top: clamp(56px, 7vw, 96px); }
.case-flow .flow li { padding-bottom: 8px; }

/* Kontaktsiden (ejerens kontaktbrief 14/10): medarbejdere i tre faglige grupper.
   Fire kort pr. række på store skærme (fem i gruppen med fem, så ingen står alene), to på tablet, ét på mobil.
   Kort i samme række er lige høje; navn og titel kan bryde, men telefon og e-mail står altid nederst. */
.team-intro { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 8px; max-width: 62ch; }
.team-intro p { color: var(--text); }
.team-gruppe { margin-top: clamp(32px, 4vw, 52px); }
.team-gruppe__titel { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pine);
  padding-bottom: 12px; margin: 0 0 clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line-strong); }
.team.team--kontakt { grid-template-columns: 1fr; }
@media (min-width: 600px) { .team.team--kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .team.team--kontakt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team.team--kontakt.team--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.team--kontakt .person__body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.team--kontakt .person__body strong { min-height: 2.5em; }
.team--kontakt .person__links { margin-top: auto; display: grid; gap: 2px; padding-top: 6px; }
.team--kontakt .person__link:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 2px; }

/* ADL er et igangværende projekt: 3D-materialet mærkes tydeligt som visualisering (ejerens casetekster 14/10) */
.vis-maerke { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-block; max-width: calc(100% - 24px);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; line-height: 1.25; color: var(--pine);
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; pointer-events: none; }
.card__media:has(> .vis-maerke), figure:has(> .vis-maerke) { position: relative; }
.case--feature > .vis-maerke { left: 20px; top: 20px; }
.gallery .vis-maerke { font-size: .64rem; padding: 4px 9px; left: 8px; top: 8px; white-space: nowrap; letter-spacing: .02em; }
.flade > .vis-maerke { left: clamp(16px, 4vw, 56px); top: clamp(14px, 2vw, 22px); }

/* ==========================================================================
   RENDERSYSTEM 2 (15/10) – går forud for reglerne ovenfor.
   Alle 3D-renderinger går i ét med fladen ligesom videoen på forsiden: hele billedet vises (contain,
   aldrig beskåret), den hvide bund ganges væk (multiply), og kanterne toner blødt ud, så et motiv,
   der går ud over billedkanten, ikke giver en hård kant. Ingen kasse, ingen hvid flade, ingen
   runde hjørner, ingen skygge: rammen får præcis fladens farve (--flade-farve), fordi flere
   beholdere danner deres egen stakkontekst, og multiply kun kan blande med det, der ligger inde i dem.
   ========================================================================== */
:root { --flade-farve: #fff; }
.page-hero, .section--sand { --flade-farve: var(--sand); }
.section--sand-light { --flade-farve: var(--sand-200); }
.section--grey { --flade-farve: var(--grey); }
.section--sage-lys { --flade-farve: var(--greenish-300); }
.card, .num-card, .tile, .route { --flade-farve: var(--kort); }

:root img.is-render, :root img.is-render.is-fyld, :root img.is-render.is-fyld--hoejre {
  object-fit: contain !important; object-position: 50% 50% !important; mix-blend-mode: multiply;
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
          mask-composite: intersect; }

/* Beholderne: fladens farve, ingen kasse */
:root :is(.rflade, .page-hero__media, .card__media, .product__img, .split__media, .flade):has(> img.is-render) {
  background: var(--flade-farve) !important; border-radius: 0 !important; box-shadow: none !important; }
:root :is(.rflade, .page-hero__media, .split__media, .flade):has(> img.is-render) { padding: 0 !important; overflow: visible !important; aspect-ratio: auto !important; }
:root .flade:has(> img.is-render) > .circles { display: none; }
:root .page-hero__media:has(> img.is-render) > img.is-render { height: auto !important; }
/* Kort og produktliste beholder deres faste format, så rækkerne står lige */
:root .card__media:has(> img.is-render) > img.is-render,
:root .product__img:has(> img.is-render) > img.is-render { width: 100%; height: 100% !important; padding: 4% !important; }
/* Galleri og faser: samme format side om side */
:root :is(.gallery, .phases__panel) .rflade:has(> img.is-render) { aspect-ratio: 16 / 10 !important; display: grid; place-items: center; }
:root :is(.gallery, .phases__panel) .rflade > img.is-render { width: 100%; height: 100% !important; }
:root .gallery img.is-render { aspect-ratio: auto !important; }

/* ADL-kortet på forsiden: renderingen står på sektionens grå flade over teksten */
.case:has(> img.is-render) { background: var(--flade-farve); color: var(--pine); }
:root .case > img.is-render { position: absolute; inset: 0 0 auto 0; width: 100%; height: 66% !important; padding: 4% 4% 0 !important; z-index: -1; }
.case:has(> img.is-render)::before, .case:has(> img.is-render)::after { display: none; }
.case:has(> img.is-render) .case__title a, .case:has(> img.is-render) .case__meta { color: var(--pine); }
.case:has(> img.is-render) .tag { background: #fff; color: var(--pine); }


/* ==========================================================================
   STORE SKÆRME (20/10): over 1920 px vokser hele siden med skærmen i stedet for at stå som en smal spalte
   med tomme felter i siderne. Rodens tekststørrelse følger skærmbredden (16 px ved 1920 px, højst 24 px),
   og spalten (--container) og forsidefilmen er sat i rem, så de vokser med. De vigtigste faste mål
   (header, luft mellem sektioner, kanter) skaleres med samme faktor.
   ========================================================================== */
@media (min-width: 1921px) {
  html { font-size: min(calc(100vw / 120), 24px); }
  :root { --gutter: 3rem; --section: 8.75rem; --header-h: 5.25rem; --radius-img: 1.125rem; --radius-img-sm: 0.75rem; }
  .brand img { width: 9.25rem; }
}

/* GENNEMGANG 20/10 – rettelser fra testen af alle sider i seks skærmstørrelser */
/* Renderinger i figurer må aldrig blive bredere end spalten (ADL-casen kunne scrolles sidelæns på mobil) */
.rflade, figure:has(> .rflade) { min-width: 0; max-width: 100%; }
:root .rflade > img.is-render { max-width: 100%; }
/* Lange tyske og engelske ord brydes pænt i kort og overskrifter i stedet for at stikke ud */
.card__title, .h3, .num-card strong, .tile strong { overflow-wrap: break-word; hyphens: auto; }
/* "3D-visualisering"-mærket skal kunne læses på mobil (mindst 12 px) og må bryde over to linjer */
.vis-maerke, .gallery .vis-maerke { font-size: max(.75rem, 12px); }
@media (max-width: 719px) { .gallery .vis-maerke { white-space: normal; } }
/* Prikkerne på osterikortet: større trykflade på touch-skærme uden at ændre det synlige mål */
@media (pointer: coarse) { .hotspot::after { content: ""; position: absolute; inset: -8px; } }