/* Online Sagsbehandling – designsystem */

:root{
  /* lyserød fra logoet (logo.png), navy til flader og handlinger */
  --ink:#2A3B4C;            /* navy – flader og handlinger */
  --ink-900:#1C2B37;        /* overskrifter */
  --ink-800:#243443;        /* formularpanelet på navy */
  --ink-700:#3D5668;        /* brødtekst */
  --ink-500:#566A7B;        /* sekundær tekst, 5:1 på papir */
  --ink-300:#9AAAB6;        /* rammer */
  --rose:#E8A7AB;           /* logoets lyserøde – streger, prikker, kanter */
  --rose-500:#BC727B;       /* lyserød i display-størrelse, 3,2:1 på papir */
  --rose-600:#9E4E58;       /* lyserød tekst i lille størrelse, 5,2:1 på papir, 4,6:1 på båndet */
  --rose-300:#E8A7AB;       /* lyserød tekst på navy, 5,8:1 */
  --rose-200:#F2DCDA;       /* arket bag portrættet */
  --rose-100:#F4E4E2;       /* lyserød flade */
  --rose-50:#F9EFEE;
  --line-rose:#EBD1D0;      /* skillelinjer på den lyserøde flade */
  --paper:#F6F3EE;          /* lærredet – varmt, så hvide flader står frem */
  --paper-2:#EDE8E1;
  --white:#fff;
  --line:#E3DCD3;
  --on-ink-2:#C3CDD6;       /* sekundær tekst på navy, 7:1 */
  --on-ink-3:#A8B7C4;       /* tertiær tekst på navy, 5,6:1 */

  --shell:1240px;
  --gut:clamp(20px,5vw,64px);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  --r:14px;
  --ease:cubic-bezier(.2,.7,.25,1);
  --out:cubic-bezier(.16,1,.3,1);   /* sikker ankomst */
  --pen:cubic-bezier(.37,0,.63,1);  /* pennestrøg, jævnt tempo */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--rose-100);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--rose-600);outline-offset:3px;border-radius:4px}
:is(.sec--ink,.cta,.ftr,.nav) ::selection{background:var(--rose);color:#fff}
:is(.sec--ink,.cta,.ftr,.nav) :focus-visible{outline-color:var(--rose-300)}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em;color:var(--ink-900)}
h1{font-size:clamp(2.45rem,4.5vw,3.7rem);line-height:1.06}
h2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,9vw,132px)}
.sec--tight{padding-block:clamp(56px,6vw,88px)}
/* undersidernes første sektion starter tættere på headeren, i familie med forsidens hero */
.sec.intro{padding-top:clamp(48px,4.5vw,64px)}

/* eyebrow: ren versal-label, intet ornament */
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--rose-600);margin:0 0 1.1rem;font-family:var(--sans)
}
.lede{font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.6;color:var(--ink-700);max-width:60ch}
.measure{max-width:64ch}
.copy{font-size:1.02rem;line-height:1.65;color:var(--ink-700);max-width:58ch;margin:1.1rem 0 0}
.goal{margin:1.8rem 0 0;font-size:.95rem;color:var(--ink-500)}
.goal strong{display:block;margin-top:.35rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.01em;color:var(--rose-500)}
.goal + .copy{margin-top:1.4rem}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.98rem;font-weight:600;letter-spacing:.005em;
  padding:1.05em 1.9em;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease)
}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--ink-900);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(44,65,81,.6)}
.btn--ghost{border-color:var(--ink-300);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--white)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn:disabled{cursor:default;transform:none;box-shadow:none}
.btn.is-sent{background:var(--rose-100);color:var(--ink-900)}
.btn .ok{width:17px;height:17px;flex:none;color:var(--rose-600)}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.98rem;
  text-decoration:none;color:var(--ink);box-shadow:inset 0 -1px 0 var(--rose);
  padding:.75em 0;transition:.25s var(--ease)
}
.tlink:hover{color:var(--rose-600);gap:.8em}

