/* =========================================================
   Rye Varmepumper — 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;
}

/* Asbestsiden deler alt med forsiden på nær hero-fotoet.
   Fotoet er i landskabsformat (2:1) og beskæres hårdt i en høj mobil-hero,
   så positionen sigter mod det afdækkede stykke med lægterne. */
.hero--asbest::before{
  background:
    linear-gradient(180deg,
      rgba(18,20,26,.42) 0%,
      rgba(18,20,26,.28) 22%,
      rgba(18,20,26,.66) 50%,
      rgba(18,20,26,.95) 100%),
    url("/assets/img/hero-asbest-blaa-himmel.jpg") 40% 50% / cover no-repeat;
}
/* Tonningen er let, så himlen bliver blå og ikke grå. Teksten holder
   derfor på en kraftigere skygge i stedet for på en mørk flade. */
.hero--asbest .hero__h1{text-shadow:0 2px 6px rgba(8,9,12,.65), 0 4px 26px rgba(8,9,12,.75)}
.hero--asbest .eyebrow{
  color:#fff; letter-spacing:.19em;
  text-shadow:0 1px 4px rgba(8,9,12,.85), 0 2px 14px rgba(8,9,12,.7);
}
/* Underrubrikken er sidens svageste tekst — den er lille, lysegrå og
   ligger på foto. Her bliver den hvid, en anelse større og lidt tættere. */
.hero--asbest .hero__sub{
  color:#fff; font-size:16.5px; line-height:1.5; font-weight:500;
  text-shadow:0 1px 5px rgba(8,9,12,.9), 0 2px 18px rgba(8,9,12,.75);
}
.hero--asbest .hero__h1{
  text-shadow:0 2px 8px rgba(8,9,12,.8), 0 6px 30px rgba(8,9,12,.65);
}

/* Fotoet er bredformat, hero'en høj og smal. På mobil får billedet derfor
   sit eget bånd øverst med fast højdeforhold, i stedet for at dække hele
   hero'en — så ser man omkring 60 % af motivet frem for en smal strimmel.

   Gradienten ligger INDE i båndet og ikke på hero'en. Det er pointen:
   båndets højde afhænger af skærmbredden, mens hero'ens afhænger af
   indholdet. Bindes fadet til hero'en, rammer det forkert og efterlader
   en synlig kant dér hvor fotoet slutter. Her slutter fadet altid præcis
   på billedets underkant og lander på den samme farve som hero-bunden. */
