/* =========================================================
   Nordic Byg — Landing page (mobile first)
   Designtokens: skift farver ét sted her.
   ========================================================= */
:root{
  --ink:#12141A;
  --ink-2:#1D2029;
  --ink-3:#2C313D;
  --text:#191C23;
  --muted:#5D6472;
  --line:#E2E5EB;
  --bg:#FFFFFF;
  --tint:#F5F6F9;

  --accent:#FF5A1F;          /* CTA / safety orange */
  --accent-press:#E24709;
  --accent-soft:#FFF1EA;
  --on-accent:#FFFFFF;
  --ok:#0E8A5F;

  --r-sm:10px; --r:14px; --r-lg:20px;
  --wrap:560px;              /* mobil-først læsebredde */
  --gut:20px;
  --tap:56px;                /* min. tap target */
  --shadow:0 1px 2px rgba(18,20,26,.06), 0 8px 24px rgba(18,20,26,.08);
  --shadow-lg:0 2px 4px rgba(18,20,26,.06), 0 18px 48px rgba(18,20,26,.16);
  /* Familjen Grotesk = svensk grotesk med blødere karakter. OBS: den går kun
     til vægt 700, så overskrifter er sat i 700 og ikke 800.
     Instrument Sans = neutral brødtekst. */
  --font-display:'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --w-display:700;
  --font:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* Egne display-regler må aldrig slå [hidden] ihjel (ramte .back på trin 1) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-family:var(--font-display); line-height:1.1; letter-spacing:-.03em; font-weight:var(--w-display); text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
svg{width:1em; height:1em; fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--font-display);
  text-shadow:0 1px 10px rgba(8,9,12,.5);
  font-size:11.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); margin-bottom:11px;
}
.eyebrow--dark{color:var(--accent); text-shadow:none}

/* ---------------- Header ---------------- */
/* Ingen baggrundsplade — headeren ligger direkte oven på hero-fotoet.
   Den følger ikke med ved scroll; den sticky bar i bunden overtager CTA og opkald. */
.hdr{
  position:absolute; top:0; left:0; right:0; z-index:20;
  color:#fff; background:none;
  padding-top:env(safe-area-inset-top, 0px);
  pointer-events:none;                 /* fotoet under må ikke blokeres */
}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:12px; height:62px}
.hdr__logo{
  height:34px; width:auto; max-width:56%; object-fit:contain; object-position:left center;
  flex:0 1 auto; min-width:0; pointer-events:auto;
  filter:drop-shadow(0 2px 10px rgba(8,9,12,.55));
}
.hdr__tel{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  flex:0 0 auto; white-space:nowrap;
  font-size:15px; font-weight:700; padding:9px 14px; border-radius:999px;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(8,9,12,.3);
}
.hdr__tel svg{font-size:15px}
.hdr__tel span{font-family:var(--font-display); font-variant-numeric:tabular-nums}
@media (max-width:389px){
  .hdr__logo{height:29px}
  .hdr__tel{font-size:14px; padding:8px 12px; gap:6px}
}

/* ---------------- Hero ---------------- */
.hero{
  background:var(--ink);
  color:#fff; padding:86px 0 34px; position:relative; isolation:isolate;
}
/* Foto + mørk tonning i ét lag. Skift billedet ud her. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(18,20,26,.64) 0%,
      rgba(18,20,26,.44) 26%,
      rgba(18,20,26,.74) 56%,
      rgba(18,20,26,.95) 100%),
    url("assets/img/hero.webp") 62% 10% / auto 135% no-repeat;
}
.hero__in{position:relative; z-index:1; text-align:center}
.hero__h1{font-size:clamp(27px, 8.2vw, 44px); letter-spacing:-.035em; margin-bottom:11px; text-shadow:0 2px 18px rgba(8,9,12,.55)}
.hero__h1 .hl{color:var(--accent)}
.hero__sub{color:#CFD4DE; font-size:15.5px; max-width:36ch; margin:0 auto 20px; text-wrap:balance; text-shadow:0 1px 12px rgba(8,9,12,.6)}
.hero__usps{position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:18px}
.hero__usps li{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:#E5E8EF}
.hero__usps svg{font-size:15px; color:var(--accent)}
.hero__fineprint{
  position:relative; z-index:1; margin-top:10px; text-align:center;
  font-size:12.5px; color:#AEB5C3;
}

/* ---------------- Formularkort ---------------- */
.card{
  background:rgba(255,255,255,.74); color:var(--text);
  -webkit-backdrop-filter:blur(2px) saturate(115%);
  backdrop-filter:blur(2px) saturate(115%);
  border:1px solid rgba(255,255,255,.62);
  border-radius:var(--r-lg);
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 26px 64px rgba(0,0,0,.42);
  padding:18px 16px 20px; scroll-margin-top:20px; text-align:left;
}
/* Faldback: uden backdrop-filter bliver kortet solidt, så teksten aldrig drukner */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:rgba(255,255,255,.97)}
}
.card__progress{margin-bottom:16px}
.card__progress-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.card__step-label{font-family:var(--font-display); font-size:12.5px; font-weight:600; color:var(--muted)}
.card__step-label b{color:var(--text)}
.card__pct{font-size:12.5px; font-weight:700; color:var(--accent)}
.bar{height:6px; border-radius:999px; background:var(--line); overflow:hidden}
.bar__fill{display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .35s cubic-bezier(.4,0,.2,1)}