/* ---------- header ---------- */
/* fast baggrund: logoet er en JPEG med creme bund, som ellers står som en kasse over mørke sektioner */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:92px}
.hdr__logo img{height:50px;width:auto}
/* midlertidigt ordmærke i tekst, indtil det nye logo foreligger */
.wm{font-family:var(--serif);font-size:1.6rem;line-height:1;letter-spacing:-.015em;color:var(--ink-900);white-space:nowrap}
.hdr__logo{text-decoration:none;flex:none}
.nav{display:flex;align-items:center}
.nav__in{display:flex;align-items:center;gap:2.1rem}
.nav__foot{display:none}
.nav__l{
  text-decoration:none;font-size:.96rem;font-weight:500;color:var(--ink-700);
  position:relative;padding-block:4px;transition:color .2s;white-space:nowrap
}
.nav__l span{display:block}
/* Kontakt står kun ét sted: som knap, når den er synlig, ellers i menuen */
@media(min-width:1201px){.nav__l[href="kontakt.html"]{display:none}}
@media(max-width:1000px){.nav.open .nav__l[href="kontakt.html"]{display:none}}
/* fem menupunkter: mellem burgermenuen og bred skærm skjules header-knappen (Kontakt står i menuen) */
@media(min-width:1001px) and (max-width:1200px){
  .nav__in{gap:1.5rem}
  .hdr__cta .btn{display:none}
}
.nav__l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__l:hover{color:var(--ink-900)}
.nav__l:hover::after,.nav__l[aria-current="page"]::after{transform:scaleX(1)}
.nav__l[aria-current="page"]{color:var(--ink-900)}
.hdr__cta{display:flex;align-items:center;gap:1.4rem}
.burger{
  display:none;align-items:center;gap:.75rem;min-height:48px;padding:12px 2px 12px 14px;margin-right:-2px;
  background:none;border:0;cursor:pointer;font:600 .92rem/1 var(--sans);letter-spacing:.01em;color:var(--ink)
}
.burger__t{min-width:2.6em;text-align:right}
.burger__i{position:relative;width:22px;height:12px;flex:none}
.burger__i i{position:absolute;left:0;width:22px;height:1.5px;border-radius:1px;transition:transform .4s var(--out)}
.burger__i i:first-child{top:0;background:var(--rose-600);transform:translate(4.4px,0) rotate(0) scaleX(.6)}
.burger__i i:last-child{bottom:0;background:var(--ink);transform:translate(0,0) rotate(0) scaleX(1)}
.burger[aria-expanded="true"] .burger__i i:first-child{transform:translate(0,5.25px) rotate(45deg) scaleX(.9)}
.burger[aria-expanded="true"] .burger__i i:last-child{transform:translate(0,-5.25px) rotate(-45deg) scaleX(.9)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,4vw,56px) clamp(48px,5vw,72px)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center}
/* loftet holder "Jeg tager mig af sagerne." på én linje i spalten på 576 px, så overskriften står i to linjer */
.hero h1{font-size:clamp(2.45rem,4.5vw,3.5rem)}
.hero h1 .b{display:block}
.hero h1 .b--rose{color:var(--rose-500)}
.hero__lede{margin-top:1.6rem;font-size:clamp(1.08rem,1.35vw,1.26rem);color:var(--ink-700);max-width:46ch;line-height:1.6}
.hero__more{max-width:50ch;font-size:1rem;color:var(--ink-500)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}
.hero__media{position:relative}
.hero__media img{width:100%;border-radius:var(--r);object-fit:cover;object-position:50% 22%;
  aspect-ratio:4/4.05;max-height:min(560px,58vh)}
/* portrætter hvor motivet står lavt i originalen: beskær oppefra, øjnene på ca. en tredjedel */
.hero__media--high img{object-position:50% 62%}
.hero__blob{position:absolute;inset:auto -6% -7% 16%;height:62%;background:var(--rose-200);border-radius:var(--r);z-index:-1}

.creds{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line);padding:1.4rem 0 0;margin-bottom:0;
  display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;align-items:center}
.creds li{list-style:none;font-size:.88rem;color:var(--ink-500);display:flex;align-items:center;gap:.6rem}
.creds li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose);flex:none}
.creds ul{display:contents}


/* udtalelse */
.testi{margin:0;max-width:62ch;padding-left:clamp(0px,2vw,28px)}
.testi blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.38;
  color:var(--ink-900);text-indent:-.42em
}
.testi blockquote::before{content:"\201D";color:var(--rose)}
.testi figcaption{margin-top:1.1rem;font-size:.88rem;color:var(--ink-500);letter-spacing:.01em}

/* ?ren i adressen skjuler alle afventer-markeringer, til ren kundepræsentation */
html[data-ren] [data-udfyldes]::after{display:none}
html[data-ren] .tbd{border:0;padding:0;color:var(--ink-500)}
html[data-ren] :is(.ftr,.cta) .tbd{color:var(--on-ink-3)}
html[data-ren] .tbd::before{content:""}

/* markering af felter, kunden skal udfylde – fjernes inden levering */
[data-udfyldes]{position:relative}
[data-udfyldes]::after{
  content:"Afventer indhold fra Line";position:absolute;top:8px;right:var(--gut);
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--rose-600);background:var(--rose-50);border:1px solid var(--rose-100);
  padding:.35em .8em;border-radius:99px
}

/* felt der mangler rigtigt indhold – tydeligt markeret, ikke nuller der ligner data */
.tbd{
  display:inline-block;font-size:.8rem;letter-spacing:.06em;
  color:var(--rose-600);border:1px dashed rgba(232,167,171,.6);
  padding:.18em .7em;border-radius:6px
}
.tbd::before{content:"Afventer: "}
.tbd--dark{color:var(--rose-300);border-color:rgba(232,167,171,.45)}

/* navnekort på portrættet */
.namecard{
  position:absolute;left:clamp(-28px,-2vw,-16px);bottom:clamp(22px,3vw,36px);margin:0;
  background:var(--white);border-radius:12px;padding:.95rem 1.35rem 1rem;
  box-shadow:0 18px 40px -22px rgba(28,44,56,.55),0 2px 6px -2px rgba(28,44,56,.12);
  display:grid;gap:.2rem;min-width:220px
}
.namecard__n{font-family:var(--serif);font-size:1.18rem;color:var(--ink-900);letter-spacing:-.01em;line-height:1.2}
.namecard__r{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-600)}

