/* FAKTIVE Cybersecurity-siden 2026 (engine.html).
   Bygges af .arbejde/undersider/byg-engine.py; bygger oven på assets/regelsaet-2026.css (farver, skrift, toppen med
   foto, overlinjer) og hører sammen med assets/engine-2026.js.

   Signatur: DYBDEFORSVAR. Engines fem dele står som fem lag mellem angrebet og jeres data (mailen yderst, backuppen
   inderst), og kameraet kører gennem dem. I situationerne løber hver hændelse hen ad angrebsvejen og stoppes, hvor
   Engine griber ind; platformen for enden måler det.

   Fladerne skifter, så to naboer aldrig har samme baggrund:
     toppen (creme) · de fem lag (aubergine) · situationerne (lys) · målt, ikke gættet (creme) · kontakt (aubergine)
   Uden JS og ved reduceret bevægelse står alt færdigt. Under scroll ændres kun transform og opacity. */

/* ---------- toppen ---------- */
.eg-top .rg-sti{color:var(--rg-kobber-tekst) !important}
/* titlen står på fire linjer, to pr. sætning ("Sikkerheden / beskytter. / Platformen / beviser det."), så den bliver i
   venstre spalte som på de andre undersider og aldrig løber ind i fotoet */
section.hero.eg-top h1{white-space:normal;font-size:clamp(42px,5.6vw,92px) !important;line-height:.98 !important}
.eg-h1-l{display:block}
/* på telefonen står fotoet i fuld bredde under teksten; der bruges et tæt udsnit om teknikeren (-m.jpg) */
.eg-foto picture{display:contents}
@media (max-width:760px){ .eg-foto .rg-foto-lag{--rg-fokus:50% 45%} }
.eg-knapper{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 30px;margin-top:32px}
.eg-knapper .rg-mere{margin:0}
.eg-alle{font-size:16px;color:var(--rg-aub);text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(60,42,68,.3);transition:border-color .3s ease}
@media (hover:hover){ .eg-alle:hover{border-bottom-color:var(--rg-kobber)} }
.eg-alle:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:3px}
/* troværdighedslinjen: tre fakta adskilt af husets kobberprik */
.eg-tillid{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--rg-streg);
  font-size:13.5px;line-height:1.5;color:var(--rg-tekst)}
.eg-tillid li{display:flex;align-items:center}
.eg-tillid li+li::before{content:"";width:4px;height:4px;margin:0 12px;border-radius:50%;background:var(--rg-kobber)}
/* smalle skærme: de tre fakta under hinanden (ellers står en prik forrest på en ny linje) */
@media (max-width:600px){ .eg-tillid{flex-direction:column;gap:4px} .eg-tillid li+li::before{display:none} }
.rg-js .eg-knapper,.rg-js .eg-tillid{opacity:0;transform:translateY(16px);transition:opacity .9s ease .45s,transform 1.1s var(--rg-ud) .45s}
.rg-js .eg-tillid{transition-delay:.6s}
.rg-klar .eg-knapper,.rg-klar .eg-tillid{opacity:1;transform:none}

.rg-sek .lede{margin:20px 0 0;max-width:40em;font-size:clamp(18px,1.4vw,20px);line-height:1.6;font-weight:300;color:var(--rg-tekst);text-wrap:pretty}
/* sitets inline-regel giver alle h3 vægt 600 i smal skrift (!important); sidens h3 står i husets brede skrift */
.eg-side main h3{font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:400 !important;line-height:1.16 !important}

/* =====================================================================================================
   2. FEM LAG MELLEM ANGREBET OG JERES DATA ("Fem dele. Én motor. Ét nummer.") på mørk aubergine
   Dybdeforsvar: Engines fem dele står som fem lag uden om jeres data, fra mailen yderst til backuppen inderst.
   Grundform (mobil, uden JS, reduceret bevægelse): lagene står som liste under hinanden; hvert lag har en lille
   tegning af de fem rammer, hvor netop dets ramme er fremhævet.
   Store skærme (fra 1101 px med WebGL, engine-2026.js sætter .eg-lag-koerer): scenen står fast, og kameraet glider
   gennem fem fræsede portaler ind til jeres data i et 3D-rum bag teksten (assets/engine-lag-3d.js, Three.js).
   Til venstre står det aktive lag stort og læsbart i almindelig tekst. Plan: .arbejde/undersider/engine-lag/.
   ===================================================================================================== */
