/* FAKTIVE hero 2026: overlinjen "Målt, ikke gættet" som en måling.
   Opbygges af assets/hero-2026.js. Uden JS står teksten som almindelig overlinje. */

.hero .kicker.kx{position:relative}
.kx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kx-line{position:relative;display:inline-block;padding-bottom:12px;margin-bottom:-12px}

/* hvert tegn har sin endelige bredde fra start, så linjen aldrig hopper under afkodningen */
.kx-ch{position:relative;display:inline-block;white-space:pre}
.kx-ch.is-noise{color:transparent}
.kx-ch.is-noise::after{
  content:attr(data-g);position:absolute;left:0;top:0;
  font-family:var(--font-mono,monospace);font-weight:500;letter-spacing:0;
  color:rgba(242,231,220,.62);
  /* skygge, så målestøjen også kan ses, når klippet bagved er lyst */
  text-shadow:0 1px 3px rgba(24,16,28,.75),0 0 12px rgba(24,16,28,.5);
}
/* "gættet" flimrer usikkert: svagere og urolig */
.kx-ch.is-noise.is-doubt::after{color:rgba(242,231,220,.32)}
.kx-ch.is-lock{animation:kx-lock 380ms cubic-bezier(.16,1,.3,1) both}
@keyframes kx-lock{
  0%{opacity:.25;transform:translateY(-.28em)}
  100%{opacity:1;transform:none}
}

/* målestokken: små streger, hver femte længere */
.kx-ruler{
  position:absolute;left:0;right:.24em;bottom:0;height:7px;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(24,16,28,.55));
  transform:scaleX(0);transform-origin:left center;
}
.kx-ruler::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(242,231,220,.55) 0 1px,transparent 1px 30px) left bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg,rgba(242,231,220,.30) 0 1px,transparent 1px 6px) left bottom/100% 3px no-repeat,
    linear-gradient(rgba(242,231,220,.22),rgba(242,231,220,.22)) left bottom/100% 1px no-repeat;
}
.kx.is-drawn .kx-ruler{transform:none;transition:transform 1100ms cubic-bezier(.16,1,.3,1)}

/* markøren der måler */
.kx-mark{
  position:absolute;left:0;bottom:-2px;width:2px;height:11px;border-radius:1px;
  background:#E45724;box-shadow:0 0 10px rgba(228,87,36,.75);
  opacity:0;transform:translateX(0);will-change:auto;
}
/* lys der følger markøren hen over stregerne */
.kx-glow{
  position:absolute;left:0;bottom:0;width:48px;height:7px;margin-left:-46px;
  background:linear-gradient(90deg,transparent,rgba(228,87,36,.55));
  opacity:0;transform:translateX(0);pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
}

@media (prefers-reduced-motion:reduce){
  .kx-ruler{transform:none !important;transition:none !important}
  .kx-ch.is-lock{animation:none}
}

/* højre kolonne: overlinjen står over feed-boksen */
.hero-side{min-width:0}
/* højre kolonne rykket ud mod højre (samme bredde): der står 130 px tilbage til skærmkanten.
   Under ca. 1266 px er der ikke plads til at rykke, og så bliver den, hvor den er. */
@media (min-width:901px){
  .hero-side{transform:translateX(clamp(0px,calc(max(32px,(100vw - 1200px)/2 + 32px) - 130px),900px))}
}

/* venstre spalte: teksten rykket 46 % mod venstre kant og sat 40 % op i størrelse.
   Højre spalte har fast bredde, så feed-boksen ikke flytter sig, når overskriften vokser. */
.hero{
  padding-left:calc(max(32px,(100vw - 1200px)/2 + 32px) - (max(32px,(100vw - 1200px)/2 + 32px) - 16px) * .46) !important;
  grid-template-columns:minmax(0,1fr) clamp(300px,32vw,466px) !important;
}
.hero h1{font-size:clamp(53px,4.9vw,95px) !important}
.hero p.sub{font-size:22px !important;line-height:1.6 !important;max-width:29em !important}
@media (max-width:900px){
  .hero{padding-left:25px !important;padding-right:24px !important;grid-template-columns:1fr !important}
  .hero h1{font-size:clamp(42px,10.5vw,62px) !important}
  .hero p.sub{font-size:19px !important;line-height:1.62 !important}
}
.hero-side > .kicker{margin-bottom:22px !important}
/* overlinjen fylder boksens bredde (størrelsen sættes af hero-2026.js) */
.hero-side > .kicker.kx{display:block;line-height:1.05;white-space:nowrap;letter-spacing:var(--kx-ls,.24em) !important;
  /* samme snit som "Compliance. Lige nu.": Mona Sans bred */
  font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:520 !important}
.hero-side > .kicker.kx .kx-line{padding-bottom:.55em;margin-bottom:-.2em}
.kx-ch.kx-last{margin-right:calc(-1 * var(--kx-ls,.24em))}
.hero-side > .kicker.kx .kx-ruler{right:0;height:.36em;min-height:7px}
.hero-side > .feed{margin:0}
@media (max-width:900px){.hero-side{margin-top:16px}.hero-side > .feed{max-height:320px}}