/* navnet forankrer kompetencerne */
.creds__name{
  font-family:var(--serif);font-size:1.12rem;color:var(--ink-900);letter-spacing:-.01em
}
.creds__name::before{display:none}

/* navn som byline og underskrift */
.byline{
  margin:1.4rem 0 0;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);
  color:var(--ink-900);line-height:1.3
}
.byline span{
  display:block;font-family:var(--sans);font-size:.88rem;font-weight:500;
  letter-spacing:.02em;color:var(--ink-500);margin-top:.3rem
}
.sign{
  margin-top:2.2rem;font-family:var(--serif);font-size:1.3rem;color:var(--ink-900);
  padding-top:1.4rem;border-top:1px solid var(--line);display:inline-block
}

/* ---------- sagens gang ---------- */
.flow{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(32px,5vw,76px);align-items:start}
.flow__media img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/5.55}

.steps{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;position:relative}
.steps::before{
  content:"";position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(var(--rose-100),var(--rose),var(--rose-100))
}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;padding-block:clamp(16px,1.8vw,22px);position:relative}
.step__ic{
  width:47px;height:47px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--white);
  border:1px solid var(--line);color:var(--ink);position:relative;z-index:1;
  transition:border-color .3s var(--ease),transform .3s var(--ease)
}
.step__ic svg{width:27px;height:27px}
.step__ic .ac{color:var(--rose-600);stroke:var(--rose-600)}
.step:hover .step__ic{border-color:var(--rose);transform:translateY(-2px)}
.step h3{font-size:1.2rem;margin-bottom:.35rem}
.step p{font-size:.97rem;color:var(--ink-700);margin:0;max-width:52ch}


/* ---------- sagens gang, vandret ---------- */
.flowhead{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.flowhead__media img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:16/9}

.phases{
  list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px)
}
.phases::before{
  content:"";position:absolute;top:23px;left:24px;right:calc(25% - 24px);height:1px;
  background:linear-gradient(90deg,var(--rose),var(--rose-100))
}
.phase{position:relative;scroll-margin-top:124px}
/* klik i faserækken lander på netop den fase og peger på den */
.phase:target h3{animation:called-ink 2.6s var(--ease) .6s backwards}
@keyframes called-ink{0%,100%{color:var(--ph-ink,var(--ink-900))}18%,72%{color:var(--ph-hl,var(--rose-600))}}
.phase .step__ic{margin-bottom:1.3rem}
.phase h3{font-size:1.3rem;margin-bottom:1rem}
.phase ul{list-style:none;margin:0;padding:1rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem}
.phase ul li{font-size:.93rem;line-height:1.5;color:var(--ink-700);padding-left:1rem;position:relative}
.phase ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--rose)}
.phases__note{margin:clamp(32px,3vw,44px) 0 0;font-size:.9rem;color:var(--ink-500);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}

.cards.cards--3{grid-template-columns:repeat(3,1fr)}
/* fire ydelser: to og to, så teksten får en læsbar bredde */
.cards.cards--4{grid-template-columns:repeat(2,1fr)}

.bens.bens--3{grid-template-columns:repeat(3,1fr)}
.bens--3 .ben{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,36px)!important;border-right:1px solid var(--line)!important;grid-template-columns:1fr;gap:1rem;align-content:start}
.bens--3 .ben:first-child{padding-left:0!important}
.bens--3 .ben:last-child{border-right:0!important;padding-right:0!important}

/* ---------- sektionshoved ---------- */
.shead{max-width:70ch}
.shead--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;max-width:none}
.shead p{margin-top:1.1rem}

/* ---------- ydelseskort ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.6vw,24px);margin-top:clamp(40px,4vw,60px)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(28px,3vw,42px);transition:.35s var(--ease);position:relative
}
.card:hover{border-color:var(--rose);transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(44,65,81,.45)}
.card__ic{width:42px;height:42px;color:var(--ink);margin-bottom:1.4rem}
.card__ic .ac{stroke:var(--rose-600)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink-700);font-size:.98rem;margin:0}

/* ---------- flader ----------
   navy ejer to regioner (Sagens gang og kontakt), rosa ejer ét varmt bånd (samarbejdet og systemerne) */
.band{background:var(--white);border-block:1px solid var(--line)}
.band--rose{background:var(--rose-100);--line:var(--line-rose)}
.band--rose + .band--rose{border-top:1px solid var(--line-rose)}
.band--rose .ben__m{color:var(--rose-600)}