.step{display:none; border:0; padding:0; margin:0; min-inline-size:0}
.step.is-active{display:block; animation:stepIn .28s cubic-bezier(.16,1,.3,1)}
@keyframes stepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.step__q{font-family:var(--font-display); font-size:22px; font-weight:var(--w-display); letter-spacing:-.028em; line-height:1.2; padding:0; margin-bottom:6px; outline:none}
.step__hint{font-size:14px; color:var(--muted); margin-bottom:14px}

/* Valgmuligheder */
.options{display:grid; gap:9px; margin-bottom:4px}
.option{
  display:block; width:100%; text-align:left; cursor:pointer;
  min-height:var(--tap); padding:13px 46px 13px 16px;
  background:rgba(255,255,255,.72); border:1.5px solid rgba(18,20,26,.10); border-radius:var(--r);
  position:relative; transition:border-color .15s, background .15s, transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.option::after{
  content:""; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
  transition:border-color .15s, background .15s;
}
.option__t{display:block; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.012em}
.option__s{display:block; font-size:13.5px; color:var(--muted); margin-top:2px}
.option:active{transform:scale(.99)}
@media (hover:hover){ .option:hover{border-color:rgba(18,20,26,.22); background:rgba(255,255,255,.88)} }
.option.is-selected{border-color:var(--accent); background:#FFF1EA}
.option.is-selected::after{
  border-color:var(--accent); background:var(--accent);
  box-shadow:inset 0 0 0 4px #fff;
}
.option:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* Tryghedslinje */
.reassure{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  background:rgba(18,20,26,.055); border-radius:var(--r-sm); padding:11px 13px;
  font-size:13.5px; color:var(--muted); line-height:1.45;
}
.reassure svg{flex:none; font-size:17px; color:var(--ok); margin-top:1px}

/* Inputfelter */
.field{margin-bottom:14px}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
.field .opt{font-weight:500; color:var(--muted)}
.field input, .field textarea{
  width:100%; min-height:var(--tap); padding:14px 15px;
  font-size:16px; /* 16px = ingen zoom på iOS */
  font-family:inherit; color:var(--text); background:rgba(255,255,255,.86);
  border:1.5px solid rgba(18,20,26,.12); border-radius:var(--r);
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:auto; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:#A2A9B7}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field.has-error input, .field.has-error textarea{border-color:#D93025; background:#FFF7F6}
.field__err{font-size:13px; color:#D93025; margin-top:6px; font-weight:500; display:none}
.field__err.is-visible{display:block}
.field--zip input{max-width:140px; letter-spacing:.08em; font-weight:600}

/* Foldbar valgfri sektion */
.disclose{margin:-2px 0 14px}
.disclose summary{
  cursor:pointer; font-size:14.5px; font-weight:600; color:var(--accent);
  padding:8px 0; list-style:none; display:flex; align-items:center; gap:6px;
}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::before{content:"+"; font-weight:800; font-size:17px; line-height:1}
.disclose[open] summary::before{content:"–"}

/* Billedupload */
.upload{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:26px 18px; margin-bottom:12px; cursor:pointer; text-align:center;
  border:1.5px dashed rgba(18,20,26,.22); border-radius:var(--r);
  background:rgba(255,255,255,.55);
  transition:border-color .15s, background .15s;
}
.upload:active{border-color:var(--accent); background:var(--accent-soft)}
@media (hover:hover){ .upload:hover{border-color:var(--accent); background:rgba(255,255,255,.8)} }
#billeder:focus-visible + .upload{outline:3px solid var(--accent); outline-offset:2px}
.upload__icon{
  font-size:26px; color:var(--accent); margin-bottom:5px;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.upload__t{font-family:var(--font-display); font-weight:700; font-size:16px}
.upload__s{font-size:13px; color:var(--muted)}

.files{display:grid; gap:8px; margin-bottom:14px}
.files__item{
  display:flex; align-items:center; gap:11px; padding:8px 8px 8px 8px;
  background:rgba(255,255,255,.72); border:1px solid rgba(18,20,26,.1);
  border-radius:var(--r-sm);
}
.files__thumb{width:44px; height:44px; flex:none; border-radius:7px; object-fit:cover; background:var(--tint)}
.files__meta{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.files__meta b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.files__meta span{font-size:12.5px; color:var(--muted)}
.files__del{
  flex:none; width:32px; height:32px; border:0; border-radius:8px; cursor:pointer;
  background:rgba(18,20,26,.06); color:var(--muted); font-size:20px; line-height:1;
}
.files__del:active{background:rgba(18,20,26,.12)}

/* Samtykke */
.consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.45; margin:4px 0 16px; cursor:pointer}
.consent input{flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent)}
.consent a{color:var(--text); text-decoration:underline}

/* Knapper */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:15px 22px; cursor:pointer;
  font-family:var(--font-display); font-size:16.5px; font-weight:700; letter-spacing:-.012em;
  border:0; border-radius:var(--r); text-decoration:none;
  transition:background .15s, transform .08s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{font-size:19px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:0 4px 14px rgba(255,90,31,.32)}
.btn--primary:active{background:var(--accent-press); transform:translateY(1px)}
.btn--dark{background:var(--ink); color:#fff}
.btn--full{width:100%}
.btn--lg{min-height:62px; font-size:18px}
.btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.btn[disabled]{opacity:.65; pointer-events:none}

.back{
  display:inline-flex; align-items:center; gap:4px; margin-top:14px;
  background:none; border:0; padding:8px 4px; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--muted);
}
.back svg{font-size:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.microtrust{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:14px}
.microtrust li{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px}
.microtrust li::before{content:"✓"; color:var(--ok); font-weight:800}
.form-error{
  margin-top:12px; padding:11px 13px; border-radius:var(--r-sm);
  background:#FFF1F0; color:#B3261E; font-size:14px; font-weight:500;
}

/* Kvittering */
.done{text-align:center; padding:12px 4px 6px}
.done__icon{
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; background:#E7F6EF; color:var(--ok); font-size:30px;
}
.done h2{font-size:23px; margin-bottom:8px}
.done > p{color:var(--muted); font-size:15.5px}
.done__next{margin-top:22px; padding:16px; background:rgba(18,20,26,.055); border-radius:var(--r); text-align:left}
.done__next-t{font-weight:700; font-size:15.5px; margin-bottom:4px}
.done__next-s{font-size:14px; color:var(--muted); margin-bottom:14px}
.done__tel{display:inline-block; margin-top:16px; font-size:15px; font-weight:700; color:var(--accent)}


/* ---------------- Sektioner ---------------- */
.sec{padding:46px 0}
.sec--tint{background:var(--tint)}
/* Sektionsoverskrifter centreres; indholdet under dem bliver venstrestillet */
.sec .eyebrow{text-align:center}
.sec__h2{
  font-size:clamp(25px,6.8vw,32px); margin:0 auto 26px;
  text-align:center; max-width:20ch; text-wrap:balance;
}

.steps3{display:grid; gap:14px; margin-bottom:26px}
.steps3 li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:18px 18px 18px 60px;
}
.steps3__n{
  position:absolute; left:18px; top:18px;
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:800;
}
.steps3 h3{font-size:17px; margin-bottom:4px}
.steps3 p{font-size:14.5px; color:var(--muted)}

.usps{display:grid; gap:12px}
.usps li{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px}
.usps h3{font-size:17px; margin-bottom:5px}
.usps p{font-size:14.5px; color:var(--muted)}



/* FAQ */
.faq{display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
  font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:10px; height:10px;
  border-right:2.2px solid var(--muted); border-bottom:2.2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details > div{padding:0 0 18px}
.faq p{font-size:15px; color:var(--muted)}

/* Sidste CTA */
.final{background:var(--ink); color:#fff; padding:48px 0 52px; text-align:center}
.final h2{font-size:clamp(25px,6.8vw,32px); margin:0 auto 10px; max-width:20ch}
.final p{color:#B8BECB; font-size:15.5px; margin-bottom:22px}
.final__tel{display:inline-block; margin-top:16px; font-size:15px; font-weight:700; color:#fff; opacity:.85}

/* Footer */
.ftr{background:var(--ink-2); color:#98A0AF; padding:28px 0 calc(100px + env(safe-area-inset-bottom)); font-size:13.5px; text-align:center}
.ftr p{margin-bottom:6px}
.ftr b{color:#E6E9EF}
.ftr a{color:#C8CEDA}
.ftr__legal{margin-top:12px; font-size:12.5px; opacity:.8}

/* ---------------- Sticky CTA ---------------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:10px; align-items:center;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.sticky.is-visible{transform:none}
.sticky__cta{flex:1}
.sticky__call{
  flex:none; width:var(--tap); height:var(--tap); border-radius:var(--r);
  display:grid; place-items:center; font-size:22px;
  background:var(--ink); color:#fff; text-decoration:none;
}

/* ---------------- Tablet / desktop ---------------- */
@media (min-width:720px){
  :root{--wrap:720px; --gut:32px}
  body{font-size:17px}
  .hero{padding:112px 0 56px}
  .hdr__in{height:76px}
  .hdr__logo{height:40px}
  .hero::before{background-size:auto, cover}
  .hero__in{max-width:600px; margin-inline:auto}
  .card{padding:26px 26px 28px}
  .step__q{font-size:24px}
  .sec{padding:64px 0}
  .steps3{grid-template-columns:repeat(3,1fr); gap:16px}
  .usps{grid-template-columns:repeat(3,1fr)}
  .sticky{display:none}
  .ftr{padding-bottom:36px}
}
@media (min-width:1024px){
  :root{--wrap:1040px}
  .hero__in{max-width:620px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}