.eg-dele{background:var(--rg-aub);color:#F2E7DC;overflow-x:clip}
.eg-dele .eyeline{color:#E9A57F !important}
.eg-dele .rg-hoved h2.big{color:#FFFDFB !important}
.eg-dele .eg-hoved h2 span{display:block}
.eg-dele .lede{color:#D7B7A3}
.eg-lagliste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,231,220,.3)}
/* listen (mobil, uden WebGL, reduceret bevægelse): hvert lag med sit foto, der svæver på en dyb, blød skygge i tre
   lag (tæt kontakt, mellem og bred), samme lys oppe fra venstre som i 3D-rummet */
.eg-lag{display:grid;grid-template-columns:minmax(0,1fr);padding:34px 0;border-bottom:1px solid rgba(242,231,220,.12)}
.eg-lag-foto{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:12px;margin:0 0 24px;background:#2E2036;
  /* tykt kort: kanten i krom-kobber (lys øverst, mørkere nederst) under og til højre, som i 3D-rummet, og skyggerne bag */
  box-shadow:1.5px 2px 0 #F08A5A,3px 4px 0 #C9531F,4.5px 6px 0 #9E3E17,8px 12px 14px rgba(10,4,16,.5),14px 26px 40px -6px rgba(10,4,16,.6),26px 50px 80px -18px rgba(10,4,16,.55)}
@media (min-width:700px){
  .eg-lag{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);column-gap:clamp(28px,4vw,56px);align-items:center}
  .eg-lag-foto{grid-row:1 / span 3;margin:0}
  .eg-lag > :not(img){grid-column:2}
}
/* "Lag 1 af 5 · Mailen": hvor langt inde man er, og hvor angrebet møder laget */
.eg-lag-nr{margin:0 0 10px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#D7B7A3}
.eg-lag-nr span{color:#E9A57F}
.eg-lag-nr span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 10px 0 6px;border-radius:50%;background:var(--rg-kobber);vertical-align:middle;transform:translateY(-1px)}
.eg-lag h3{margin:0 0 10px;font-size:clamp(22px,2vw,28px) !important;color:#FFFDFB;text-wrap:balance}
.eg-tekst{margin:0;max-width:34em;font-size:16.5px;line-height:1.62;font-weight:300;color:#EADDD2;text-wrap:pretty}
.eg-lag-fremdrift,.eg-3d{display:none}
.eg-videre{display:inline-flex;align-items:baseline;gap:12px;margin-top:36px;font-family:var(--font-display);font-stretch:125%;font-size:17px;
  color:#FFFDFB;text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(242,231,220,.3);transition:border-color .3s ease}
.eg-videre span{font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#E9A57F}
.eg-videre::after{content:"→";color:#E9A57F}
.eg-videre:focus-visible{outline:2px solid #E9A57F;outline-offset:4px;border-radius:3px}
@media (hover:hover){ .eg-videre:hover{border-bottom-color:#E9A57F} }
/* DYNAMISK BAGGRUND (hele sektionen): tre store, bløde felter i sektionens egne toner (lysere og mørkere aubergine og
   et svagt varmt skær), der driver langsomt forbi hinanden (38/52/64 s), som prisernes lys-persienner. Kun transform;
   står stille ved reduceret bevægelse. I 3D-scenen ligger de bag lærredet (det er gennemsigtigt) */
.eg-lag-scene{position:relative;overflow:hidden}
.eg-lag-in{position:relative;z-index:1}
.eg-felter{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.eg-felter i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
.eg-felter i:nth-child(1){left:35%;top:-35%;background:radial-gradient(closest-side,rgba(98,72,112,.6),rgba(98,72,112,0));animation:eg-drift1 38s ease-in-out infinite alternate}
.eg-felter i:nth-child(2){left:-25%;top:35%;background:radial-gradient(closest-side,rgba(26,15,32,.7),rgba(26,15,32,0));animation:eg-drift2 52s ease-in-out infinite alternate}
.eg-felter i:nth-child(3){left:45%;top:40%;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(228,87,36,.09),rgba(228,87,36,0));animation:eg-drift3 64s ease-in-out infinite alternate}
@keyframes eg-drift1{to{transform:translate3d(-20vmax,24vmax,0) scale(1.15)}}
@keyframes eg-drift2{to{transform:translate3d(26vmax,-18vmax,0) scale(.9)}}
@keyframes eg-drift3{to{transform:translate3d(-28vmax,-14vmax,0) scale(1.2)}}
@media (prefers-reduced-motion:reduce){ .eg-felter i{animation:none} }
/* smalle skærme med bevægelse: hvert lag toner frem, når det når skærmen (engine-2026.js sætter .eg-lag-klar/.eg-vist) */
.eg-lag-klar:not(.eg-lag-koerer) .eg-lag{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s var(--rg-ud)}
.eg-lag-klar:not(.eg-lag-koerer) .eg-lag.eg-vist{opacity:1;transform:none}

/* ---------- store skærme: den fastlåste scene i 3D-rummet ---------- */
/* scenen centrerer selv sit indhold i skærmhøjden, så sektionens egen luft foroven og forneden ville komme oveni */
.rg-sek.eg-dele-scene{padding-top:0;padding-bottom:0}
/* ca. 320 vh scroll: etablerende skud, fem lag, afsløring af jeres data og ro (inden for skill'ens 150-400 vh) */
.eg-lag-koerer{height:calc(100vh - var(--nav-h) + var(--n) * 64vh)}
.eg-lag-koerer .eg-lag-scene{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden}
/* 3D-rummet fylder hele scenen bag teksten; lærredet toner ind, når første billede er tegnet (.eg-3d-klar) */
.eg-lag-koerer .eg-3d{display:block;position:absolute;inset:0;z-index:0}
.eg-3d-laerred{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--rg-ud)}
.eg-3d-klar .eg-3d-laerred{opacity:1}
/* JERES DATA til sidst (signaturmomentet). Når det sidste foto er tonet ud, tegnes fem indlejrede konturer i
   fotoenes form om kernen, udefra og ind: de fem lag, man lige er kørt igennem, slutter sig om jeres data. De bliver
   tydeligere, jo tættere de er på dataene, og den inderste er kobber. Kernen popper ind i 3D (engine-lag-3d.js), og så
   kommer "Jeres data" og linket under. HTML/SVG, så det står skarpt på retina; det hele følger kernens plads på
   skærmen (--kx/--ky sættes af 3D-modulet, --rw er konturernes bredde). Scroller man op, trækkes det hurtigt tilbage */
.eg-lag-koerer .eg-lag-scene{--rw:clamp(220px,36vh,340px)}
.eg-data{position:absolute;left:0;top:0;transform:translate3d(var(--kx,-999px),var(--ky,-999px),0)}
.eg-data-ringe{position:absolute;left:calc(var(--rw) / -2);top:calc(var(--rw) * -.5435);width:var(--rw);height:calc(var(--rw) * 1.087);overflow:visible}
/* mønsteret er 2 % længere end stregen, så konturen lukker helt (ellers et hårfint hul midt foroven) */
.eg-data-ringe path{fill:none;stroke:#F2E7DC;stroke-width:.42;stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;opacity:0;transition:stroke-dashoffset .45s ease,opacity .3s ease}
.eg-data-ringe path[data-i="0"]{stroke-opacity:.22}
.eg-data-ringe path[data-i="1"]{stroke-opacity:.34}
.eg-data-ringe path[data-i="2"]{stroke-opacity:.48}
.eg-data-ringe path[data-i="3"]{stroke-opacity:.66}
.eg-data-ringe path[data-i="4"]{stroke:var(--rg-kobber);stroke-width:.62}
.eg-fuld .eg-data-ringe path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1),opacity .2s ease}
.eg-fuld .eg-data-ringe path[data-i="1"]{transition-delay:.13s}
.eg-fuld .eg-data-ringe path[data-i="2"]{transition-delay:.26s}
.eg-fuld .eg-data-ringe path[data-i="3"]{transition-delay:.39s}
.eg-fuld .eg-data-ringe path[data-i="4"]{transition-delay:.52s}
/* målingen: når kernen har landet, slår den ét pulsslag (3D), og en kobberbølge løber fra den ud gennem de fem
   konturer; hver kontur lyser kort op i kobber, idet bølgen passerer (indefra og ud), før "Målt, ikke gættet" kommer */
.eg-data-ringe .eg-data-boelge{fill:none;stroke:var(--rg-kobber);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:none;opacity:0;transform-box:fill-box;transform-origin:center}
.eg-fuld .eg-data-ringe .eg-data-boelge{opacity:0;animation:eg-boelge 1.4s cubic-bezier(.22,.8,.3,1) 2.05s forwards}
@keyframes eg-boelge{0%{opacity:.95;transform:scale(1)}70%{opacity:.35}100%{opacity:0;transform:scale(4.3)}}
.eg-fuld .eg-data-ringe path[data-i]{animation:eg-lys .9s ease-out}
.eg-fuld .eg-data-ringe path[data-i="4"]{animation-delay:2.08s}
.eg-fuld .eg-data-ringe path[data-i="3"]{animation-delay:2.18s}
.eg-fuld .eg-data-ringe path[data-i="2"]{animation-delay:2.3s}
.eg-fuld .eg-data-ringe path[data-i="1"]{animation-delay:2.44s}
.eg-fuld .eg-data-ringe path[data-i="0"]{animation-delay:2.6s}
@keyframes eg-lys{0%{stroke:#F08A5A;stroke-opacity:1;stroke-width:.85}}
@media (prefers-reduced-motion:reduce){ .eg-data-ringe .eg-data-boelge,.eg-fuld .eg-data-ringe path[data-i]{animation:none} }
.eg-3d-data{position:absolute;left:0;top:calc(var(--rw) * .5435 + 22px);transform:translateX(-50%);white-space:nowrap;font-family:var(--font-display);
  font-stretch:125%;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#FFFDFB;opacity:0;translate:0 8px;transition:opacity .3s ease,translate .3s ease}
.eg-fuld .eg-3d-data{opacity:1;translate:0 0;transition:opacity .8s ease 1.5s,translate 1s var(--rg-ud) 1.5s}
/* en blød mørk overgang bag teksten, så rummet aldrig konkurrerer med den; den slutter, før kortene begynder
   (ellers lægger den et mørkt bånd over kortets venstre kant) */
.eg-lag-koerer .eg-lag-scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(60,42,68,.95) 0%,rgba(60,42,68,.85) 30%,rgba(60,42,68,.4) 40%,rgba(60,42,68,0) 46.5%)}
/* venstre: titlen (scenens hoved, bliver stående) og under den det aktive lag, samlet og centreret i højden;
   højre spalte er tom, så rummet ses */
.eg-lag-koerer .eg-lag-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
  column-gap:clamp(40px,5vw,88px);height:100%;padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(28px,6vh,72px)}
.eg-lag-koerer .eg-lag-krop{display:contents}
.eg-lag-koerer .eg-hoved{grid-column:1;grid-row:2;max-width:none;margin:0}
.eg-lag-koerer .eg-hoved h2.big{margin:0;font-size:clamp(36px,min(3.7vw,6.4vh),60px) !important;line-height:1.04 !important}
.eg-lag-koerer .eg-hoved .lede{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(16px,min(1.25vw,2.2vh),19px);max-width:30em}
.eg-lag-koerer .eg-lag-tekst{grid-column:1;grid-row:3;margin-top:clamp(28px,6vh,64px);padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(242,231,220,.3)}
/* lagene ligger oven i hinanden i samme gittercelle (listen bliver så høj som det længste, så intet hopper);
   kun det aktive ses. De andre skjules kun visuelt, så skærmlæsere stadig finder alle fem */
.eg-lag-koerer .eg-lagliste{display:grid;border:0}
.eg-lag-koerer .eg-lag{grid-area:1 / 1;display:block;padding:0;border:0;pointer-events:none}
.eg-lag-koerer .eg-lag.eg-aktiv{pointer-events:auto}
.eg-lag-koerer .eg-lag-foto{display:none}
.eg-lag-koerer .eg-lag h3{margin-bottom:10px;padding-bottom:.12em;font-size:clamp(24px,min(2.2vw,4vh),34px) !important}
.eg-lag-koerer .eg-tekst{font-size:clamp(15.5px,min(1.2vw,2.1vh),17.5px)}
/* lagskift: det gamle lag toner hurtigt ud (.25 s); det nye kommer ind i tre slag: overlinjen, så titlen, der
   stiger op bag en maske (split line rise), og til sidst brødteksten */
.eg-lag-koerer .eg-lag > *{opacity:0;transition:opacity .25s ease,transform 0s linear .3s,clip-path 0s linear .3s}
.eg-lag-koerer .eg-lag .eg-lag-nr{transform:translateY(8px)}
.eg-lag-koerer .eg-lag h3{clip-path:inset(0 0 100% 0);transform:translateY(.45em)}
.eg-lag-koerer .eg-lag .eg-tekst{transform:translateY(10px)}
.eg-lag-koerer .eg-lag.eg-aktiv > *{opacity:1;transform:none;transition:opacity .7s ease .15s,transform 1s var(--rg-ud) .15s}
.eg-lag-koerer .eg-lag.eg-aktiv h3{clip-path:inset(0);transition:opacity .2s ease .25s,transform 1.05s var(--rg-ud) .25s,clip-path 1.05s var(--rg-ud) .25s}
.eg-lag-koerer .eg-lag.eg-aktiv .eg-tekst{transition-delay:.42s}
/* fem korte streger: hvor langt kameraet er nået; hver fyldes i takt med kameraet (JS sætter --f fra 0 til 1) */
.eg-lag-koerer .eg-lag-fremdrift{display:flex;gap:8px;margin-top:clamp(20px,3.4vh,34px)}
.eg-lag-fremdrift i{position:relative;overflow:hidden;width:26px;height:2px;border-radius:1px;background:rgba(242,231,220,.2)}
.eg-lag-fremdrift i::after{content:"";position:absolute;inset:0;background:var(--rg-kobber);transform-origin:left center;transform:scaleX(var(--f,0))}
/* linket til målingerne står under jeres data (brugeren 2026-09-30); --offx/--offy er tekstspaltens forskydning i
   scenen (sat af engine-2026.js). I listen (mobil, uden 3D) står det nederst som før */
.eg-lag-koerer .eg-videre{position:absolute;left:0;top:0;margin:0;white-space:nowrap;
  transform:translate3d(calc(var(--kx,-999px) - var(--offx,0px)),calc(var(--ky,-999px) - var(--offy,0px) + var(--rw) * .5435 + 60px),0) translateX(-50%);
  opacity:0;translate:0 8px;pointer-events:none;transition:opacity .3s ease,translate .3s ease}
.eg-lag-koerer.eg-fuld .eg-videre{opacity:1;translate:0 0;pointer-events:auto;transition:opacity .8s ease 2.7s,translate 1s var(--rg-ud) 2.7s}
.eg-lag-koerer .eg-videre:focus-visible{opacity:1;translate:0 0;pointer-events:auto}


/* =====================================================================================================
   3. SITUATIONERNE ("Fem situationer, og hvad Engine gør.") på lys flade (sektionen før er mørk)
   "Det gør I" bærer sektionen. Grundform (mobil, uden JS, reduceret bevægelse): situationerne under hinanden, hver
   med sit svar, stoppet og hvad Engine gør. Fra 1101 px (engine-2026.js sætter .eg-sit-sticky): situationerne
   scroller i venstre side, den aktive i fuld styrke, og svaret står stort og fast i højre side og skifter ord for
   ord med situationen (sticky narrative). Starter det nye svar som det forrige ("Ingenting."), bliver første
   sætning stående, og kun resten skifter (match cut). Plan: .arbejde/undersider/engine-sit/motion-plan.md
   ===================================================================================================== */
.eg-sit{--s-aub:var(--rg-aub);--s-tekst:var(--rg-tekst);--s-blaek:var(--rg-blaek);--s-kob:var(--rg-kobber-tekst);--s-linje:var(--rg-aub);--s-streg:var(--rg-streg);
  background:var(--rg-lys);color:var(--s-blaek)}
/* sand (2), skumring (3) og kobber (4): kobberteksten en tak mørkere, så de små versaler holder AA (4,5:1); farverne
   glider med stemningen (.9 s) */
.eg-sit[data-stemning="1"],.eg-sit[data-stemning="2"],.eg-sit[data-stemning="3"]{--s-kob:#9A3510}
.eg-sit .eyeline{color:var(--s-kob) !important}
.eg-sit .rg-hoved h2.big{color:var(--s-aub) !important}
.eg-sit .lede{color:var(--s-tekst)}
.eg-sit .rg-ref{color:var(--s-kob)}
/* hvornår det sker: dag og klokkeslæt som en sceneangivelse ("TIRSDAG · KL. 9.14"), dagen i kobber, klokkeslættet
   roligere, adskilt af husets kobberprik. Proportionale tal (Mona Sans' tabeltal har nul med skråstreg) */
.eg-tid{display:flex;align-items:center;flex-wrap:wrap;font-variant-numeric:proportional-nums}
.eg-tid span{display:inline-flex;align-items:center;color:var(--s-tekst);transition:color .9s cubic-bezier(.45,0,.2,1)}
.eg-tid span::before{content:"";width:4px;height:4px;margin:0 11px;border-radius:50%;background:var(--rg-kobber)}
.eg-sit .eyeline,.eg-sit .rg-hoved h2.big,.eg-sit .lede,.eg-sit .rg-ref,.eg-situation h3,.eg-sit-sker,.eg-i h4,.eg-i p,.eg-engine h4,.eg-stop,.eg-e,.eg-svar-h,.eg-svar-t,.eg-s2{transition:color .9s cubic-bezier(.45,0,.2,1)}
.eg-sit .rg-hoved h2{text-wrap:balance}
.eg-sit-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-linje);transition:border-color .9s cubic-bezier(.45,0,.2,1)}
.eg-situation{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--s-streg);scroll-margin-top:var(--nav-h)}
.eg-situation h3{margin:10px 0 12px;max-width:20em;font-size:clamp(23px,2.2vw,31px) !important;color:var(--s-aub);text-wrap:balance}
.eg-sit-sker{margin:0;font-size:17px;line-height:1.6;font-weight:300;color:var(--s-tekst);text-wrap:pretty}
.eg-i{margin-top:28px}
.eg-i h4,.eg-engine h4{margin:0 0 10px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-tekst)}
.eg-i p{margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:var(--s-aub);text-wrap:balance}
.eg-engine{margin-top:30px}
.eg-engine h4{color:var(--s-kob)}
/* stoppet: hvor Engine tager hændelsen (lagene fra sektion 2), med husets kobberstreg foran */
.eg-stop{position:relative;margin:0 0 10px;padding-left:24px;font-family:var(--font-display);font-stretch:125%;font-size:17px;line-height:1.35;color:var(--s-aub)}
.eg-stop::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--rg-kobber);transform-origin:left center}
.eg-e{margin:0;max-width:34em;font-size:16px;line-height:1.65;font-weight:300;color:var(--s-blaek);text-wrap:pretty}
.eg-svar-kol{display:none}
/* STEMNINGER (MorphBackground fra cinematic-scroll): hver situation har sit eget lys i husets toner, som toner frem,
   når situationen bliver aktiv. Fem fulde lag oven på hinanden, der krydsfades med opacity (baggrundsfarven animeres
   aldrig). Lagene står fast på skærmen (sticky) inde i sektionen, så lysfelterne altid ses. 1 arbejdsdag (lyst) ·
   2 sand · 3 natten til lørdag (skumring i aubergine med en lille varm glød: backuppen) · 4 varm kobber · 5 creme
   ("Målt, ikke gættet" nedenunder står på husets lyse flade, så de to sektioner ikke glider sammen). Stemningen er døgnets lys ved situationens tidspunkt (.eg-tid):
   tirsdag morgen, onsdag eftermiddag, natten til lørdag, torsdag sen eftermiddag, mandag formiddag. Styrken er brugerens (2026-09-30): runde 2 var for svag, runde 3
   (mørk nat med lys tekst) for stærk; dette er midt imellem. Alle flader holder AA med deres tekst.
   Felterne driver langsomt (transform), kun i det aktive lag. Uden JS / reduceret bevægelse: sektionens lyse flade */
.eg-sit > .rg-wrap{position:relative;z-index:1}
.eg-sit-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.eg-sit-bg-in{position:sticky;top:0;height:100vh;overflow:hidden}
.eg-sit-bg i{position:absolute;inset:0;overflow:hidden;background:var(--b);opacity:0;transition:opacity 1.3s cubic-bezier(.45,0,.2,1)}
.eg-sit-bg i::before,.eg-sit-bg i::after{content:"";position:absolute;border-radius:50%;animation:eg-stemning 44s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
.eg-sit-bg i::before{width:80vmax;height:80vmax;left:var(--f1x);top:var(--f1y);background:radial-gradient(closest-side,var(--f1),transparent)}
.eg-sit-bg i::after{width:56vmax;height:56vmax;left:var(--f2x);top:var(--f2y);background:radial-gradient(closest-side,var(--f2),transparent);animation-duration:58s;animation-direction:alternate-reverse}
.eg-sit-bg i.eg-paa{opacity:1}
.eg-sit-bg i.eg-paa::before,.eg-sit-bg i.eg-paa::after{animation-play-state:running}
@keyframes eg-stemning{to{transform:translate3d(-9vmax,7vmax,0) scale(1.12)}}
.eg-sit-bg i:nth-child(1){--b:#FFFDFB;--f1:rgba(234,221,210,1);--f1x:46%;--f1y:-40%;--f2:rgba(242,231,220,1);--f2x:-20%;--f2y:50%}
.eg-sit-bg i:nth-child(2){--b:#F4E8DE;--f1:rgba(215,183,163,.75);--f1x:50%;--f1y:-24%;--f2:rgba(248,238,229,.9);--f2x:-14%;--f2y:44%}
.eg-sit-bg i:nth-child(3){--b:#E6DCE4;--f1:rgba(60,42,68,.24);--f1x:42%;--f1y:-38%;--f2:rgba(228,87,36,.18);--f2x:64%;--f2y:56%}
.eg-sit-bg i:nth-child(4){--b:#F8E3D6;--f1:rgba(240,138,90,.26);--f1x:48%;--f1y:-30%;--f2:rgba(252,236,226,.9);--f2x:-16%;--f2y:46%}
.eg-sit-bg i:nth-child(5){--b:#F2E7DC;--f1:rgba(255,253,251,.8);--f1x:44%;--f1y:-30%;--f2:rgba(228,87,36,.1);--f2x:-10%;--f2y:58%}@media (prefers-reduced-motion:reduce){ .eg-sit-bg{display:none} }
/* overskriften kommer frem ord for ord (sektion 2 har maske-rejsning; naboer må ikke dele titelbehandling) */
.rg-js .eg-sit .rg-hoved .eg-o{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .6s ease,transform .9s var(--rg-ud)}
.rg-js .eg-sit .rg-hoved.is-inde .eg-o{opacity:1;transform:none;transition-delay:calc(var(--i) * 55ms + .1s)}
/* smalle skærme med bevægelse: hver situation toner frem, når den når skærmen */
.eg-sit-klar:not(.eg-sit-sticky) .eg-situation{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s var(--rg-ud),border-color .9s cubic-bezier(.45,0,.2,1)}
.eg-sit-klar:not(.eg-sit-sticky) .eg-situation.eg-vist{opacity:1;transform:none}

/* tablet (761-1100 px): hver situation i to spalter, situationen til venstre, svaret og Engine til højre */
@media (min-width:761px) and (max-width:1100px){
  .eg-situation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,64px);align-items:start}
  .eg-situation > .rg-ref{grid-column:1;grid-row:1}
  .eg-situation > h3{grid-column:1;grid-row:2}
  .eg-situation > .eg-sit-sker{grid-column:1;grid-row:3}
  .eg-situation > .eg-i{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .eg-situation > .eg-engine{grid-column:2;grid-row:3 / span 2;margin-top:24px}
}

/* ---------- store skærme: svaret står fast i højre side ---------- */
@media (min-width:1101px){
  .eg-sit-sticky .eg-sit-krop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);column-gap:clamp(56px,7vw,120px);border-top:1px solid var(--s-linje);transition:border-color .9s cubic-bezier(.45,0,.2,1)}
  .eg-sit-sticky .eg-sit-liste{border-top:0}
  /* den sidste situation har selv luft under sig (den står midt i sin høje boks) */
  .rg-sek.eg-sit.eg-sit-sticky{padding-bottom:clamp(16px,2vw,32px)}
  /* hver situation er 56 vh høj med indholdet i midten; den, der krydser skærmens midte, er aktiv, de andre dæmpes */
  .eg-sit-sticky .eg-situation{min-height:56vh;display:flex;flex-direction:column;justify-content:center;border-bottom:0;opacity:.26;transition:opacity .6s ease}
  .eg-sit-sticky .eg-situation.eg-aktiv{opacity:1}
  .eg-sit-sticky .eg-stop::before{transform:scaleX(0);transition:transform .6s var(--rg-ud) .25s}
  .eg-sit-sticky .eg-aktiv .eg-stop::before{transform:none}
  /* svaret står i højre side; i listen skjules det kun visuelt, så skærmlæsere læser det i rækkefølge */
  .eg-sit-sticky .eg-i{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .eg-sit-sticky .eg-svar-kol{display:block;position:relative}
  /* svarets boks er lige så høj som en situation (56 vh) og står midt på skærmen, så svar og situation flugter */
  .eg-svar{position:sticky;top:calc(var(--nav-h) + (100vh - var(--nav-h)) / 2 - 28vh);height:56vh;display:flex;align-items:center}
  .eg-svar-in{width:100%}
  .eg-svar-h{margin:0 0 26px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-kob)}
  .eg-svar-stak{display:grid}
  .eg-svar-t{grid-area:1 / 1;margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(44px,4.4vw,74px);line-height:1.02;letter-spacing:-.02em;color:var(--s-aub)}
  .eg-svar-t.eg-lang{font-size:clamp(34px,3.1vw,50px);line-height:1.08}
  .eg-s1,.eg-s2{display:block}
  .eg-s2{margin-top:.5em;max-width:16em;font-size:.4em;line-height:1.3;letter-spacing:0;color:var(--s-tekst)}
  /* ordskift: det gamle svar løfter sig hurtigt væk (.18 s), og først derefter kommer det nye op ord for ord */
  .eg-svar .eg-o{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .18s cubic-bezier(.7,0,.84,0),transform .18s cubic-bezier(.7,0,.84,0)}
  .eg-svar-t.eg-ud .eg-o{transform:translateY(-.25em)}
  .eg-svar-t.eg-vis .eg-o{opacity:1;transform:none;transition:opacity .6s ease,transform .85s var(--rg-ud);transition-delay:calc(var(--i) * 45ms + .22s)}
  .eg-svar-t.eg-fast1 .eg-s1 .eg-o{transition:none}
  .eg-svar-t.eg-fast1.eg-vis .eg-s2 .eg-o{transition-delay:calc((var(--i) - var(--n1)) * 45ms + .22s)}
}

/* =====================================================================================================
   4. MÅLT, IKKE GÆTTET: spørgsmålene, I får. De 9 kontroller, som platformen læser direkte fra Engine, som de
   spørgsmål, kunder og revisorer stiller, på almindeligt dansk. Svaret er ikke et løfte, men en måling: det står først
   som et gråt "Ja" og skifter et øjeblik efter til "● Målt" (husets kobberprik); under svaret står kravkortet, og
   rækken linker dertil. Hver række spiller, når den når skærmen (engine-2026.js sætter .eg-nu, --d forskyder rækker,
   der kommer ind samtidig). Uden JS og ved reduceret bevægelse står kun "Målt". Plan: .arbejde/undersider/engine-maalt/
   ===================================================================================================== */
/* fladen er husets lyse flade uden baggrundseffekt (brugerens valg 2026-10-01). Situationernes sidste stemning lige
   over er creme, så de to sektioner ikke står i samme farve; kontakten nedenunder er aubergine. Afvist her: creme
   (samme som stemningen over), mørk blæk (alt for mørk) og lys lilla (ikke husets farve) */
.eg-maalt{background:var(--rg-lys);color:var(--rg-blaek)}
.eg-sp-hoved,.eg-kontroller a{display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,21vw,270px);column-gap:clamp(24px,4vw,64px)}
/* spalteoverskrifterne: Spørgsmålet | Svaret */
.eg-sp-hoved{padding:0 0 14px;border-bottom:1px solid var(--rg-aub);font-family:var(--font-display);font-stretch:125%;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rg-tekst)}
.eg-kontroller{list-style:none;margin:0;padding:0}
.eg-kontroller a{align-items:baseline;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--rg-streg);color:inherit;text-decoration:none}
.eg-sp,.eg-ja,.eg-m{font-family:var(--font-display);font-stretch:125%;font-size:clamp(21px,2.1vw,30px);line-height:1.2}
.eg-sp{color:var(--rg-aub);text-wrap:balance;transition:color .3s ease}
/* svaret: "Ja" og "Målt" ligger i samme celle; kravkortet under */
.eg-sv{display:grid;justify-items:start;align-content:start}
.eg-ja,.eg-m{grid-area:1 / 1}
.eg-ja{color:rgba(60,42,68,.36);opacity:0}
.eg-m{display:inline-flex;align-items:center;gap:12px;color:var(--rg-aub)}
.eg-mprik{flex:none;width:12px;height:12px;border-radius:50%;background:var(--rg-kobber)}
.eg-kk{margin-top:8px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12.5px;line-height:1.4;color:var(--rg-kobber-tekst)}
/* pilen står i teksten, bundet til sidste ord med hårde mellemrum, så den aldrig havner alene på en ny linje, når et
   langt kravkortnavn brydes (derfor left og ikke transform, som ikke virker på tekst i linjen) */
.eg-kk::after{content:"\00a0\00a0→";position:relative;left:0;color:var(--rg-kobber);transition:left .3s var(--rg-ud)}
@media (hover:hover){
  .eg-kontroller a:hover .eg-sp{color:var(--rg-kobber-tekst)}
  .eg-kontroller a:hover .eg-kk::after{left:4px}
}
.eg-kontroller a:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:3px;border-radius:4px}
/* med bevægelse: spørgsmålet kommer frem, så et gråt "Ja" (et løfte), der løfter sig væk, og så "● Målt" (en måling) */
.eg-maalt-klar .eg-kontroller li:not(.eg-nu) .eg-sp{opacity:0;transform:translateY(14px)}
.eg-maalt-klar .eg-kontroller li:not(.eg-nu) .eg-m,.eg-maalt-klar .eg-kontroller li:not(.eg-nu) .eg-kk{opacity:0;transform:translateY(.3em)}
.eg-maalt-klar .eg-kontroller li:not(.eg-nu) .eg-mprik{transform:scale(0)}
.eg-kontroller li.eg-nu .eg-sp{transition:opacity .7s ease var(--d,0s),transform .9s var(--rg-ud) var(--d,0s),color .3s ease}
.eg-kontroller li.eg-nu .eg-ja{animation:eg-ja 1.25s cubic-bezier(.45,0,.2,1) calc(var(--d,0s) + .3s) both}
@keyframes eg-ja{0%{opacity:0;transform:translateY(.3em)}28%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.35em)}}
.eg-kontroller li.eg-nu .eg-m{transition:opacity .45s ease calc(var(--d,0s) + 1.4s),transform .7s var(--rg-ud) calc(var(--d,0s) + 1.4s)}
.eg-kontroller li.eg-nu .eg-mprik{transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + 1.5s)}
.eg-kontroller li.eg-nu .eg-kk{transition:opacity .5s ease calc(var(--d,0s) + 1.7s),transform .7s var(--rg-ud) calc(var(--d,0s) + 1.7s)}
.eg-alle28{display:inline-flex;align-items:baseline;gap:12px;margin-top:40px;font-family:var(--font-display);font-stretch:125%;font-size:17px;
  color:var(--rg-aub);text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(60,42,68,.3);transition:border-color .3s ease}
.eg-alle28::after{content:"→";color:var(--rg-kobber)}
@media (hover:hover){ .eg-alle28:hover{border-bottom-color:var(--rg-kobber)} }
.eg-alle28:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:3px}

/* telefon: svaret under spørgsmålet; spalteoverskrifterne er unødvendige */
@media (max-width:700px){
  .eg-sp-hoved{grid-template-columns:1fr}
  .eg-sp-hoved span+span{display:none}
  .eg-kontroller a{grid-template-columns:1fr;row-gap:12px}
  .eg-sv{grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline}
  .eg-kk{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .rg-js .eg-knapper,.rg-js .eg-tillid{opacity:1;transform:none;transition:none}
  .rg-js .eg-sit .rg-hoved .eg-o{opacity:1;transform:none;transition:none}
}