@media (max-width:719px){
  .hero--asbest::before{
    inset:0 0 auto 0;
    aspect-ratio:1.2;
    background:
      linear-gradient(180deg,
        rgba(18,20,26,.34)  0%,
        rgba(18,20,26,.30) 16%,
        rgba(18,20,26,.54) 34%,
        rgba(18,20,26,.76) 55%,
        rgba(18,20,26,.91) 78%,
        rgba(18,20,26,.975) 94%,
        #12141A           100%),
      url("/assets/img/hero-asbest-blaa-himmel.jpg") 38% 42% / cover no-repeat;
  }
}

/* ---------------- 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}

/* ---------------- Cookiebanner ---------------- */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(18,20,26,.97); color:#E7EAF0;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateY(110%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cookie.is-visible{transform:none}
.cookie__in{max-width:var(--wrap); margin-inline:auto; display:grid; gap:12px}
.cookie__t{font-size:13.5px; line-height:1.5; color:#B9C0CE}
.cookie__t a{color:#fff; text-decoration:underline}
.cookie__btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cookie__btns .btn{min-height:48px; font-size:15px; padding:12px 14px}
/* Afvis skal være lige så let at ramme som accepter */
.btn--ghost{
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.btn--ghost:active{background:rgba(255,255,255,.18)}

/* To bjælker i bunden på samme tid bliver rodet — banneret vinder */
body.cookie-open .sticky{display:none}

/* ---------------- 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}
  .cookie__in{grid-template-columns:1fr auto; align-items:center; gap:20px}
  .cookie__btns{grid-template-columns:auto auto}
  .cookie__btns .btn{padding:12px 22px}
  .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}
}

/* =========================================================
   RYE — eget tema oven på grundsystemet
   Dyb fjordblå + nordisk grøn. Venstrestillet, lys header.
   ========================================================= */
:root{
  --ink:#0C2A33; --ink-2:#0A232B; --ink-3:#123B47;
  --text:#10262D; --muted:#557079; --line:#DCE6E5;
  --bg:#FFFFFF; --tint:#F1F6F5;
  --accent:#1E9670; --accent-press:#167A5A; --accent-soft:#E3F4EE; --on-accent:#FFFFFF;
  --ok:#1E9670;
  --r-sm:8px; --r:10px; --r-lg:14px;
  --font-display:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --w-display:800;
  --font:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
h1,h2,h3{letter-spacing:-.025em}

/* Header: lys bjælke, ikke oven på fotoet */
.hdr{position:relative; background:#fff; color:var(--ink); border-bottom:1px solid var(--line); pointer-events:auto}
.hdr__in{height:60px}
.hdr__brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.hdr__brand svg{width:30px; height:30px; flex:none}
.hdr__tag{font-size:13px; color:var(--muted); font-weight:500}

/* Hero: venstrestillet, foto i bånd øverst på mobil */
.hero{padding:0 0 34px; background:var(--ink)}
.hero--rye::before{
  background:
    linear-gradient(90deg, rgba(12,42,51,.92) 0%, rgba(12,42,51,.7) 45%, rgba(12,42,51,.15) 100%),
    url("assets/img/hero.webp") 60% 50% / cover no-repeat;
}
.hero__in{text-align:left; padding-top:28px}
.hero .eyebrow{color:#7FE0BC; text-shadow:none; letter-spacing:.14em; font-size:12px}
.hero__h1{font-size:clamp(30px, 8.6vw, 50px); letter-spacing:-.035em; line-height:1.02; text-shadow:none; margin-bottom:12px}
.hero__h1 .hl{color:#7FE0BC}
.hero__sub{margin:0 0 22px; color:#D6E3E5; text-shadow:none; font-size:16.5px; max-width:40ch; text-wrap:pretty}
.hero__usps{justify-content:flex-start}
.hero__usps svg{color:#7FE0BC}
.hero__fineprint{text-align:left; color:#9DB5BA}

@media (max-width:719px){
  .hero--rye::before{
    inset:0 0 auto 0; aspect-ratio:1.25;
    background:
      linear-gradient(180deg, rgba(12,42,51,0) 0%, rgba(12,42,51,0) 35%, rgba(12,42,51,.75) 70%, #0C2A33 100%),
      url("assets/img/hero.webp") 42% 40% / cover no-repeat;
  }
  .hero__in{padding-top:calc(100vw / 1.25 - 120px)}
}

/* Formularkort: solidt hvidt, grøn topkant via progress */
.card{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; border-radius:var(--r-lg); box-shadow:0 18px 50px rgba(5,20,25,.45); padding:20px 18px 22px}
.bar{height:5px; background:var(--tint)}
.card__step-label{font-family:var(--font); font-weight:600}
.step__q{font-size:21px; font-weight:800; letter-spacing:-.025em}

/* Valg: radio til venstre */
.option{padding:14px 16px 14px 50px; background:#fff; border:1.5px solid var(--line)}
.option::after{left:16px; right:auto; width:20px; height:20px; border:2px solid #B7C7C6}
.option__t{font-weight:700; letter-spacing:-.01em}
@media (hover:hover){ .option:hover{border-color:var(--accent); background:#fff} }
.option.is-selected{border-color:var(--accent); background:var(--accent-soft)}
.option.is-selected::after{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px #fff}

.field input{background:#fff; border-color:var(--line)}
.btn--primary{box-shadow:0 6px 18px rgba(30,150,112,.32)}
.btn:focus-visible{outline-color:var(--accent)}

/* Sektioner: venstrestillede overskrifter */
.sec{padding:52px 0}
.sec .eyebrow{text-align:left; color:var(--accent); font-size:12px; letter-spacing:.14em}
.sec__h2{text-align:left; margin:0 0 24px; max-width:none; font-size:clamp(26px,7vw,36px)}

/* Forløb som tidslinje i stedet for kort */
.steps3{gap:0; margin-bottom:28px}
.steps3 li{background:none; border:0; border-radius:0; padding:0 0 26px 52px}
.steps3 li::before{content:""; position:absolute; left:17px; top:38px; bottom:4px; width:2px; background:var(--line)}
.steps3 li:last-child{padding-bottom:0}
.steps3 li:last-child::before{display:none}
.steps3__n{left:0; top:0; width:36px; height:36px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-display); font-size:16px}
.steps3 h3{font-size:18px; padding-top:6px}
.steps3 p{font-size:15.5px}

/* Fordele: liste med ikon, ingen kort */
.sec--tint{background:var(--tint)}
.usps{gap:0}
.usps li{background:none; border:0; border-radius:0; border-top:1px solid var(--line); padding:20px 0 20px 46px; position:relative}
.usps li:last-child{border-bottom:1px solid var(--line)}
.usps li::before{content:""; position:absolute; left:0; top:20px; width:30px; height:30px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/18px no-repeat}
.usps h3{font-size:18px}
.usps p{font-size:15.5px}

.faq summary{font-size:17px}

/* Sidste CTA: grøn flade */
.final{background:var(--accent); text-align:left}
.final h2{margin:0 0 10px; max-width:18ch}
.final p{color:#E3F4EE}
.final .btn--primary{background:#fff; color:var(--ink); box-shadow:0 6px 18px rgba(5,40,30,.25)}

.ftr{background:var(--ink-2); text-align:left}

@media (min-width:720px){
  .hdr__in{height:72px}
  .hero{padding:0 0 64px}
  .hero__in{padding-top:72px; max-width:var(--wrap)}
  .steps3 li::before{display:none}
  .steps3 li{padding:0 0 0 52px}
  .usps{grid-template-columns:1fr 1fr; column-gap:40px}
  .usps li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .final .final__in{display:grid; grid-template-columns:1fr auto; column-gap:40px; align-items:center}
  .final .final__in .btn{grid-column:2; grid-row:1 / span 2; width:auto; padding-inline:36px}
}
@media (min-width:1000px){
  .hero--rye .wrap.hero__in{display:grid; grid-template-columns:minmax(0,1fr) 440px; column-gap:48px; align-items:start}
  .hero--rye .hero__in > .eyebrow,
  .hero--rye .hero__in > .hero__h1,
  .hero--rye .hero__in > .hero__sub,
  .hero--rye .hero__in > .hero__usps,
  .hero--rye .hero__in > .hero__fineprint{grid-column:1}
  .hero--rye .card{grid-column:2; grid-row:1 / span 6}
  .hero__h1{font-size:54px}
}
.hdr__brand{white-space:nowrap}
@media (max-width:519px){ .hdr__tag{display:none} }