.sec--ink{background:var(--ink);color:var(--on-ink-2);--ph-ink:#fff;--ph-hl:var(--rose-300);--st-rest:rgba(255,255,255,.2)}
.sec--ink :is(h2,h3){color:#fff}
.sec--ink .eyebrow{color:var(--rose-300)}
.sec--ink .lede{color:var(--on-ink-2)}
.sec--ink .phases::before{background:linear-gradient(90deg,var(--rose),rgba(232,167,171,.3))}
.sec--ink .phases::after{background:var(--rose-300)}
.sec--ink .step__ic{background:var(--ink);border-color:rgba(255,255,255,.2);color:#fff}
.sec--ink .step__ic .ac{color:var(--rose-300);stroke:var(--rose-300)}
.sec--ink .phase ul{border-top-color:rgba(255,255,255,.14)}
.sec--ink .phase ul li{color:var(--on-ink-2)}
.sec--ink .phases__note{color:var(--on-ink-3)}
.sec--ink .tlink{color:#fff}
.sec--ink .tlink:hover{color:var(--rose-300)}

/* ---------- fordele ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,6vw,96px);align-items:start}
.split__head{position:sticky;top:132px}
.bens.bens--list{grid-template-columns:1fr;margin-top:0}
.bens--list .ben{padding:clamp(22px,2.4vw,30px) 0!important;border-right:0!important}
.bens{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:clamp(40px,4vw,56px);border-top:1px solid var(--line)}
.ben{padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.ben:nth-child(odd){padding-right:clamp(24px,3vw,48px);border-right:1px solid var(--line)}
.ben:nth-child(even){padding-left:clamp(24px,3vw,48px)}
.ben__m{width:22px;height:22px;color:var(--rose-600);margin-top:5px;flex:none}
.ben h3{font-size:1.18rem;margin-bottom:.4rem}
.ben p{font-size:.96rem;color:var(--ink-700);margin:0}

/* ---------- systemer ---------- */
.sys{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 3rem}
.sys__l{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
.sys__i{font-family:var(--serif);font-size:1.5rem;color:var(--ink);letter-spacing:-.01em}
.sys__logo{width:auto;opacity:.86;transition:opacity .25s}
.sys__logo:hover{opacity:1}
.sys__logo--mw{height:46px}
.sys__logo--cb{height:35px}
.sys__re{font-family:var(--sans);font-weight:600;font-size:1.8rem;letter-spacing:-.02em;color:var(--ink);opacity:.86}
/* striben på forsiden: logoerne i fuld størrelse, afstemt efter synlig bogstavhøjde og fordelt over bredden */
.sys--strip{justify-content:space-between;gap:1.6rem 3rem}
.sys--strip .sys__logo--mw{height:60px}
.sys--strip .sys__logo--cb{height:40px}
.sys--strip .sys__re{font-size:2.5rem}

/* prissidens top med husfoto */
.phero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.phero__media img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/3}

/* ---------- om-strib ---------- */
.about{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(32px,5vw,80px);align-items:center}
.about__media img{border-radius:var(--r);width:100%;object-fit:cover;aspect-ratio:4/4.8}
.quote{
  font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.72rem);line-height:1.4;
  color:var(--ink-900);border-left:2px solid var(--rose);padding-left:1.6rem;margin:2rem 0 0
}

/* bredt billede over om-teksten */
.wideimg{margin:0}
.wideimg img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:1536/780;object-position:70% 30%}
.about2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:start}
.about2 .quote{margin:1.8rem 0}
.about2__img{margin:clamp(28px,3vw,40px) 0 0;max-width:380px}
.about2__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r)}
/* overskriften bliver stående, mens den længere tekst læses */
.about2 > div:first-child{position:sticky;top:132px}
.about2 .quote + .copy{margin-top:0}

/* ---------- priser ---------- */
.ptable{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ptable + .ptable{margin-top:22px}
.ptable__h{padding:1.15rem clamp(20px,2.4vw,32px);background:var(--ink);color:#fff;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.prow{display:flex;flex-wrap:wrap;align-content:center;justify-content:space-between;align-items:baseline;gap:.2rem 1.5rem;
  padding:1.15rem clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.prow__n{font-weight:500;flex:1 1 12rem}
.prow__p{font-family:var(--serif);font-size:1.32rem;color:var(--ink-900);white-space:nowrap}
.prow--sum{background:var(--paper-2);border-top:1px solid var(--ink-300)}
.prow--sum .prow__n{font-weight:600}
.prow--sum .prow__p{color:var(--ink-900)}
.pnote{font-size:.9rem;color:var(--ink-500);margin-top:1.1rem}
/* tabellerne står i heroens gitter (samme kolonner og mellemrum som .phero), og rækkerne er låst
   på tværs med subgrid, så Førsalg står ud for Førsalg, også hvis en overskrift bryder */
.sec--follow{padding-top:clamp(48px,6vw,88px)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);align-items:start}
.pgrid > .ptable + .ptable{margin-top:0}
.pgrid--6 > .ptable{grid-row:span 6}
.pgrid--2 > .ptable{grid-row:span 2}
@supports (grid-template-rows:subgrid){
  .pgrid > .ptable{display:grid;grid-template-rows:subgrid;align-self:stretch}
}
.pgrid .ptable__h{display:flex;align-items:center}
.pgrid--2{margin-top:clamp(36px,4vw,52px)}
/* køberrådgivning: rækker med pris og en beskrivelse under; tabellerne strækkes til samme højde */
.pgrid--kr{margin-top:clamp(36px,4vw,52px);align-items:stretch}
.pgrid--kr > .ptable{display:flex;flex-direction:column}
.pgrid--kr .prow:last-child{flex:1;align-content:flex-start}
.pgrid--kr > .ptable--fit{align-self:start}
.phero .kr-price{align-self:center}
.prow--desc{align-content:flex-start}
.prow__d{flex-basis:100%;margin-top:.35rem;color:var(--ink-700);font-size:.98rem;line-height:1.55}
.prow__d p{margin:0;max-width:52ch}
.prow__d p + p{margin-top:.6rem}
.prow--text{align-items:center}
.prow--text p{margin:0;color:var(--ink-700);font-size:.98rem;line-height:1.55;max-width:52ch}
.ptable--deal{border-color:var(--rose-100)}
.ptable--deal .prow{background:var(--rose-100);border-top:0}

/* ---------- formular ---------- */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta h1,.cta h2,.cta h3{color:#fff}
.cta__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,6vw,88px);align-items:stretch}
/* formularen står i et panel i samme højde som teksten; knappen følger felterne, lovteksten ligger i bunden */
.cta .form{display:flex;flex-direction:column;gap:1rem;background:var(--ink-800);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.cta .form__foot{flex:1}
.cta .form__notes{margin-top:auto;padding-top:.6rem}
.cta .lede{color:var(--on-ink-2)}
.cta .copy{color:var(--on-ink-2)}
.cta .goal{color:var(--on-ink-3)}
.cta .goal strong{color:var(--rose-300)}
.cta .eyebrow{color:var(--rose-300)}
.ctafacts{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}
.ctafacts li{display:flex;gap:.8rem;align-items:flex-start;font-size:.97rem;color:var(--on-ink-2);min-height:40px;align-items:center}
.ctafacts li a{padding:.5em 0;display:inline-block}
.ctafacts svg{width:18px;height:18px;color:var(--rose-300);flex:none;margin-top:4px}

.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.83rem;font-weight:600;letter-spacing:.02em;color:var(--on-ink-2)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:#fff;caret-color:var(--rose);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.92em 1.05em;transition:.25s var(--ease)
}
.field textarea{min-height:128px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--on-ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--rose);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(232,167,171,.2)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A7AB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.field select option{color:var(--ink);background:#fff}
/* knappen først, lovteksten samlet nedenunder */
.form__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;margin-top:.4rem}
.form__note{font-size:.84rem;color:var(--on-ink-3);max-width:34ch}

