/* FORSIDEN
   ══════════════════════════════════════════════════════════════════════
   Kun forsidens egne sektioner: heroen, genvejene, produktgitteret,
   rullekapitlet, erhvervsfeltet, formularen og spoergsmaalene.

   Skriften, farverne, topbjaelken, hovedet, foden, knapperne, pillen i
   hjoernet og cookiebanneret staar i faelles.css, som indlaeses foerst.
   Laeg ikke den slags tilbage her: saa faar forsiden sit eget udseende
   igen, og det var netop det, der fik sitet til at foles usammenhaengende.
   ══════════════════════════════════════════════════════════════════════ */

:root{--paper:#F1F2EE;--ink:#0F2019;--green:#2E6A4E;--muted:#565D58;--panel:#E7E9E3;--border:#cbd0c7}h1,h2,h3,p{margin:0}.hero{min-height:610px;display:grid;grid-template-columns:1.1fr 1fr;position:relative;gap:5%;padding:38px 4% 45px;max-width:1800px;margin:auto}.hero-copy{grid-column:2;padding:34px 0;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.hero .eyebrow{display:flex;gap:10px;align-items:center}.line{width:20px;height:2px;background:var(--green)}h1{font-size:clamp(48px,5.2vw,78px);font-weight:800;line-height:1.01;margin:25px 0;letter-spacing:-.048em}.brand-dot{color:#51AE3C}.hero-copy p{color:var(--muted);font-size:19px;line-height:1.65;max-width:440px;margin-bottom:29px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-actions .button{font-size:14px;padding:15px 18px}.assurance{font-size:12px;color:var(--muted);margin-top:18px;display:flex;gap:18px}.hero-photo{grid-column:1;grid-row:1;position:relative;overflow:hidden;border-radius:6px;height:100%;min-height:520px;background:#667b53}.hero-photo img{width:100%;height:112%;object-fit:cover;object-position:27% center;position:absolute;top:-6%;will-change:transform}.quick-links{display:grid;grid-template-columns:repeat(3,1fr);background:var(--panel);padding:28px 4%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);gap:25px}.quick-links>a{display:flex;align-items:center;gap:17px;padding:6px 23px 6px 0;border-right:1px solid var(--border)}.quick-links>a:last-child{border:0}.quick-icon{border:1px solid #8b9d8c;width:39px;height:39px;display:grid;place-items:center;border-radius:4px;color:var(--green);font-size:23px;flex-shrink:0}.quick-links h3{font-size:18px;letter-spacing:-.015em}.quick-links b{margin-left:auto;font-weight:400}.quick-links>a:hover h3{color:var(--green)}.section{padding:95px 5%}.section-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:35px}.muted{color:var(--muted);font-size:14px}.insurance{background:var(--paper)}.insurance-heading{display:flex;gap:55px;align-items:flex-end;justify-content:space-between;margin-bottom:42px}.insurance-heading h2{max-width:570px}.insurance-heading p{color:var(--muted);font-size:17px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}.product{background:var(--panel);border-radius:6px;overflow:hidden;border:1px solid #d6dad1;transition:transform .3s;
  display:grid;grid-row:span 3;grid-template-rows:subgrid}.product:hover{transform:translateY(-6px)}.product-photo{height:240px;overflow:hidden}.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.product:hover img{transform:scale(1.045)}.product:last-child img{object-position:28% center}.product-body{padding:23px;grid-row:span 2;display:grid;grid-template-rows:subgrid}.product-title{display:flex;align-items:center;gap:9px}.product svg{width:25px;height:25px;color:var(--green);flex-shrink:0;transition:transform .3s}.product:hover svg{transform:rotate(-5deg)}.product h3{font-size:23px;letter-spacing:-.03em}.product-title>span{margin-left:auto;font-size:22px}.product p{font-size:15px;color:var(--muted);margin-top:16px;margin-bottom:15px;align-self:start}.process{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%}.sticky-copy p{margin:24px 0;color:var(--muted);max-width:460px}.check-visual{margin-top:37px;border:1px solid #bdc6bb;border-radius:6px;padding:25px;max-width:470px;background:var(--paper)}.visual-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;margin-bottom:20px}.visual-top span{color:var(--muted);letter-spacing:0}.visual-row{display:flex;align-items:center;gap:20px;font-size:14px;margin:15px 0}.visual-row>span{width:124px}.track{height:5px;background:#d7ded3;flex:1;border-radius:5px;overflow:hidden}.track i{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 1.2s}.visual-row:nth-child(3) i{transition-delay:.25s}.visual-row:nth-child(4) i{transition-delay:.5s}.check-visual.active .track i{transform:scaleX(1)}.visual-row b{font-weight:400;color:var(--green);opacity:0;transition:opacity 1s .8s}.active .visual-row b{opacity:1}.check-visual small{font-size:12px;color:var(--muted);display:block;margin-top:21px}.step{display:flex;gap:25px;padding:30px 0 35px;border-bottom:1px solid #bdc6bb}.step:first-child{padding-top:0}.step-number{font-size:15px;color:var(--green);border:1px solid #98aa98;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;flex-shrink:0}.step h3{font-size:25px;margin:5px 0 15px}.step p{color:var(--muted);font-size:16px}.step-note{font-size:22px;font-weight:650;line-height:1.4;margin:32px 0 0}.step-note span{font-weight:400;font-size:14px;color:var(--muted)}.life{height:520px;position:relative;overflow:hidden;background:#536257}.life>img{position:absolute;width:100%;height:120%;top:-10%;object-fit:cover;will-change:transform}.life-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0f2019b8,#0f201922)}.life-copy{position:relative;color:var(--paper);padding:118px 5%}.life-copy .eyebrow{color:#DCE0DC}.life h2{font-size:clamp(48px,5vw,76px);margin:27px 0 24px}.life-copy p{font-size:18px}.business{display:flex;align-items:center;justify-content:space-between;gap:clamp(32px,5vw,80px);flex-wrap:wrap;background:#DBDED6;border-bottom:1px solid #bdc6bb;padding-top:70px;padding-bottom:70px}.business h2{font-size:40px;margin-top:19px}.business>div+div{align-self:center;text-align:right;flex:0 0 auto}.business p{margin-bottom:23px;max-width:480px;color:var(--muted)}.cta{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center}.cta .eyebrow{color:#b6cdb4}.cta h2{font-size:clamp(40px,3.9vw,56px);margin:25px 0}.cta>div>p{color:#ccd5ca;text-wrap:balance}.cta-panel{border:1px solid #526956;background:#1b3024;border-radius:6px;padding:36px}.panel-kicker{font-size:12px;letter-spacing:.1em;color:#b6cdb4}.cta-panel h3{font-size:30px;margin:24px 0 16px}.cta-panel p{font-size:16px;color:#ccd5ca;margin-bottom:25px}.cta-panel .button{width:100%;background:var(--paper);color:var(--ink);border-color:var(--paper)}.cta-panel .button:hover{background:#DBDED6}.panel-note{display:block;text-align:center;font-size:12px;color:#ccd5ca;margin:15px 0 25px}.call{border-top:1px solid #526956;padding-top:22px;display:flex;justify-content:space-between;gap:15px;font-size:13px}.call a{white-space:nowrap}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:10%}.faq h2{font-size:38px;margin-top:23px}.questions details{border-bottom:1px solid var(--border);padding:23px 0}.questions details:first-child{padding-top:0}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:600}summary::-webkit-details-marker{display:none}summary span{font-size:23px;line-height:1}.questions p{padding-top:16px;color:var(--muted)}.questions p a{text-decoration:underline}details[open] summary span{transform:rotate(45deg)}:focus-visible{outline:3px solid var(--green);outline-offset:5px}.reveal{transition:opacity .7s,transform .7s}.js .reveal{opacity:0;transform:translateY(25px)}.js .reveal.visible{opacity:1;transform:none}
@media(max-width:1100px){.hero{gap:4%;min-height:550px}.hero-photo{min-height:470px}h1{font-size:57px}.hero-actions{gap:9px}.hero-actions .button{font-size:13px}.assurance{flex-wrap:wrap;gap:7px 15px}.quick-links{gap:16px}.quick-links>a{gap:12px;padding-right:15px}.quick-links h3{font-size:16px}.quick-icon{width:30px;height:30px}.product-grid{gap:14px}.product-photo{height:210px}.product-body{padding:18px}.product h3{font-size:21px}.product svg{width:22px}.product p{min-height:0}.cta-panel{padding:28px}}
@media(max-width:760px){  .call a{display:inline-flex;align-items:center;min-height:34px}.hero{padding:0 5% 25px;grid-template-columns:1fr;gap:0;min-height:0}.hero-copy{grid-column:1;grid-row:1;padding:35px 0}.hero-photo{grid-column:1;grid-row:2;height:360px;min-height:0}.hero .eyebrow{font-size:11px}h1{font-size:clamp(49px,10vw,68px);margin:22px 0}.hero-copy p{font-size:18px;max-width:490px;margin-bottom:25px}.hero-actions .button{font-size:14px;padding:15px 16px}.assurance{font-size:12px;margin-top:15px}.hero-photo img{object-position:27% center}.quick-links{grid-template-columns:1fr;padding:10px 5%;gap:0}.quick-links>a{border-right:0;border-bottom:1px solid var(--border);padding:18px 0;gap:18px}.quick-links h3{font-size:18px}.quick-icon{width:36px;height:36px}.section{padding:60px 5%}.section-top{margin-bottom:27px;align-items:flex-start}.section-top .muted{display:none}.insurance .section-top{flex-direction:column;gap:15px}.insurance-heading{display:block;margin-bottom:28px}.insurance-heading h2{font-size:38px}.insurance-heading p{margin-top:20px;font-size:16px}.product-grid{grid-template-columns:1fr 1fr;gap:14px}.product-photo{height:190px}.product-body{padding:17px 14px}.product-title{flex-wrap:nowrap;gap:8px;align-items:flex-start}.product-title h3{min-width:0}.product-title>span{flex:none;margin-left:auto;line-height:1.15}.product-title svg{display:none}.product h3{font-size:22px}.product p{font-size:14px;min-height:0}.process-layout{grid-template-columns:1fr;gap:40px}.sticky-copy h2{font-size:38px}.sticky-copy h2 br{display:none}.check-visual{max-width:none;margin-top:30px;padding:22px}.step{gap:20px;padding:26px 0}.step h3{font-size:24px}.step-note{margin-bottom:0}.life{height:440px}.life-copy{padding:100px 5%}.life h2{font-size:55px}.life .eyebrow{font-size:10px}.life-copy p{font-size:16px}.business{flex-direction:column;align-items:flex-start;gap:25px}
  /* align-self:center fra desktop centrerer feltet vandret, naar retningen
     er en soejle. Knappen skal staa i flugt med overskriften. */
  .business>div+div{text-align:left;align-self:flex-start}.business h2{font-size:35px}.cta{grid-template-columns:1fr;gap:32px}.cta h2{font-size:clamp(34px,8.5vw,44px)}.cta>div>p br{display:none}.cta-panel{padding:26px}.call{flex-direction:column;gap:8px}.faq{grid-template-columns:1fr;gap:35px}.faq h2{font-size:35px}}@media(max-width:380px){.product-grid{grid-template-columns:1fr}.product-photo{height:240px}.product p{min-height:0}.product-body{padding:23px}}
@media(prefers-reduced-motion:reduce){.hero-photo img,.life>img{transform:none!important}.js .reveal{opacity:1;transform:none}.track i{transform:scaleX(1)}.visual-row b{opacity:1}}
.hero{height:calc(100svh - 128px);min-height:520px;max-width:none;padding-top:24px;padding-bottom:24px}
.hero-copy{min-height:0;padding:20px 0}
.hero-photo{min-height:0;height:100%}
.hero-photo video{position:absolute;top:-6%;width:100%;height:112%;object-fit:cover;object-position:center;will-change:transform}
.video-toggle{position:absolute;right:18px;bottom:18px;z-index:2;background:#0f2019dd;color:#F1F2EE;border:1px solid #cbd0c780;border-radius:4px;padding:10px 15px;font-size:13px;cursor:pointer}
.video-toggle:hover{background:#0F2019}
@media(min-width:761px) and (max-height:750px){.hero{min-height:440px}.hero h1{font-size:clamp(44px,4.8vw,66px);margin:18px 0}.hero-copy p{font-size:17px;margin-bottom:20px}.hero .eyebrow{font-size:11px}}
@media(max-width:760px){.hero{height:calc(100svh - 110px);min-height:0;padding:0 5% 20px;grid-template-rows:auto minmax(100px,1fr)}.hero-copy{padding:25px 0}.hero h1{font-size:clamp(44px,9vw,62px);margin:17px 0}.hero-copy p{font-size:16px;margin-bottom:20px}.hero-actions .button{font-size:13px;padding:13px 14px}.hero-photo{height:100%;min-height:100px}.hero .assurance{margin-top:12px}.video-toggle{right:12px;bottom:12px;font-size:12px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.hero-photo video{transform:none!important}}

@media(max-width:760px) and (max-height:760px){.hero-copy{padding:18px 0}.hero h1{font-size:42px;margin:12px 0}.hero-copy p{font-size:15px;line-height:1.45;margin-bottom:15px}.hero-actions{gap:8px}.hero-actions .button{font-size:12px;padding:11px 12px}.hero .assurance{font-size:11px;gap:5px 12px}.hero .eyebrow{font-size:10px}}

/* Edge-to-edge film blended into the original paper background. */
.hero{isolation:isolate;overflow:hidden;background:var(--paper)}
.hero .hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;background:transparent;overflow:hidden}
.hero .hero-photo video{width:82%;height:112%;left:0;top:-6%;object-position:center}
.hero .hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(241,242,238,0) 15%,rgba(241,242,238,.12) 30%,rgba(241,242,238,.72) 44%,rgba(241,242,238,.97) 55%,#F1F2EE 67%)}
.hero .hero-copy{position:relative;z-index:2}
/* Cookieknappen sidder fast nederst til venstre i vinduet og fylder fra 20
   til 66 px over kanten. Naar heroens bund passerer vinduets bund, ville
   pauseknappen paa 24 px ligge lige under den. 84 px gaar fri. */
.hero .video-toggle{left:4%;right:auto;bottom:84px;z-index:3;background:#0f2019b8;backdrop-filter:blur(10px)}
.hero .video-toggle:hover{background:#0F2019}
@media(max-width:760px){
 .hero .hero-photo video{width:100%;height:112%;top:-6%;bottom:auto;object-position:center}
 /* Paa telefon ligger videofeltet i sin EGEN raekke under teksten. Der er
   altsaa ingen tekst oven paa videoen, og derfor skal den ikke toner ned
   for laesbarhedens skyld. Her stod foer en gradient, der var helt
   uigennemsigtig ned til 43 % og foerst slap videoen fri ved 94 %, mens
   videoen samtidig kun fyldte de nederste 75 % af feltet. Resultatet var,
   at kun omkring 18 % af feltet viste filmen klart, og resten stod blegt.
   Nu fylder videoen hele feltet, og der er kun en kort overgang i toppen,
   saa den ikke moeder teksten med en haard kant.
   Paa desktop gaar gradienten paa tvaers (90deg) og er der af en helt
   anden grund: dér ligger teksten OVEN PAA videoen. Roer den ikke. */
.hero .hero-photo::after{background:linear-gradient(180deg,#F1F2EE 0%,rgba(241,242,238,.82) 5%,rgba(241,242,238,.3) 12%,rgba(241,242,238,0) 20%)}
 /* Pauseknappen skal op over den faste pille i hjoernet. Pillen er fixed
   og ligger nederst til hoejre; knappen laa nederst til venstre og blev
   daekket, saa videoen ikke kunne saettes paa pause paa telefon.
   Maalt: pillen fylder fra 14 til 58 px over kanten, plus telefonens
   hjemindikator. 76 px plus samme sikkerhedszone gaar fri hver gang. */
.hero .video-toggle{left:5%;bottom:calc(76px + env(safe-area-inset-bottom, 0px))}}

/* Give the film more of the first viewport; align copy farther right. */
@media(min-width:761px){
 .hero{grid-template-columns:1.4fr 1fr;column-gap:4%;padding-left:0;padding-right:4%}
 .hero .hero-copy{grid-column:2}
 .hero .hero-photo{left:0;right:0;width:100%;border-radius:0}
 .hero .hero-photo video{left:0;width:88%}
 .hero .hero-photo::after{background:linear-gradient(90deg,rgba(241,242,238,0) 20%,rgba(241,242,238,.08) 35%,rgba(241,242,238,.68) 49%,rgba(241,242,238,.97) 60%,#F1F2EE 72%)}}

/* Film transitions follow native scroll; reduced motion remains static. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--paper);opacity:var(--hero-fade,0)}
.hero .hero-copy{will-change:transform}
.life-story{position:relative;background:var(--ink)}
.story-visual{position:sticky;top:90px;height:calc(100svh - 90px);overflow:hidden}
.story-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity 900ms ease,transform 1600ms ease}
.story-image.is-current{opacity:1;transform:scale(1)}
.story-image:last-of-type{object-position:center 45%}
.story-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0f2019c9,#0f201950 52%,#0f20191a)}
.story-chapters{position:relative;margin-top:calc(-100svh + 90px);pointer-events:none}
.story-chapter{min-height:80svh;padding:110px 7%;display:flex;flex-direction:column;justify-content:center;color:#F1F2EE}
.story-chapter:first-child{min-height:calc(100svh - 90px)}
.story-chapter:last-child{padding-bottom:150px}
.story-chapter>div{max-width:620px}
.story-chapter h2{font-size:clamp(60px,7.8vw,120px);margin:22px 0 25px;letter-spacing:-.045em}
.story-chapter .eyebrow{color:#DCE0DC}
.story-chapter p{font-size:22px;line-height:1.6}
.story-link{display:inline-block;font-size:16px;margin-top:30px;padding-bottom:8px;border-bottom:1px solid #F1F2EE;pointer-events:auto}
.story-progress{position:absolute;bottom:35px;right:5%;display:flex;gap:8px}

.story-progress .is-current{background:var(--paper);width:72px}
.story-mobile{display:none}
.cinematic .check-visual .track i{transform:scaleX(var(--review,0));transition:none}
.cinematic .visual-row b{display:inline-block;opacity:0;transform:scale(.65);transition:opacity .35s,transform .35s}
.cinematic .visual-row.reviewed b{opacity:1;transform:scale(1)}
.cinematic .visual-row{position:relative}
.cinematic .visual-row:not(:last-of-type)::after{content:"";position:absolute;width:1px;height:15px;right:5px;top:24px;background:#9bab99;transform:scaleY(var(--review,0));transform-origin:top}
.cinematic .cta{color:var(--ending-ink,#F1F2EE)}
.cinematic .cta>div:first-child>.eyebrow,.cinematic .cta>div:first-child>p{color:inherit}
.cinematic .cta-panel{color:#F1F2EE}
@media(max-width:760px),(prefers-reduced-motion:reduce){
 .hero::after{display:none}.hero .hero-copy{transform:none!important}
 .story-visual{display:none}.story-chapters{margin:0}
 .story-chapter,.story-chapter:first-child,.story-chapter:last-child{min-height:0;padding:0;position:relative;overflow:hidden}
 .story-mobile{display:block;width:100%;height:500px;object-fit:cover;filter:brightness(.55)}
 .story-chapter>div{position:absolute;left:6%;right:6%;bottom:55px;max-width:600px}
 .story-chapter h2{font-size:54px;margin:15px 0}.story-chapter p{font-size:18px}
 .story-link{font-size:14px;margin-top:22px}.story-chapter .eyebrow{font-size:11px}}

.cta-assurance{color:#b6cdb4;margin-top:26px;flex-wrap:wrap;gap:8px 18px}
.felt{display:block;margin-bottom:16px}
.felt>span{display:block;font-size:12.5px;color:#b6cdb4;margin-bottom:7px}
.felt input{width:100%;border:1px solid #6f8a74;border-radius:4px;background:#16281e;
  padding:13px 14px;font:400 15px/1.4 Bricolage,system-ui,sans-serif;color:#F1F2EE}
.felt input::placeholder{color:#7f9484}
.felt input:focus-visible{outline:2px solid #9CC7A8;outline-offset:1px;border-color:#9CC7A8}
.felt input[aria-invalid="true"]{border-color:#D08A8A}
.fejl{display:block;min-height:18px;font-style:normal;font-size:12.5px;color:#F2B8B8;margin-top:6px}
.felt-gruppe{margin-bottom:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 22px}
.chip{font:400 13px/1 Bricolage,system-ui,sans-serif;border:1px solid #6f8a74;border-radius:999px;
  padding:9px 14px;color:#ccd5ca;background:transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:#9CC7A8}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.kvittering{background:#1f3d2b;border:1px solid #4e7a5e;border-radius:6px;padding:22px;
  font-size:15px;color:#DCEBDF;line-height:1.55}
.kvittering b{display:block;font-size:18px;color:#F1F2EE;margin-bottom:7px;letter-spacing:-.02em}
/* Linjelaengden holdes paa 32 tegn, saa teksten ikke loeber i hele spaltens
   bredde og braekker paa et tilfaeldigt ord. */
.blurb{max-width:32ch;text-wrap:pretty}
/* ═══ Forsikringstjekket — ét pinnet kapitel ══════════════════════════
   Moenster: Pinned Hero. Banen er 300vh hoej; scenen klaeber fast i
   toppen og bliver staaende, mens tre titelkort afloeser hinanden.
   Alt i scroll-sporet er transform + opacity. */
.tjekkapitel{
  --nav:90px;
  --tjek-kant:#c8d0c4;
  --tjek-flade:#e2e6dd;
  --tjek-ro:cubic-bezier(.22,.61,.36,1);   /* afsloeringer: blødt ud */
  --tjek-klip:cubic-bezier(.4,0,.2,1);     /* klip mellem billeder: jaevnt */
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.tjek-bane{height:300vh;position:relative}
.tjek-scene{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));
  /* Teksten staar helt ude til venstre i sin egen faste spalte. Billedet
     faar resten og bliver centreret i den — saa der er lige meget luft
     paa begge sider af det, uanset hvor bred skaermen er. */
  /* Maalene er taget direkte fra oplaegget: teksten begynder 6,8 % inde,
     billedet loeber fra 41,8 % til 84,3 %, og der er 15,7 % margin i
     hoejre side. Mellemrummet er 8,4 %. */
  /* Maalene er taget fra oplaegget: teksten begynder 6,8 % inde, billedet
     loeber helt ud til 4,9 % fra hoejre kant, og der er ca. 120 px imellem.
     Procenterne i gridet regner fra indholdsboksen, ikke fra skaermen. */
  display:grid;grid-template-columns:minmax(0,30.1%) 1fr;align-items:center;
  gap:9.4%;padding:0 4.9% 0 6.8%;overflow:hidden}

/* Dybde 0.15 · lyset bagest: et blødt skaer, der aander med kapitlet. */
.tjek-lys{position:absolute;z-index:0;left:-10%;top:50%;width:70%;aspect-ratio:1;
  transform:translate3d(0,-50%,0) scale(var(--lys-s,1));pointer-events:none;
  background:radial-gradient(circle,rgba(46,106,78,.13),transparent 68%);
  opacity:var(--lys-o,.5);transition:opacity .5s}

/* ── venstre: teksten, paa papir hvor den er lettest at laese ──────── */
.tjek-tekst{position:relative;z-index:2;justify-self:start;width:100%;max-width:520px}
.tjek-tekst .eyebrow{display:block;margin-bottom:26px}
/* Titelkortene ligger oven paa hinanden i samme plads og skifter — som
   titelkort i en film, ikke som en liste der vokser. */
.tjek-kort{display:grid;min-height:clamp(260px,32svh,320px);align-content:start}
.tjek-slag{grid-area:1/1;opacity:0;visibility:hidden;
  transform:translate3d(0,14px,0);
  transition:opacity .5s,transform .7s var(--tjek-ro),visibility .5s}
.tjek-slag.er-aktiv{opacity:1;visibility:visible;transform:none}
.tjek-slag h2{font-size:clamp(32px,3vw,43px);line-height:1.06;letter-spacing:-.04em;
  margin-bottom:20px}
/* Linjerne stiger op bag en maske — én ad gangen. */
.tjek-slag h2 span{display:block;overflow:hidden}
.tjek-slag h2 span>i{display:block;font-style:normal;
  transform:translate3d(0,110%,0);transition:transform .8s var(--tjek-ro)}
.tjek-slag.er-aktiv h2 span>i{transform:none}
.tjek-slag.er-aktiv h2 span:nth-child(2)>i{transition-delay:.08s}
.tjek-slag p{color:var(--muted);font-size:18px;line-height:1.6;max-width:44ch;
  text-wrap:balance;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .5s .18s,transform .6s .18s var(--tjek-ro)}
.tjek-slag.er-aktiv p{opacity:1;transform:none}

.tjek-handling{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
/* Knappen staar fast hele vejen — den skal aldrig vaere vaek, naar nogen
   beslutter sig. Den loefter sig kun en anelse, naar sidste kort falder. */
.tjek-knap{transform:translate3d(0,0,0) scale(var(--knap-s,1));
  box-shadow:0 var(--knap-y,6px) var(--knap-b,18px) rgba(15,32,25,var(--knap-a,.10));
  transition:transform .5s var(--tjek-ro),box-shadow .5s,background .2s,border-color .2s}
.tjek-smaat{font-size:13px;color:var(--muted)}
.tjek-tid{display:none;font-size:14px;color:var(--ink);font-weight:650}
.tjek-prikker{list-style:none;display:flex;gap:8px;margin:34px 0 0;padding:0}
.tjek-prikker li{width:34px;height:3px;border-radius:2px;background:var(--tjek-kant);
  transform-origin:left;transition:background .45s,transform .45s var(--tjek-ro)}
.tjek-prikker li.er-aktiv{background:var(--green);transform:scaleY(1.9)}

/* ── hoejre: den store flade ───────────────────────────────────────── */
.tjek-flade{position:relative;z-index:1;justify-self:stretch;width:100%;
  /* Liggende, som paa oplaegget: 1,355 : 1. Hoejden foelger bredden,
     saa forholdet holder paa alle skaermbredder. */
  aspect-ratio:1.70;height:auto;max-height:calc(100svh - var(--nav) - 90px);
  /* Perspektivet sidder her, ikke paa scenen: saa er billedet i 3D-rummet,
     mens maerkatet bliver et fladt lag ovenpaa og aldrig skaeres af
     det vippede billedplan. */
  perspective:1400px}
/* Dybde 0.30 · rammen vipper et par grader gennem kapitlet — en langsom kran. */
.tjek-billede{position:relative;height:100%;overflow:hidden;border-radius:9px;
  background:var(--tjek-flade)}
/* Dybde 0.50 · selve billedet skubber langsomt ind — en dolly, ikke et zoom. */
/* Klippet mellem billederne: det gaaende toner ud, mens det kommende
   allerede er i bevaegelse — en overtoning, ikke et hop. */
/* Billederne staar helt stille. De skubber ikke ind og glider ikke —
   de toner blødt ind og ud, naar man ruller op og ned. Det er den
   eneste bevaegelse, de har. */
.tjek-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;
  transition:opacity 1.05s var(--tjek-klip)}
.tjek-foto.er-aktiv{opacity:1}
/* Lagene loeftes kun, mens kapitlet er i billedet — tre permanente
   GPU-lag er en pris, der ikke skal betales resten af siden. */
.tjek-billede.i-spil .tjek-foto{will-change:opacity}
/* Dybde 0.75 · varmen: kapitlet gaar fra koeligt tvivl til varmt overblik. */
.tjek-varme{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,214,150,.30),rgba(255,255,255,0) 58%);
  opacity:var(--varme,0);transition:opacity .6s}
/* Dybde 1.20 · maerkatet forrest: den ene oplysning der siger "det er nemt". */
.tjek-maerkat{position:absolute;z-index:3;left:-28px;bottom:42px;margin:0;
  background:var(--paper);border:1px solid var(--tjek-kant);border-radius:6px;
  padding:14px 18px;box-shadow:0 12px 30px rgba(15,32,25,.13);
  transform:translate3d(var(--maerkat-x,0px),0,0)}
.tjek-maerkat b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.tjek-maerkat span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

.tjek-mobilfoto,.tjek-mobilramme{display:none}

@media(max-width:1180px){
  .tjek-scene{grid-template-columns:minmax(0,34%) 1fr;gap:7%;padding:0 4.5% 0 6%}
  .tjek-slag h2{font-size:clamp(30px,3.4vw,42px)}}
@media(max-width:900px){
  .tjek-tid{display:block}
  /* Ingen fastlaasning her: scenen foldes ud, billedet kommer foerst,
     og de tre kort bliver til tre korte afsnit man ruller igennem. */
  .tjekkapitel{padding:62px 5%}
  .tjek-bane{height:auto}
  /* Billedet foerst: det er det, der stopper tommelfingeren. Teksten
     foelger efter, og knappen staar til sidst, hvor beslutningen tages. */
  .tjek-scene{position:static;height:auto;display:flex;flex-direction:column;
    padding:0;overflow:visible;perspective:none;align-items:flex-start}
  /* Hvert kort baerer sit eget billede, naar scenen er foldet ud —
     saa forsvinder klippet ikke, bare fordi der ikke bliver pinnet. */
  .tjek-flade{display:none}
  .tjek-mobilfoto{display:block;width:100%;height:clamp(210px,32svh,300px);
    object-fit:cover;border-radius:8px}
  .tjek-mobilramme{display:block;width:100%;border-radius:8px;
    overflow:hidden;margin-bottom:24px}
  .tjek-lys{display:none}
  .tjek-tekst{max-width:none;justify-self:auto}
  .tjek-kort{display:block;min-height:0}
  .tjek-slag{opacity:1;visibility:visible;transform:none;
    padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--tjek-kant)}
  .tjek-slag:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .tjek-slag h2{font-size:clamp(30px,7vw,40px);margin-bottom:16px}
  .tjek-slag h2 span>i{transform:translate3d(0,110%,0)}
  .tjek-slag.er-vist h2 span>i{transform:none}
  .tjek-slag p{opacity:0;transform:translate3d(0,10px,0)}
  .tjek-slag.er-vist p{opacity:1;transform:none}
  .tjek-handling{margin-top:34px}
  .tjek-prikker{display:none}}

/* Stilstand: intet flytter sig, alt kan laeses. */
@media(prefers-reduced-motion:reduce){
  .tjek-tid{display:block}
  .tjekkapitel{padding:62px 5%}
  .tjek-bane{height:auto}
  /* Scenen foldes ud. overflow skal med: ellers klipper den maerkatet,
     der stikker ud over billedets kant. */
  .tjek-scene{position:static;height:auto;display:flex;flex-direction:column;
    padding:0;overflow:visible;perspective:none;align-items:flex-start}
  /* Ogsaa i stilstand faar hvert kort sit eget billede — de tre billeder
     er en del af budskabet, ikke en effekt. */
  .tjek-flade{display:none}
  .tjek-mobilfoto{display:block;width:100%;
    height:clamp(240px,38svh,360px);object-fit:cover;border-radius:8px}
  .tjek-mobilramme{display:block;width:100%;max-width:620px;
    border-radius:8px;overflow:hidden;margin-bottom:26px}
  .tjek-lys,.tjek-prikker{display:none}
  .tjek-tekst{max-width:none}
  .tjek-knap,.tjek-mobilfoto{transform:none!important;transition:none!important}
  .tjek-kort{display:block;min-height:0}
  .tjek-slag{opacity:1!important;visibility:visible!important;transform:none!important;
    transition:none!important;padding-bottom:26px;margin-bottom:26px;
    border-bottom:1px solid var(--tjek-kant)}
  .tjek-slag:last-child{border-bottom:0}
  .tjek-slag h2 span>i,.tjek-slag p{transform:none!important;opacity:1!important;
    transition:none!important}}

/* Stilstand paa en smal skaerm: fladen maa gerne fylde bredden ud. */
@media(prefers-reduced-motion:reduce) and (max-width:900px){
  .tjek-flade{max-width:none;height:clamp(260px,42svh,360px)}}


/* ══════════════════════════════════════════════════════════════════════
   BRANDLAGET
   Et lag Hjemstad-grønt hen over hvert foto. blend mode color tager
   kulør og mætning fra laget og lysheden fra billedet, så fotoet bindes
   til brandet uden at blive grønt. Styrken står ét sted: --brandlag.

   isolation:isolate lukker blandingen inde i rammen. Uden den ville
   laget blande sig med hele siden bagved og farve papiret.
   ══════════════════════════════════════════════════════════════════════ */
:root{--brand-groen:#51AE3C; --brandlag:.06}

.hero-photo,.product-photo,.tjek-billede,.tjek-mobilramme{isolation:isolate}
.product-photo,.tjek-mobilramme{position:relative}

/* mobilrammen arver fotoets egen kasse, så laget flugter med billedet */
.tjek-mobilramme{display:block}
.tjek-mobilramme::before,
.hero-photo::before,
.product-photo::before,
.tjek-billede::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand-groen);mix-blend-mode:color;opacity:var(--brandlag)}

/* hero'ens ::after er den gradient, teksten står på. Den ligger af sig
   selv oven på brandlaget: ved samme z-index males ::before før ::after. */

@media(prefers-reduced-transparency:reduce){
  .hero-photo::before,.product-photo::before,
  .tjek-billede::before,.tjek-mobilramme::before{opacity:0}}

/* Svarlinjen under sendeknappen. Den bruges kun, naar noget gaar galt:
   lykkes afsendelsen, bliver hele formularen til en kvittering. */
.tjek-kvit{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--paper) }
.tjek-kvit[hidden]{ display:none }
.tjek-kvit.er-fejl{ color:#FFC7B4 }