/* Verarca - delte blokke og Grant Thornton-siden.
   Tokens og grundregler står i css/tokens.css, som indlæses før denne fil.
   Her: én blok pr. del af siden. */

/* ===== Grant Thornton-sidens skriftstørrelser (.gt) ===== */
/* grant-thornton.html (<html class="gt">) beholder sine oprindelige størrelser,
   indtil den bygges om med den nye typeskala. */
.gt { --fs-h3: 18px; --fs-lead: 19px; --fs-body: 18px; --fs-ui: 16px; --fs-small: 14px; --fs-micro: 12px; }

/* ===== VerarcaLogo (.vlogo) ===== */
.vlogo { display: inline-flex; }
.vlogo svg { height: 100%; width: auto; }

/* ===== LivingGrid (.lg) ===== */
.lg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; }

/* ===== LogoRow (.logos) ===== */
.logos { padding: 8px 0 0; }
.logos .ramme { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0; }
.logos p { text-align: center; }
.logos .raekke { display: flex; justify-content: space-between; align-items: center; gap: 32px 40px; flex-wrap: wrap; margin-top: 24px; }
.logos .raekke img { width: auto; opacity: .6; filter: grayscale(1); transition: opacity .2s; }
.logos .raekke img:hover { opacity: .9; }
@media (max-width: 760px) {
  .logos .raekke { justify-content: center; gap: 24px 32px; }
  .logos .raekke img { transform: scale(.8); }
}