/* to hero-klip der krydsfader: det indkommende lægger sig ovenpå og toner op,
   så billedet aldrig bliver mørkere midt i skiftet */
.hero .media .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;
  opacity:0;z-index:0;transition:opacity 2000ms linear}
.hero .media .hv.is-on{opacity:1;z-index:1}
.hero .media .hv.is-top{z-index:2}
@media (prefers-reduced-motion:reduce){.hero .media .hv{transition:none}}

/* Creme-flade i venstre side: teksten står på sidens egen cremefarve,
   der toner ud mod midten, så videoen fortsætter i højre side.
   Starter under menuen, så menuen stadig ligger frit på videoen. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* bånd øverst, så menuen står på creme hele vejen ud og kan læses over videoen */
    linear-gradient(180deg,
      rgba(242,231,220,.96) 0,
      rgba(242,231,220,.93) calc(var(--nav-h,83px) - 8px),
      rgba(242,231,220,.55) calc(var(--nav-h,83px) + 26px),
      rgba(242,231,220,0) calc(var(--nav-h,83px) + 90px)),
    /* selve fladen i venstre side */
    linear-gradient(100deg,
      #F2E7DC 0%,
      rgba(242,231,220,.99) 30%,
      rgba(242,231,220,.94) 44%,
      rgba(242,231,220,.70) 54%,
      rgba(242,231,220,.28) 64%,
      rgba(242,231,220,0) 73%);
}
/* teksten skifter til mørk skrift på cremen */
.hero h1{color:#3C2A44 !important}
.hero p.sub{color:#5C4F48 !important}
.hero .ghost{color:#3C2A44;border-bottom-color:rgba(60,42,68,.32)}
.hero .ghost:hover{border-bottom-color:#E45724}

@media (max-width:900px){
  /* mobil: cremen ligger øverst bag teksten og toner ned mod feed-boksen */
  .hero::after{
    background:linear-gradient(180deg,
      #F2E7DC 0%,
      rgba(242,231,220,.97) 40%,
      rgba(242,231,220,.62) 50%,
      rgba(242,231,220,.16) 57%,
      rgba(242,231,220,0) 62%);
  }
  /* målestokken ligger her på videoen, der både kan være lys og mørk:
     lyse streger med skygge virker begge steder */
  .hero-side > .kicker.kx .kx-ruler{filter:drop-shadow(0 1px 2px rgba(24,16,28,.8))}
}

/* pulsen på "Lige nu." skal kunne skaleres om sit eget venstre hjørne */
.hero h1 span:last-of-type{transform-origin:left center;will-change:auto}

/* ---- linjen fra punktummet i "Lige nu." op til målestokken ---- */
.kx-dot{display:inline-block}
.kx-path{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.kx-line-path{
  fill:none;stroke:#E45724;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(228,87,36,.55));
}
.kx-head{
  /* følger sporet via offset-path; ingen margin, så prikkens midte ligger på stregen */
  position:absolute;left:0;top:0;z-index:3;width:9px;height:9px;border-radius:50%;
  offset-anchor:50% 50%;offset-rotate:0deg;
  pointer-events:none;opacity:0;background:#FFE0CE;box-shadow:0 0 20px 6px rgba(228,87,36,.8);
}
.kx-spark{
  position:absolute;z-index:3;width:26px;height:26px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,216,196,.95) 0%,rgba(228,87,36,.55) 45%,rgba(228,87,36,0) 70%);
}
@media (prefers-reduced-motion:reduce){.kx-path,.kx-head,.kx-spark{display:none}}

/* Heroens gamle baggrund fra før redesignet (aubergine med en lysere, oval lysplet oppe til højre)
   skinnede igennem videoen, så pletten stod som en blød, mørk kant i billedet. Nu er baggrunden
   husets creme, og det gamle mørke lag over .media, som ikke længere bruges, er fjernet. */
.hero{background:#F2E7DC !important}
.hero .media::after{content:none !important}
/* stillbilledet bag videoen er fjernet; klippene har selv deres startbillede (poster) */
.hero .media{background:none !important}

/* telefon: et cremefarvet slør over tekstens område, så brødteksten ikke løber ind over videoens
   mørke del (brugerens valg i mobil-gennemgangen 2026-10). Videoen ses svagt bag teksten og står
   klart fra knapperne og nedefter; computeren røres ikke */
@media (max-width:700px){
  section.hero .media::after{content:"" !important;position:absolute;inset:0;z-index:3;
    background:linear-gradient(90deg,rgba(242,231,220,.94) 0%,rgba(242,231,220,.90) 55%,rgba(242,231,220,.62) 80%,rgba(242,231,220,.30) 100%) !important;
    -webkit-mask-image:linear-gradient(#000 0,#000 52%,transparent 66%);mask-image:linear-gradient(#000 0,#000 52%,transparent 66%)}
}