/* lys formular-variant */
.form--light .field label{color:var(--ink-500)}
.form--light .field input,.form--light .field textarea,.form--light .field select{
  color:var(--ink);background:#fff;border-color:var(--line)}
.form--light .field input::placeholder,.form--light .field textarea::placeholder{color:var(--ink-300)}
.form--light .form__note{color:var(--ink-500)}

.form__notes{display:grid;gap:.7rem;max-width:62ch}
.form__notes .form__note{max-width:none;margin:0}
.form__note strong{color:var(--on-ink-2);font-weight:600}
.form--light .form__note strong{color:var(--ink-700)}
.form__note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form__note a:hover{color:#fff}
.form__err{margin:0;font-size:.9rem;color:var(--rose-300);max-width:46ch}
.form--light .form__err{color:var(--rose-500)}
.form__err a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- privatlivspolitik ---------- */
.legal__date{margin-top:1.2rem;font-size:.88rem;color:var(--ink-500)}
.legal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.legal__toc{position:sticky;top:120px}
.legal__tochead{font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--rose-600);margin:0 0 .9rem}
.legal__toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal__toc a{display:block;padding:.42rem 0 .42rem 1rem;margin-left:-1px;border-left:1px solid transparent;
  font-size:.9rem;color:var(--ink-500);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--ink-900);border-left-color:var(--rose)}
.legal__body{max-width:68ch}
.legal__body h2{font-size:clamp(1.35rem,2vw,1.65rem);margin:2.8rem 0 .9rem;scroll-margin-top:120px}
.legal__body p,.legal__body li{color:var(--ink-700);font-size:1rem;line-height:1.72}
.legal__body ul{padding-left:1.1rem;margin:0 0 1.1em}
.legal__body li{margin-bottom:.4rem}
.legal__body li::marker{color:var(--rose)}
.legal__body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:3px}
.legal__short{background:var(--rose-100);border:0;border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.legal__short h2{margin:0 0 .8rem;font-size:1.25rem}
.legal__short ul{margin:0}
.legal__box{margin:2.8rem 0 0;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:10px;padding:clamp(20px,2.6vw,28px) clamp(20px,2.6vw,30px);scroll-margin-top:120px}
.legal__box h2{margin:0 0 .7rem}
.legal__box p{margin:0}
.legal__addr{font-style:normal;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:1.1rem 1.3rem;line-height:1.75;color:var(--ink-700);margin:0 0 1.1em;display:inline-block;min-width:min(100%,340px)}
.legal__table{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);margin:0 0 1.2em}
.lrow{display:grid;grid-template-columns:1fr 1.25fr;gap:1.4rem;padding:1rem 1.3rem;border-top:1px solid var(--line);font-size:.95rem;line-height:1.55;color:var(--ink-700)}
.lrow:first-child{border-top:0}
.lrow span:first-child{color:var(--ink-900);font-weight:500}
.lrow--h{background:var(--ink);color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-block:.85rem}
.lrow--h span:first-child{color:#fff;font-weight:600}

/* ---------- footer ---------- */
.ftr{background:var(--ink-900);color:var(--on-ink-2);padding-block:clamp(52px,6vw,76px) 2rem;font-size:.93rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
/* logo og tekst deler bredde, så teksten flugter med logoet */
.ftr{--brand-w:360px}
.ftr__logo{display:block;width:min(100%,var(--brand-w));height:auto;margin-bottom:1.4rem}
.ftr__about{max-width:var(--brand-w)}
.ftr .wm{color:#fff;font-size:1.9rem}
.ftr h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3);margin-bottom:1.1rem;font-weight:600}
.ftr a{text-decoration:none;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr__bot{margin-top:clamp(40px,5vw,64px);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--on-ink-3)}

/* ---------- fast handlingsbjælke på mobil ---------- */
.mbar{display:none}
@media(max-width:820px){
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,243,238,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line)
  }
  .mbar__a{
    display:flex;align-items:center;justify-content:center;gap:.5em;
    min-height:50px;border-radius:100px;text-decoration:none;
    font-size:.95rem;font-weight:600;border:1px solid var(--ink-300);color:var(--ink)
  }
  .mbar__a--p{background:var(--ink);color:#fff;border-color:var(--ink)}
  .mbar__a svg{width:17px;height:17px;flex:none}
  body{padding-bottom:78px}
  .ftr{padding-bottom:1rem}
}