/* ===== Nav (.topnav) ===== */
.topnav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.topnav.s { border-color: var(--line); }
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.topnav .lock { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.topnav .lock .vl { height: 15px; }
.topnav .streg { width: 1px; height: 20px; background: var(--line); }
.topnav .lock img { height: 21px; width: auto; }
.topnav .btn { padding: 10px 20px; font-size: 15px; }
@media (max-width: 560px) {
  .topnav .lock { gap: 10px; }
  .topnav .lock img { height: 15px; }
  .topnav .btn { padding: 9px 14px; font-size: 14px; }
}

/* ===== Hero (.hero) ===== */
.hero { position: relative; isolation: isolate; padding: 56px 0 0; overflow: hidden; }
.hero .top { position: relative; z-index: 1; text-align: center; max-width: 1100px; }
.hero .pille { display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); margin-bottom: 32px; }
.hero .pille img { height: 22px; width: auto; }
.hero .pille .x { font-size: 16px; color: var(--muted); font-weight: 300; }
.hero .pille .vl { height: 14px; }
.hero .lead { font-size: 19px; margin-top: 22px; }
.hero .pris { margin-top: 18px; font-size: 15.5px; color: var(--muted); }
.hero .pris b { font: 500 22px var(--disp); letter-spacing: -.02em; color: var(--ink); }
.hero .pris span, .hero .pris a { white-space: nowrap; }
.hero .pris .prik { margin: 0 6px; }
.hero .pris a { color: var(--ink); margin-left: 8px; text-underline-offset: 3px; }
.hero .cta { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero .tryg { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; color: var(--ink); font-weight: 400; margin-top: 14px; }

/* Billedfeltet */
.hero .felt {
  --h: 140px; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); grid-template-rows: repeat(2, var(--h)); gap: 12px;
  width: max(1500px, 108vw); margin: 72px 0 0 50%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hero .c { border-radius: 20px; background: var(--light); position: relative; overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.hero .felt.on .c { opacity: 1; transform: none; }
.hero .c:nth-child(3) { transition-delay: .1s; } .hero .c:nth-child(4) { transition-delay: .2s; } .hero .c:nth-child(6) { transition-delay: .3s; }
.hero .c:nth-child(7) { transition-delay: .4s; } .hero .c:nth-child(9) { transition-delay: .5s; } .hero .c:nth-child(10) { transition-delay: .6s; }
.hero .e.blaa { background: linear-gradient(160deg, rgba(75,115,151,.14), rgba(75,115,151,.04)); }
.hero .e.mauve { background: linear-gradient(160deg, rgba(167,84,129,.14), rgba(167,84,129,.04)); }
.hero .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 45%, rgba(75,115,151,.35) 100%); pointer-events: none; }
.hero .fl { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 7px 14px 7px 7px; font-size: 13px; font-weight: 400; box-shadow: 0 10px 24px -12px rgba(9,9,11,.4); }
.hero .f1 { left: 16px; bottom: 64px; } .hero .f2 { left: 56px; bottom: 20px; }
.hero .kort { background: #fff; border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; }
.hero .kort small { font-size: 12px; color: var(--muted); }
.hero .kort > b { font: 400 34px/1 var(--disp); letter-spacing: -.02em; margin-top: auto; }
.hero .kort > b em { font: 300 15px var(--body); color: var(--muted); font-style: normal; }
.hero .minibar { display: block; height: 5px; border-radius: 5px; background: var(--light); margin-top: 12px; overflow: hidden; }
.hero .minibar i { display: block; height: 100%; width: 0; background: var(--or); transition: width 2s cubic-bezier(.2,.7,.2,1) .6s; }
.hero .felt.on .minibar i { width: 96%; }
.hero .tjek { list-style: none; margin-top: auto; }
.hero .tjek li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; }
.hero .or { color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, #FF8A62 0%, var(--or) 40%, var(--mauve) 120%); }
.hero .or b { font-weight: 500; font-size: 16px; }
.hero .rap { background: #E9E5E7; padding: 22px; }
.hero .rap img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 40px -20px rgba(9,9,11,.45); }
.hero .teal { background: linear-gradient(160deg, #2E7A76, var(--teal) 50%, #173F3D); border-color: transparent; color: #fff; }
.hero .teal small, .hero .teal > b em { color: rgba(255,255,255,.65); }
.hero .seg3 { display: flex; gap: 3px; height: 6px; margin-top: 12px; }
.hero .seg3 i { border-radius: 3px; }
.hero .seg3 i:nth-child(1) { flex: 24; background: var(--or); }
.hero .seg3 i:nth-child(2) { flex: 14; background: #fff; }
.hero .seg3 i:nth-child(3) { flex: 62; background: rgba(255,255,255,.25); }

@media (max-width: 900px) {
  .hero .felt { --h: 120px; width: auto; margin: 48px var(--gutter) 0; transform: none; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: var(--h); -webkit-mask-image: none; mask-image: none; }
  .hero .felt .c { grid-area: auto !important; }
  .hero .felt .e, .hero .felt .rap, .hero .felt .teal { display: none; }
  .hero .felt .ph { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .hero .felt .bred { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) { .hero h1 em { display: block; } .hero .pris .prik { display: none; } .hero .pris > span:first-child { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero .c { opacity: 1; transform: none; transition: none; } }

/* ===== Pakker (.pakker) ===== */
/* Sidens ene mørke farvebånd: firkantet og fra kant til kant */
.pakker.baand { position: relative; isolation: isolate; margin: var(--sp) 0 0; padding: var(--sp) 0; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 45% at 15% 100%, rgba(255,108,71,.45), transparent 70%),
    radial-gradient(50% 45% at 90% 100%, rgba(167,84,129,.45), transparent 70%),
    radial-gradient(60% 50% at 80% 0%, rgba(75,115,151,.35), transparent 70%),
    linear-gradient(180deg, #0E0F1A 0%, #141628 60%, #22182A 100%); }
.pakker .wrap { position: relative; z-index: 1; }
.pakker .hoved { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.pakker .label { color: #FF9A7A; }
.pakker h2 { color: #fff; }
.pakker .hoved p { margin-top: 16px; color: rgba(255,255,255,.7); }
.pakker .incl { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pakker .incl span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 14px 7px 8px; border-radius: 999px; }

.pakker .planer { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; max-width: 880px; margin: 0 auto; align-items: stretch; }
.pakker .plan { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.pakker .plan.hi { outline: 2px solid var(--or); outline-offset: -2px; }
.pakker .pn { font: 400 28px var(--disp); letter-spacing: -.02em; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pakker .sc { font: 400 12px var(--body); letter-spacing: 0; color: var(--muted); background: var(--light); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pakker .hi .sc { background: var(--or10); color: var(--or); }
.pakker .pd { font-size: 15px; margin-top: 10px; min-height: 3.2em; }
.pakker .pp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px 0; margin: 20px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pakker .pp b { font: 400 36px/1.1 var(--disp); letter-spacing: -.02em; }
.pakker .pp b.tal { font-size: clamp(44px, 5vw, 56px); line-height: 1; }
.pakker .pp span { font-size: 13px; color: var(--muted); }
.pakker .onb { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; padding: 12px 16px; border-radius: 10px; background: var(--teal10); font-size: 14px; color: var(--teal); }
.pakker .onb b.tal { font: 400 32px/1 var(--disp); letter-spacing: -.02em; }
.pakker ul { list-style: none; margin-top: 12px; }
.pakker li { display: flex; gap: 10px; font-size: 15px; padding: 7px 0; line-height: 1.45; }
.pakker li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: var(--or10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8.2l2.1 2.1 4.3-4.6' stroke='%23FF6C47' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.pakker li.alt { font-weight: 500; }
.pakker li.alt::before { background: none; border: 1.5px solid var(--line); }
.pakker .note { text-align: center; margin-top: 28px; color: rgba(255,255,255,.7); }
@media (max-width: 960px) { .pakker .planer { grid-template-columns: minmax(0,1fr); } .pakker .pd { min-height: 0; } }

/* ===== Book (.book) ===== */
.book { padding-top: var(--sp); scroll-margin-top: 76px; }
.book .hoved { margin-bottom: 40px; }
/* Foto og kalender starter på samme linje og er lige høje. --kort-h er begge kortes mindstehøjde,
   så der ikke opstår et hop, mens HubSpot indlæser */
.book .kort { --kort-h: 700px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
.book .kasper { border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: var(--kort-h); }
.book .kasper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.book .kasper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(23,26,40,.55) 58%, rgba(23,26,40,.95) 100%); }
.book .kc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px; color: #fff; }
.book .kc > b { font: 400 28px var(--disp); letter-spacing: -.02em; display: block; }
.book .kc > span { font-size: 14px; color: rgba(255,255,255,.7); }
.book .kc p { color: #fff; font-size: 16px; margin-top: 14px; max-width: 420px; }
.book .kt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.book .kt span { font-size: 13px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px; }
@media (max-width: 900px) {
  .book .kort { grid-template-columns: minmax(0,1fr); gap: 16px; }
  /* Høj nok til, at navn, citat og mærker står under ansigtet */
  .book .kasper { min-height: 560px; }
  .book .kort { --kort-h: 615px; }
}

/* ===== Booking (.kalender) ===== */
/* Ét kort i HubSpots egen baggrundsfarve (--light). Iframen kan ikke styles indefra og har fast bredde,
   så den centreres vandret og lodret i kortet, og kortet har ingen skygge, kant eller hvid baggrund udenom. */
.kalender { position: relative; display: flex; align-items: center; justify-content: center; background: var(--light); border-radius: var(--r-lg); overflow: hidden; padding: 24px; min-height: var(--kort-h, 640px); }
/* HubSpot giver iframen fast højde, og dens grå kort slutter ca. 88 px før iframens bund (målt ved 1440 og 390 px).
   Iframen rykkes halvdelen ned og trækker halvdelen op bagved, så kortet står med lige meget luft over og under */
.kalender .meetings-iframe-container { width: 100%; margin: 42px 0 -42px; }
.kalender .meetings-iframe-container { display: flex; justify-content: center; }
.kalender iframe { display: block; max-width: 100%; }
.kalender .venter { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); text-align: center; font-size: 14px; color: var(--muted); }
.kalender .venter a { color: var(--muted); font-size: 13px; }
.kalender.klar .venter { display: none; }

/* ===== Rapporten (.rapport) ===== */
.rapport { padding-top: var(--sp); }
.rapport .hoved { max-width: 720px; margin: 0 auto; text-align: center; }
.rapport .ikon { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto 28px; background: linear-gradient(150deg, #FF8A62, var(--or) 45%, var(--mauve)); box-shadow: 0 18px 40px -18px rgba(255,108,71,.7); }
.rapport .hoved p { margin-top: 16px; }
.rapport .knapper { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.rapport .prik { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--or); position: relative; }
.rapport .prik::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--or); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.rapport .btn:not(.on) .prik { display: block; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.rapport .scene { position: relative; margin: 72px auto 0; display: grid; grid-template-columns: 230px 120px minmax(0,1fr); gap: 56px; align-items: center; perspective: 1600px; }
.rapport .ledninger { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.rapport .ledninger .w { fill: none; stroke: url(#wg); stroke-width: 1.2; }
.rapport .ledninger .w.ud { stroke: #DAD5D7; stroke-width: 1.5; }
.rapport .ledninger .w.hot { stroke: var(--or); stroke-opacity: .6; }
.rapport .ledninger .pk { fill: var(--or); opacity: .85; }
.rapport .ledninger .pk.hot { opacity: 1; }

.rapport .kilder { list-style: none; display: flex; flex-direction: column; gap: 10px; justify-content: center; position: relative; z-index: 2; }
.rapport .kilder li { display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: 12px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1px solid rgba(9,9,11,.06); box-shadow: 0 6px 18px -12px rgba(9,9,11,.25); background: rgba(255,255,255,.9); backdrop-filter: blur(6px); transition: border-color .25s, box-shadow .25s; cursor: default; }
.rapport .kilder i { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 9px; background: var(--light); color: var(--muted); display: grid; place-items: center; transition: background .25s, color .25s; }
.rapport .kilder b { font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.rapport .kilder span { font-size: 12px; line-height: 1.3; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s, opacity .3s; }
.rapport .kilder li:hover, .rapport .kilder li.hot, .rapport .kilder li:focus-visible { border-color: rgba(255,108,71,.35); box-shadow: 0 10px 24px -14px rgba(255,108,71,.45); outline: none; }
.rapport .kilder li:hover i, .rapport .kilder li.hot i, .rapport .kilder li:focus-visible i { background: var(--or10); color: var(--or); }
.rapport .kilder li:hover span, .rapport .kilder li.hot span, .rapport .kilder li:focus-visible span { max-height: 34px; opacity: 1; margin-top: 2px; }

.rapport .hub { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rapport .hv { position: relative; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(150deg, #1F2233, #09090B); box-shadow: 0 24px 50px -20px rgba(9,9,11,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.rapport .hv::before { content: ""; position: absolute; inset: -1px; border-radius: 29px; padding: 1px; background: conic-gradient(from var(--a, 0deg), var(--or), var(--mauve), var(--slate), var(--or)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rundt 6s linear infinite; }
.rapport .hv::after { content: ""; position: absolute; inset: -18px; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,108,71,.25), transparent); z-index: -1; animation: aande 3s ease-in-out infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rundt { to { --a: 360deg; } }
@keyframes aande { 50% { opacity: .4; transform: scale(.9); } }
.rapport .hub small { font-size: 12px; line-height: 1.4; color: var(--muted); }

.rapport .fod { max-width: 760px; margin: 56px auto 0; text-align: center; }
.rapport .fod p { font-size: 15px; }
.rapport .fod b { color: var(--ink); font-weight: 500; }
.rapport .fod .sm { margin-top: 10px; font-size: 13px; }

@media (max-width: 1080px) { .rapport .scene { grid-template-columns: 200px 100px minmax(0,1fr); gap: 36px; } .rapport .hv { width: 80px; height: 80px; } }
@media (max-width: 860px) {
  .rapport .scene { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 48px; perspective: none; }
  .rapport .ledninger { display: none; }
  .rapport .scene .viewer { order: -2; }
  .rapport .hub { order: -1; flex-direction: row; justify-content: center; gap: 12px; }
  .rapport .hv { width: 56px; height: 56px; border-radius: 16px; }
  .rapport .kilder { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .rapport .kilder li { grid-template-columns: 28px auto; padding: 6px 12px 6px 6px; border-radius: 999px; box-shadow: none; }
  .rapport .kilder i { width: 28px; height: 28px; border-radius: 50%; }
  .rapport .kilder span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rapport .prik::after, .rapport .hv::before, .rapport .hv::after { animation: none; } }

/* ===== ReportViewer (.viewer) ===== */
/* Fader roligt op én gang, når den kommer i syne */
.viewer { position: relative; z-index: 2; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.viewer.synlig { opacity: 1; transform: none; }

/* Kanten af næste side bag den aktuelle */
.viewer .ark { position: absolute; inset: 0; transform: translate(8px, 8px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -20px rgba(9,9,11,.35); }

.viewer .device {
  /* Rammen er 24 px, og siden ligger 8 px inde: 24 - 8 = 16 px */
  position: relative; padding: 8px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2A2C35, #121318);
  box-shadow: 0 30px 60px -36px rgba(9,9,11,.45), 0 0 0 1px rgba(9,9,11,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.viewer:hover .device { transform: translateY(-4px); box-shadow: 0 44px 80px -38px rgba(9,9,11,.55), 0 0 0 1px rgba(9,9,11,.06); }

.viewer .aaben { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #fff; border-radius: 16px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1.414/1; }
.viewer .aaben img { width: 100%; height: 100%; object-fit: contain; display: block; }
.viewer .aaben img.blad { animation: blad .45s ease; }
@keyframes blad { from { opacity: .2; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* Vises kun, hvis en side er længe om at komme */
.viewer .aaben::after { content: ""; position: absolute; top: 14px; left: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(9,9,11,.15); border-top-color: var(--or); opacity: 0; transition: opacity .2s; animation: drej .8s linear infinite; }
.viewer .henter.aaben::after { opacity: 1; }
@keyframes drej { to { transform: rotate(360deg); } }

.viewer .hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(9,9,11,.72); color: #fff; font: 400 12.5px var(--body); padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
/* Pulserer stille to gange, når vieweren kommer i syne, og står så stille */
.viewer.synlig .hint { animation: puls 1.4s ease-in-out .7s 2; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(9,9,11,.12); transform: scale(1.04); } }

.viewer .pil { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 8px 20px -8px rgba(9,9,11,.4); font: 300 26px/1 var(--body); cursor: pointer; color: var(--ink); opacity: 0; transition: opacity .25s; }
.viewer:hover .pil, .viewer .pil:focus-visible { opacity: 1; }
.viewer .forrige { left: 24px; } .viewer .naeste { right: 24px; }
.viewer .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 2px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.viewer .bar [data-pakke] { color: #fff; font-weight: 500; }

@media (hover: none) { .viewer .pil { opacity: 1; } }
@media (max-width: 860px) {
  .viewer .pil { opacity: 1; width: 36px; height: 36px; font-size: 22px; }
  .viewer .forrige { left: 10px; } .viewer .naeste { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer { opacity: 1; transform: none; transition: none; }
  .viewer .device, .viewer .pil { transition: none; }
  .viewer:hover .device { transform: none; }
  .viewer.synlig .hint, .viewer .aaben img.blad { animation: none; }
}

/* ===== TreTing (.det-goer-i-selv) ===== */
.det-goer-i-selv .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.75fr); gap: 20px; align-items: stretch; }
.det-goer-i-selv .hvem { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.det-goer-i-selv .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--or); }

.det-goer-i-selv .jer { background: var(--light); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; }
.det-goer-i-selv .trin { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 auto; }
.det-goer-i-selv .yi { border: 1px solid transparent; border-radius: var(--r-md); padding: 14px 14px 12px; background: #fff; opacity: .55; transition: opacity .4s, border-color .4s, box-shadow .4s; }
.det-goer-i-selv .yi.on { opacity: 1; border-color: rgba(255,108,71,.3); box-shadow: 0 10px 24px -18px rgba(255,108,71,.6); }
.det-goer-i-selv .yh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.det-goer-i-selv .yh b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.det-goer-i-selv .yt { font-size: 11.5px; color: var(--muted); background: var(--light); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.det-goer-i-selv .yw { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: var(--light); font-size: 13px; }
.det-goer-i-selv .yl { flex: 1; min-width: 0; line-height: 1.25; }
.det-goer-i-selv .yl small { display: block; font-size: 11.5px; color: var(--muted); }
.det-goer-i-selv .ylogo { width: 24px; height: 24px; border-radius: 7px; background: #1F5AD8; color: #fff; font: 600 13px var(--body); display: grid; place-items: center; }
.det-goer-i-selv .tg { width: 34px; height: 20px; border-radius: 999px; background: #D9D3D6; position: relative; transition: background .3s; }
.det-goer-i-selv .tg i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s; }
.det-goer-i-selv .yst { font-size: 11.5px; color: var(--teal); opacity: 0; transition: opacity .3s; width: 62px; }
.det-goer-i-selv .w1.go .tg { background: var(--teal); } .det-goer-i-selv .w1.go .tg i { transform: translateX(14px); } .det-goer-i-selv .w1.go .yst { opacity: 1; }
.det-goer-i-selv .ybtn { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); transition: all .3s; white-space: nowrap; }
.det-goer-i-selv .w2.go .ybtn { background: var(--teal); border-color: var(--teal); color: #fff; }
.det-goer-i-selv .w2.go .ybtn::before { content: "✓ "; }
.det-goer-i-selv .yyn { display: flex; background: #fff; border-radius: 999px; padding: 2px; border: 1px solid var(--line); }
.det-goer-i-selv .yyn i { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; color: var(--muted); transition: all .3s; }
.det-goer-i-selv .w3.go .yyn i.n { background: var(--ink); color: #fff; }
.det-goer-i-selv .fod { margin-top: 20px; font-size: 14px; color: var(--ink); font-weight: 400; }

.det-goer-i-selv .os { border-radius: var(--r-lg); padding: 32px; color: #fff; display: flex; flex-direction: column; overflow: hidden; position: relative; isolation: isolate;
  background: radial-gradient(60% 70% at 100% 0%, rgba(255,108,71,.28), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(75,115,151,.35), transparent 70%), linear-gradient(140deg, #14172A, #09090B 55%, #12302E); }
.det-goer-i-selv .os::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 85% 10%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 90% at 85% 10%, #000 20%, transparent 80%); }
.det-goer-i-selv .os .hvem { color: rgba(255,255,255,.7); gap: 14px; }
.det-goer-i-selv .os .vl { height: 11px; }
.det-goer-i-selv .stor { font: 500 clamp(26px, 2.6vw, 36px)/1.05 var(--disp); letter-spacing: -.02em; color: #fff; margin-top: 32px; max-width: 560px; }
.det-goer-i-selv .stor em { font-style: normal; }
.det-goer-i-selv .flow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 36px; }
/* Ydre kort 24 px med 32 px luft, så trinkortene får minimum 10 px */
.det-goer-i-selv .f4 { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 18px 14px; display: flex; flex-direction: column; backdrop-filter: blur(6px); opacity: .35; transition: opacity .5s, border-color .5s, transform .5s; }
.det-goer-i-selv .f4 i { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; margin-bottom: auto; transition: background .5s; }
.det-goer-i-selv .f4 b { display: block; font-weight: 500; font-size: 15px; margin-top: 32px; overflow-wrap: anywhere; }
.det-goer-i-selv .f4 span { display: block; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); margin-top: 6px; min-height: 5.9em; }
.det-goer-i-selv .f4.on { opacity: 1; border-color: rgba(255,108,71,.45); transform: translateY(-3px); }
.det-goer-i-selv .f4.on i { background: linear-gradient(150deg, #FF8A62, var(--or) 50%, var(--mauve)); }
.det-goer-i-selv .spor { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: auto; overflow: hidden; }
.det-goer-i-selv .spor i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--or), var(--mauve), var(--slate)); transition: width 2.6s cubic-bezier(.4,0,.2,1); }
.det-goer-i-selv .os.go .spor i { width: 100%; }

@media (max-width: 960px) {
  .det-goer-i-selv .split { grid-template-columns: minmax(0,1fr); }
  .det-goer-i-selv .flow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .det-goer-i-selv .f4 span { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .det-goer-i-selv .yi, .det-goer-i-selv .f4, .det-goer-i-selv .spor i, .det-goer-i-selv .tg, .det-goer-i-selv .tg i { transition: none; } }

/* ===== SaadanVirkerDet (.funktioner) ===== */
/* To kort side om side med subgrid, så tekst og illustration flugter, og kortbunken får svarkortets højde. */
.funktioner .zg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto 1fr auto; column-gap: 20px; row-gap: 0; }
/* Ydre kort 24 px; de indre kort ligger 44 px inde (22 px på mobil) og får derfor minimum 10 px */
.funktioner .zc { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--light); padding: 44px; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.funktioner .zc.bred { grid-column: 1 / -1; grid-row: auto; display: flex; padding: 0; margin-top: 20px;
  background: radial-gradient(60% 80% at 100% 100%, rgba(255,108,71,.18), transparent 70%), radial-gradient(50% 70% at 70% 0%, rgba(75,115,151,.14), transparent 70%), var(--light); }
.funktioner .zc.teal { color: #fff; background: radial-gradient(70% 55% at 100% 100%, rgba(75,115,151,.45), transparent 70%), radial-gradient(60% 50% at 0% 0%, rgba(255,255,255,.08), transparent 70%), linear-gradient(160deg, #2E7A76 0%, #266663 45%, #183F3D 100%); }
.funktioner .zt { max-width: 520px; }
.funktioner .zt span { font-size: 15px; color: var(--muted); }
.funktioner .teal .zt span { color: rgba(255,255,255,.75); }
.funktioner .zt h3 { font: 500 clamp(26px, 2.4vw, 34px)/1.05 var(--disp); letter-spacing: -.02em; margin-top: 10px; }
.funktioner .zt p { margin-top: 12px; font-size: 17px; }
.funktioner .teal .zt p { color: rgba(255,255,255,.8); }
.funktioner .zu { position: relative; padding-top: 40px; display: flex; justify-content: center; }
.funktioner .teal .zu { padding-bottom: 40px; }
.funktioner .zc:not(.teal):not(.bred) .zu { padding-bottom: 40px; }

/* Kortbunken fylder hele rammen og er lige så bred som svarkortet */
.funktioner .zu .bunke { width: 100%; max-width: 440px; min-height: 420px; }
.funktioner .mini { height: 100%; background: #fff; color: var(--ink); border-radius: 10px; box-shadow: 0 30px 70px -25px rgba(0,0,0,.8); padding: 26px 28px; display: flex; flex-direction: column; }
.funktioner .mh { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; }
.funktioner .big { font: 400 36px/1 var(--disp); letter-spacing: -.02em; margin-top: 16px; }
.funktioner .big small { font: 300 14px var(--body); color: var(--muted); }
.funktioner .seg { display: flex; gap: 3px; height: 10px; margin-top: 16px; }
.funktioner .seg i { display: block; height: 100%; width: var(--w); border-radius: 3px; }
.funktioner .lgd { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.funktioner .lgd span { display: flex; align-items: center; gap: 5px; }
.funktioner .lgd b { width: 7px; height: 7px; border-radius: 2px; }
.funktioner .yy { flex: 1; min-height: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.funktioner .yy div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.funktioner .yy em { display: block; width: 100%; height: 0; background: #E7E2E4; border-radius: 4px 4px 0 0; transition: height .9s cubic-bezier(.2,.7,.2,1) .2s; }
.funktioner [data-kort].on .yy em { height: var(--h); }
.funktioner .yy .nu em { background: var(--or); }
.funktioner .yy .nu span { color: var(--ink); font-weight: 500; }
.funktioner .hb { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; margin-top: 12px; }
.funktioner .hb li { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 10px; font-size: 13px; }
.funktioner .hb li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funktioner .hb li i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--or), #FF9A7A); width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1) .15s; }
.funktioner [data-kort].on .hb li i { width: var(--w); }
.funktioner .hb li b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.funktioner .mb { flex: 1; min-height: 140px; display: flex; align-items: flex-end; gap: 5px; margin-top: 18px; }
.funktioner .mb i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: #E7E2E4; transition: height .8s cubic-bezier(.2,.7,.2,1); }
.funktioner .mb i.hi { background: var(--or); }
.funktioner [data-kort].on .mb i { height: var(--h); }
.funktioner .ml { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 8px; }
.funktioner .ring { flex: 1; display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.funktioner .ring svg { width: 110px; height: 110px; flex: none; }
.funktioner .ring b { display: block; font: 400 30px var(--disp); }
.funktioner .ring span { font-size: 13px; color: var(--muted); }

/* Signatur: grid med få kvadrater i hjørnet, toner ind med kortet */
.funktioner .gs { --cell: 48px; --gl: rgba(9,9,11,.07); position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, var(--gl) 1px, transparent 1px), linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 55%); mask-image: linear-gradient(200deg, #000 10%, transparent 55%); }
.funktioner .gs.bund { -webkit-mask-image: linear-gradient(20deg, #000 10%, transparent 45%); mask-image: linear-gradient(20deg, #000 10%, transparent 45%); }
.funktioner .gs i { position: absolute; left: calc(var(--x) * var(--cell) + 1px); top: calc(var(--y) * var(--cell) + 1px); width: calc(var(--cell) - 1px); height: calc(var(--cell) - 1px);
  background: var(--or10); opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d); }
.funktioner .gs i.f { background: var(--or); }
.funktioner .teal .gs { --gl: rgba(255,255,255,.10); }
.funktioner .teal .gs i.s { background: rgba(255,255,255,.12); }
.funktioner .rv.on > .gs i { opacity: 1; transform: none; }
.funktioner .zt, .funktioner .zu { position: relative; z-index: 1; }
@media (max-width: 760px) { .funktioner .gs { --cell: 36px; } }
@media (prefers-reduced-motion: reduce) { .funktioner .gs i { opacity: 1; transform: none; transition: none; } }

/* Svarkortet */
.funktioner .qcard { width: 100%; max-width: 440px; background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(9,9,11,.35); padding: 24px 26px; display: flex; flex-direction: column; }
.funktioner .qh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.funktioner .qh b { display: block; font-weight: 500; font-size: 17px; }
.funktioner .qh span { font-size: 13px; color: var(--muted); }
.funktioner .qh > div > span { display: block; margin-top: 2px; }
.funktioner .qp { white-space: nowrap; background: var(--or10); color: var(--or) !important; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.funktioner .qp em { font-style: normal; }
.funktioner .qcard.done .qp { background: var(--teal10); color: var(--teal) !important; }
.funktioner .qbar { height: 5px; background: var(--light); border-radius: 5px; margin: 16px 0 4px; overflow: hidden; }
.funktioner .qbar i { display: block; height: 100%; width: 88%; background: linear-gradient(90deg, var(--or), var(--mauve)); transition: width .6s ease; }
.funktioner .qmeta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.funktioner .qrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.funktioner .qrow.qgen { grid-template-columns: minmax(0,1fr); }
.funktioner .qrow b { display: block; font-weight: 400; font-size: 15px; line-height: 1.35; }
.funktioner .qt { display: inline-block; font-size: 11px; color: var(--muted); margin-top: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.funktioner .qtri { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 2px; }
.funktioner .qtri small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funktioner .qnum { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; font-size: 16px; font-variant-numeric: tabular-nums; transition: border-color .2s; }
.funktioner .qnum.typing { border-color: var(--ink); }
.funktioner .qnum.typing span::after { content: ""; display: inline-block; width: 1.5px; height: 18px; background: var(--ink); vertical-align: middle; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.funktioner .yn { display: flex; background: var(--light); border-radius: 999px; padding: 3px; }
.funktioner .yn span { font-size: 14px; padding: 7px 14px; border-radius: 999px; color: var(--muted); transition: all .25s; }
.funktioner .yn span.on { background: var(--ink); color: #fff; }
.funktioner .qf { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--muted); }
.funktioner .qf span:first-child { display: flex; align-items: center; gap: 6px; }
.funktioner .qok { background: var(--teal10); color: var(--teal); padding: 4px 10px; border-radius: 999px; opacity: 0; transition: opacity .4s; }
.funktioner .qok.on { opacity: 1; }

/* Sporbarhed */
.funktioner .bred .zt { flex: 1; padding: 56px 44px; align-self: center; }
.funktioner .bred .zu { flex: 1; padding: 48px 48px 48px 0; align-items: center; }
.funktioner .trail { width: 100%; max-width: 440px; background: #fff; border-radius: 10px; padding: 28px 28px 36px; box-shadow: 0 30px 60px -30px rgba(9,9,11,.3); display: flex; flex-direction: column; }
.funktioner .tn { background: #fff; border-radius: var(--r-sm); border: 1px solid var(--line); padding: 14px 16px; opacity: 0; transform: translateY(8px); transition: all .5s ease; }
.funktioner .tn span { display: block; font-size: 11.5px; color: var(--muted); }
.funktioner .tn b { display: block; font-weight: 500; font-size: 14px; margin-top: 2px; }
.funktioner .tn.foerste { border-left: 3px solid var(--or); }
.funktioner .tl { width: 2px; height: 22px; margin: 0 auto; background: repeating-linear-gradient(var(--or) 0 4px, transparent 4px 8px); opacity: 0; transition: opacity .4s; }
.funktioner .trail.go .tn, .funktioner .trail.go .tl { opacity: 1; transform: none; }
.funktioner .trail.go > :nth-child(2) { transition-delay: .35s; } .funktioner .trail.go > :nth-child(3) { transition-delay: .5s; }
.funktioner .trail.go > :nth-child(4) { transition-delay: .85s; } .funktioner .trail.go > :nth-child(5) { transition-delay: 1s; }

@media (max-width: 960px) {
  .funktioner .zg { grid-template-columns: minmax(0,1fr); grid-template-rows: none; row-gap: 20px; }
  .funktioner .zc { padding: 28px 22px; display: flex; flex-direction: column; grid-row: auto; }
  .funktioner .zc.bred { flex-direction: column; margin-top: 0; }
  .funktioner .bred .zt { padding: 28px 22px 24px; }
  .funktioner .bred .zu { padding: 0 22px 28px; }
  .funktioner .zu .bunke { min-height: 400px; }
}
@media (max-width: 560px) {
  .funktioner .qh { flex-direction: column; gap: 10px; }
  .funktioner .qtri small { white-space: normal; min-height: 2.6em; }
}
@media (prefers-reduced-motion: reduce) { .funktioner .tn, .funktioner .tl { opacity: 1; transform: none; transition: none; } }

/* ===== CardStack (.bunke) ===== */
.bunke { position: relative; }
.bunke > [data-kort] {
  position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.98);
  transform-origin: 50% 100%; pointer-events: none; z-index: 1;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.bunke > [data-kort].on { opacity: 1; transform: none; pointer-events: auto; z-index: 3; }
.bunke > [data-kort].n1 { opacity: .55; transform: translateY(14px) scale(.94); z-index: 2; }
.bunke > [data-kort].n2 { opacity: .25; transform: translateY(28px) scale(.88); z-index: 1; }
.bunke > [data-kort].n1 > *,
.bunke > [data-kort].n2 > * { visibility: hidden; }
.bunke .prikker { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: center; gap: 6px; }
.bunke .prikker button { width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 0; background: rgba(9,9,11,.2); cursor: pointer; transition: width .3s, background .3s; }
.bunke .prikker button.on { width: 22px; background: var(--ink); }
.bunke.lys .prikker button { background: rgba(255,255,255,.35); }
.bunke.lys .prikker button.on { background: #fff; }
@media (prefers-reduced-motion: reduce) { .bunke > [data-kort] { transition: none; } }

/* ===== Kundecitater (.kundecitater) ===== */
.kundecitater { padding-top: var(--sp); }

/* ===== QuoteRotator (.cq) ===== */
.cq {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border-radius: 32px; overflow: hidden; min-height: 520px; color: #fff;
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(255,108,71,.28), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgba(167,84,129,.22), transparent 70%),
    linear-gradient(150deg, #2D4F6E 0%, #203A52 50%, #16273A 100%);
}
.cq .billeder { position: relative; min-height: 320px; overflow: hidden; }
.cq .slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 6s ease; }
.cq .slide.on { opacity: 1; transform: scale(1); }
.cq .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cq .tekst { padding: 64px 64px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.cq .tekst::before { content: "“"; position: absolute; top: 28px; right: 48px; font: 400 160px/1 var(--disp); color: rgba(255,255,255,.08); }
.cq .etiket { font-size: 13px; color: rgba(255,255,255,.65); letter-spacing: .02em; }
.cq .citater { display: grid; margin-top: 20px; }
.cq .q { grid-area: 1/1; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.cq .q.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; }
.cq blockquote { font: 400 clamp(22px, 2.2vw, 30px)/1.35 var(--disp); letter-spacing: -.015em; color: #fff; }
.cq .af { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); }
.cq .af img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.cq .af b { display: block; font-weight: 500; font-size: 15px; }
.cq .af span { font-size: 14px; color: rgba(255,255,255,.65); }
.cq .nav { display: flex; gap: 8px; margin-top: 36px; }
.cq .bar { flex: 0 0 64px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(255,255,255,.2); cursor: pointer; overflow: hidden; position: relative; }
.cq .bar::before { content: ""; position: absolute; inset: -10px 0; }
.cq .bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; }
.cq .bar.on i { animation: fyld var(--dur, 7s) linear forwards; }
.cq.pause .bar.on i { animation-play-state: paused; }
@keyframes fyld { to { width: 100%; } }
@media (max-width: 900px) {
  .cq { grid-template-columns: minmax(0,1fr); border-radius: 24px; }
  .cq .billeder { min-height: 300px; }
  .cq .tekst { padding: 36px 24px; }
}
@media (prefers-reduced-motion: reduce) { .cq { --dur: 12s !important; } .cq .slide, .cq .q { transition: none; } }

/* ===== GrantThornton (.grant-thornton) ===== */
#grant-thornton { padding-top: var(--sp); }
.grant-thornton .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.grant-thornton .split .facade { width: 100%; height: auto; aspect-ratio: 1100/1231; object-fit: cover; border-radius: var(--r-lg); filter: saturate(.95); }
.grant-thornton .tekst { margin-top: 16px; }
.grant-thornton .omraader { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.grant-thornton .omraader li { background: var(--light); border-radius: var(--r-sm); padding: 14px 16px; }
.grant-thornton .omraader b { display: block; font-weight: 500; font-size: 15px; }
.grant-thornton .omraader span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.grant-thornton .citat { margin-top: 24px; padding: 28px; border-radius: var(--r-md); background: var(--light); }
.grant-thornton .citat blockquote { font-size: 20px; line-height: 1.5; color: var(--ink); font-weight: 300; }
.grant-thornton figcaption { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.grant-thornton figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.grant-thornton figcaption b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.grant-thornton figcaption span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .grant-thornton .split { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .grant-thornton .split .facade { aspect-ratio: 4/3; }
}
@media (max-width: 560px) { .grant-thornton .omraader { grid-template-columns: minmax(0,1fr); } }

/* ===== FoerISigerJa (.foer) ===== */
.foer { padding-bottom: var(--sp); }
.foer .baand { margin-top: 20px; border-radius: var(--r-lg); padding: 22px 28px; display: flex; align-items: center; gap: 24px; background: linear-gradient(110deg, #E9EEF5 0%, #F1EAF2 55%, #FCEDE7 100%); }
.foer .baand p { flex: 1; font-size: 16px; color: var(--ink); }
.foer .av { position: relative; flex: none; }
.foer .av img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid #fff; }
.foer .av i { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #2DBE6C; border: 2px solid #fff; }
@media (max-width: 900px) { .foer .baand { flex-direction: column; align-items: flex-start; } }

/* ===== PhaseCards (.faser) ===== */
.faser .linje { list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
.faser .linje li { display: flex; align-items: center; gap: 12px; }
.faser .n { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 15px; background: #fff; border: 1px solid var(--line); color: var(--slate); }
.faser .aktiv .n { background: var(--or); border-color: var(--or); color: #fff; }
.faser .linje b { font-weight: 400; font-size: 15px; color: var(--muted); }
.faser .ln { flex: 1; height: 1.5px; background: var(--line); margin: 0 12px; }
.faser .ln.sidst { background: linear-gradient(90deg, var(--or), transparent); }
.faser .kort { display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); gap: 20px; }
.faser .fase { background: var(--light); border-radius: var(--r-lg); padding: 36px 32px; }
.faser .fase.aktiv { background: linear-gradient(160deg, #FFE9E1 0%, #FFF4F0 55%, #FBF2F5 100%); }
.faser .laas { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--slate); background: rgba(75,115,151,.1); padding: 5px 11px; border-radius: 999px; }
.faser .laas.aktiv { color: var(--or); background: var(--or10); }
.faser h3 { font: 500 clamp(24px, 2.2vw, 30px)/1.05 var(--disp); letter-spacing: -.02em; margin-top: 22px; }
.faser .fase p { margin-top: 12px; font-size: 15.5px; line-height: 1.5; }
.faser .fase.aktiv p { color: var(--ink); }
@media (max-width: 900px) { .faser .linje { display: none; } .faser .kort { grid-template-columns: minmax(0,1fr); } }

/* ===== Afslutning (.finale) ===== */
/* Mørk afslutning: firkantet og fra kant til kant */
.finale { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: var(--sp) 0 40px;
  background: linear-gradient(160deg, #09090B 0%, #11131E 50%, #1C2F42 100%); }
.finale .wrap { position: relative; z-index: 1; }
.finale h2 { color: #fff; }
.finale .faq { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 72px; align-items: start; }
.finale details { border-bottom: 1px solid rgba(255,255,255,.14); }
.finale details:first-of-type { border-top: 1px solid rgba(255,255,255,.14); }
.finale summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 400; font-size: 18px; color: #fff; }
.finale summary::-webkit-details-marker { display: none; }
.finale summary i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); position: relative; flex: none; }
.finale summary i::before, .finale summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: #fff; transition: transform .25s; }
.finale summary i::after { transform: rotate(90deg); }
.finale details[open] summary i::after { transform: rotate(0); }
.finale details p { padding: 0 48px 22px 0; color: rgba(255,255,255,.65); }

.finale .meta { margin-top: var(--sp); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.5); }
.finale .meta .vl { height: 13px; }

@media (max-width: 900px) {
  .finale .faq { grid-template-columns: minmax(0,1fr); gap: 24px; }
}

/* ===== StickyCta (.sticky) ===== */
.sticky { display: none; }
@media (max-width: 760px) {
  .sticky { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; transform: translateY(150%); transition: transform .3s; }
  .sticky.on { transform: none; }
  .sticky .btn { width: 100%; box-shadow: 0 12px 30px -10px rgba(9,9,11,.4); }
}

/* ===== Lightbox (.lb) ===== */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(9,9,11,.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 72px 80px 56px; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); background: #fff; }
.lb .top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 18px 24px; color: #fff; font-size: 14px; }
.lb .top span { font-weight: 500; margin-right: auto; }
.lb .top a { color: #fff; opacity: .8; }
.lb .top button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; cursor: pointer; }
.lb .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; cursor: pointer; }
.lb .forrige { left: 16px; } .lb .naeste { right: 16px; }
.lb::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; opacity: 0; transition: opacity .2s; animation: drej .8s linear infinite; pointer-events: none; }
.lb.henter::after { opacity: 1; }
@keyframes drej { to { transform: rotate(360deg); } }
.lb .num { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.6); font-size: 13px; }
@media (max-width: 760px) {
  .lb { padding: 64px 12px 48px; }
  .lb .nav { width: 40px; height: 40px; font-size: 24px; }
  .lb .top a { display: none; }
}