/* ---------- bevægelse ----------
   Én idé: den rosa streg tegnes, som når en pen kvitterer for en sag.
   Hovedmomentet er Sagens gang, hvor stregen løber gennem de fire faser.
   Første skærm præsenterer sig én gang pr. side og session (html.calm ved gensyn).
   Alt nedenfor folden venter på .in fra main.js; uden JS står alt stille og synligt. */

@keyframes ln-up{from{transform:translateY(105%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes ph-open{from{clip-path:inset(100% 0 0 0 round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}}
@keyframes ph-settle{from{transform:scale(1.08)}}
@keyframes sheet-out{from{opacity:0;transform:translate(-5%,-6%)}}
@keyframes card-down{from{opacity:0;transform:translateY(-12px) scale(1.02);
  box-shadow:0 34px 60px -26px rgba(28,44,56,.45),0 2px 6px -2px rgba(28,44,56,.08)}}
@keyframes line-run{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes case-run{0%{left:20.5px;opacity:0}8%,86%{opacity:1}100%{left:calc(75% + 20.5px);opacity:0}}
@keyframes pen{from{stroke-dashoffset:1;opacity:0}10%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes station{0%,100%{border-color:var(--st-rest,var(--line));transform:none}22%{border-color:var(--rose);transform:scale(1.07)}45%{border-color:var(--rose);transform:none}}
@keyframes rule-y{from{transform:scaleY(0)}}
@keyframes rule-x{from{transform:scaleX(0)}}
@keyframes called-rule{0%{transform:scaleX(0);opacity:1}30%,72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes sheet-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sheet-up{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes rise{from{transform:translateY(140%)}}
@keyframes dot-in{from{transform:scale(0)}}

.ph{overflow:hidden;border-radius:var(--r)}

@media screen and (prefers-reduced-motion:no-preference){

  /* sideskift: headeren står fast, indholdet glider over */
  @view-transition{navigation:auto}
  .hdr{view-transition-name:hdr}
  .mbar{view-transition-name:mbar}
  ::view-transition-old(root){animation-duration:.18s}
  ::view-transition-new(root){animation-duration:.32s}

  /* første skærm: overskriften stiger op linje for linje, fotoet afdækkes nedefra */
  .ln{overflow:hidden;padding-block:.1em;margin-block:-.1em}
  .ln > span{display:block}
  html:not(.calm) :is(.hero,.intro) .ln > span{animation:ln-up .95s var(--out) var(--d,.12s) backwards}
  html:not(.calm) .hero .ln + .ln > span{--d:.27s}
  html:not(.calm) :is(.hero,.intro) .ph{animation:ph-open 1.15s var(--out) .05s backwards}
  html:not(.calm) :is(.hero,.intro) .ph img{animation:ph-settle 1.6s var(--out) .05s backwards}
  html:not(.calm) :is(.hero__lede,.hero__more,.hero__acts,.intro .eyebrow,.intro .byline,.intro .lede,.intro .creds){
    animation:fade-up .8s var(--out) var(--d,.4s) backwards}
  html:not(.calm) .intro .eyebrow{--d:.04s}
  html:not(.calm) .intro .byline{--d:.34s}
  html:not(.calm) :is(.hero__lede,.intro .lede){--d:.42s}
  html:not(.calm) .hero__more{--d:.5s}
  html:not(.calm) .hero__acts{--d:.58s}
  html:not(.calm) .intro .creds{--d:.6s}
  /* det rosa ark trækkes frem bag fotoet, og navnekortet lægges til sidst ned på det */
  html:not(.calm) .hero__blob{animation:sheet-out 1s var(--out) .5s backwards}
  html:not(.calm) .namecard{animation:card-down .8s var(--out) .95s backwards}

  /* Sagens gang: stregen løber fra fase til fase, og hver fase kvitteres, når stregen når den */
  .js .phases:not(.in)::before{clip-path:inset(0 100% 0 0)}
  .js .phases.in::before{animation:line-run 1.1s var(--pen) .35s backwards}
  .phases::after{content:"";position:absolute;top:20px;left:20.5px;width:7px;height:7px;border-radius:50%;
    background:var(--rose-600);opacity:0;pointer-events:none}
  .js .phases.in::after{animation:case-run 1.1s var(--pen) .35s backwards}
  .js .phase .ac{stroke-dasharray:1 1}
  .js .phase:not(.in) .ac{opacity:0}
  .js .phase.in .ac{animation:pen .6s var(--out) var(--at,.15s) backwards}
  .js .phase.in .ac + .ac{animation-delay:calc(var(--at,.15s) + .18s)}
  .js .phase.in .step__ic{animation:station 1.2s var(--ease) var(--at,.15s) backwards}
  .phase:nth-child(1){--at:.15s}
  .phase:nth-child(2){--at:.77s}
  .phase:nth-child(3){--at:1.01s}
  .phase:nth-child(4){--at:1.45s}
  .phase ul{position:relative}
  .phase ul::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rose);
    transform-origin:left;transform:scaleX(0);opacity:0}
  .phase:target ul::before{animation:called-rule 2.6s var(--out) .6s}

  /* nedenfor folden: stille indtoning, kun søskende i samme gruppe forskydes */
  .js .rv:not(.in){opacity:0}
  .js .rv.in{animation:fade-up .8s var(--out) var(--d,0s) backwards}
  .js .ph:not(.in):not(:is(.hero,.intro) *){clip-path:inset(100% 0 0 0 round var(--r))}
  .js .ph.in:not(:is(.hero,.intro) *){animation:ph-open 1.15s var(--out) backwards}
  .js .ph.in:not(:is(.hero,.intro) *) img{animation:ph-settle 1.6s var(--out) backwards}

  /* samme pen: citatstregen, fakta-fluebenene og sumstregen under priserne */
  .js .quote{position:relative;border-left-color:transparent}
  .js .quote::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--rose);transform-origin:top}
  .js .quote:not(.in)::before{transform:scaleY(0)}
  .js .quote.in::before{animation:rule-y 1s var(--out) .15s backwards}

  .js .ctafacts path{stroke-dasharray:1 1}
  .js .ctafacts:not(.in) path{opacity:0}
  .js .ctafacts.in path{animation:pen .55s var(--out) .2s backwards}
  .js .ctafacts.in li:nth-child(2) path{animation-delay:.36s}
  .js .ctafacts.in li:nth-child(3) path{animation-delay:.52s}

  .js .prow--sum{position:relative;border-top-color:var(--line)}
  .js .prow--sum::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink-300);transform-origin:left}
  .js .ptable:not(.in) .prow--sum::before{transform:scaleX(0)}
  .js .ptable:not(.in) .prow--sum .prow__p{opacity:0}
  .js .ptable.in .prow--sum::before{animation:rule-x .8s var(--pen) .45s backwards}
  .js .ptable.in .prow--sum .prow__p{animation:fade .5s var(--ease) 1.05s backwards}

  /* kvittering i formularen */
  .btn.is-sent .ok path{stroke-dasharray:1 1;animation:pen .5s var(--out) .12s backwards}
}

/* tablet og mobil: ingen gennemgående streg, hver fase kvitteres, når den kommer ind */
@media screen and (prefers-reduced-motion:no-preference) and (max-width:980px){
  .phases::after{display:none}
  .phase:nth-child(odd){--at:.15s}
  .phase:nth-child(even){--at:.4s}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:560px){
  .phase:nth-child(n){--at:.15s}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:1000px){
  .nav.open{animation:sheet-down .42s var(--out) backwards}
  .nav.open .nav__in{animation:sheet-down .56s var(--out) .07s backwards}
  .nav.open .nav__l span{animation:rise .75s var(--out) backwards}
  .nav.open .nav__l:nth-child(1) span{animation-delay:.15s}
  .nav.open .nav__l:nth-child(2) span{animation-delay:.2s}
  .nav.open .nav__l:nth-child(3) span{animation-delay:.25s}
  .nav.open .nav__l:nth-child(4) span{animation-delay:.3s}
  .nav.open .nav__l:nth-child(5) span{animation-delay:.35s}
  .nav.open .nav__l[aria-current="page"]::after{animation:dot-in .45s var(--out) .62s backwards}
  .nav.open .nav__foot{animation:fade-up .6s var(--out) .38s backwards}
  /* lukning: hurtigere end åbning, navy trækkes op først og tager det rosa med */
  .nav.open.closing .nav__in{animation:sheet-up .24s cubic-bezier(.7,0,.84,0) both}
  .nav.open.closing{animation:sheet-up .28s cubic-bezier(.7,0,.84,0) .05s both}
  .mbar{transition:transform .35s var(--out),visibility 0s linear .35s}
  body.nav-open .mbar{transform:translateY(110%);transition:transform .25s var(--out),visibility 0s linear .25s}
}

/* reduceret bevægelse: ingen rejse og ingen indgange, men tilstande og farveskift bevares */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.btn--light:hover,.card:hover,.step:hover .step__ic{transform:none}
  .burger__i i{transition:none}
}

/* ---------- responsivt ---------- */
@media(max-width:980px){
  .hero__grid,.about,.cta__grid,.shead--split,.flow,.phero,.flowhead,.about2,.legal,.split{grid-template-columns:1fr}
  .split__head{position:static}
  .about2 > div:first-child{position:static}
  .legal__toc{position:static;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;background:var(--white)}
  .legal__toc ul{columns:2;column-gap:1.5rem;border-left:0}
  .legal__toc a{padding:.72rem 0;border-left:0}
  .wideimg img{aspect-ratio:4/3;object-position:74% 30%}
  .phases{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .phases::before{display:none}
  .cards.cards--3,.cards.cards--4{grid-template-columns:1fr 1fr}
  .flowhead__media{max-width:620px}
  .flow__media{max-width:560px}
  .flow__media img{aspect-ratio:4/2.9}
  .hero__media{max-width:520px;margin-inline:auto}
  .namecard{left:14px;bottom:14px;min-width:0;padding:.75rem 1.05rem .8rem}
  .namecard__n{font-size:1.05rem}
  .hero__media img{aspect-ratio:4/3.1;max-height:none}
  .hero__media--high img{object-position:50% 40%}
  .hero__grid{gap:clamp(28px,4vw,40px)}
  .hero__blob{display:none}
  .about__media{max-width:420px}
  .about__media img{aspect-ratio:4/3.6}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .sys--strip .sys__logo--mw{height:52px}
  .sys--strip .sys__logo--cb{height:36px}
  .sys--strip .sys__re{font-size:2.2rem}
  .sys--strip .sys__l{flex-basis:100%}
}
/* burgermenuen: fem menupunkter og logoet kan ikke stå på én linje under 1000px */
@media(max-width:1000px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:inline-flex}

  /* menuen: et navy ark med en lyserød kant oppe og til højre.
     .hdr har backdrop-filter og er derfor ankeret for position:fixed – derfor top og højde, ikke inset */
  .nav.open{
    display:block;position:fixed;top:92px;left:0;right:0;height:calc(100vh - 92px);height:calc(100dvh - 92px);
    background:var(--rose);padding:12px 12px 0 0
  }
  .nav.open .nav__in{
    display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--ink);border-top-right-radius:var(--r);
    padding:clamp(18px,4.5vh,40px) var(--gut) calc(22px + env(safe-area-inset-bottom))
  }
  .nav.open .nav__l{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;
    padding:.14em 0 .2em;border-bottom:1px solid rgba(255,255,255,.13);
    font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,11.5vw,3.2rem);line-height:1.1;
    letter-spacing:-.02em;color:#fff;-webkit-tap-highlight-color:transparent
  }
  .nav.open .nav__l{white-space:normal}
  .nav.open .nav__l span{transition:transform .3s var(--out),color .2s}
  .nav.open .nav__l:active span{transform:translateX(10px);color:var(--rose)}
  /* den aktuelle side: rosa navn og sagens prik fra Sagens gang */
  .nav.open .nav__l::after{display:none}
  .nav.open .nav__l[aria-current="page"]{color:var(--rose)}
  .nav.open .nav__l[aria-current="page"]::after{
    display:block;position:static;width:9px;height:9px;border-radius:50%;background:var(--rose);transform:none;flex:none
  }
  .nav.open .nav__foot{display:grid;gap:.85rem;margin-top:auto;padding-top:34px}
  .nav__who{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:#fff;letter-spacing:-.01em}
  .nav__who span{display:block;margin-top:.3rem;font-family:var(--sans);font-size:.86rem;letter-spacing:.01em;color:var(--on-ink-3)}
  .nav__mail{justify-self:start;padding:.55em 0;font-size:.98rem;color:var(--on-ink-2);text-decoration:none;box-shadow:inset 0 -1px 0 var(--rose)}
  .nav.open .nav__foot .btn{justify-content:center;margin-top:.35rem}
  body.nav-open .mbar{visibility:hidden}
}
@media(max-width:820px){
  .sec{padding-block:clamp(52px,8vw,72px)}
  .sec--tight{padding-block:clamp(40px,6vw,56px)}
  .cards,.bens,.cards.cards--3,.cards.cards--4,.bens.bens--3{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr;row-gap:22px}
  .pgrid > .ptable{grid-row:auto;display:block}
  .bens--3 .ben{padding:24px 0!important;border-right:0!important}
  .hero__acts{display:grid;grid-template-columns:1fr;gap:.7rem}
  .hero__acts .btn{justify-content:center;width:100%}
  .ben:nth-child(odd){border-right:0;padding-right:0}
  .ben:nth-child(even){padding-left:0}
  .form__row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .legal__toc ul{columns:1}
  .lrow{grid-template-columns:1fr;gap:.35rem}
  .lrow--h span:last-child{display:none}
  .phases{grid-template-columns:1fr;row-gap:30px}
  .sys,.sys--strip{gap:1.1rem 2rem;justify-content:flex-start}
  .sys__logo--mw,.sys--strip .sys__logo--mw{height:44px}
  .sys__logo--cb,.sys--strip .sys__logo--cb{height:33px}
  .sys__re,.sys--strip .sys__re{font-size:1.75rem}
  .sys__l{flex-basis:100%}
  .phase{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}
  .phase .step__ic{margin:0}
  .phase h3{margin:0;align-self:center}
  .phase ul{grid-column:1/-1;margin-top:.9rem}
  .ftr__grid{grid-template-columns:1fr}
  .creds{gap:.55rem 1.6rem}
}