/* Arctonia: portfolioen på /work. Den arkiverede forside "Under overfladen"
   i forsidens materialer: papir i stedet for frostet glas, Bodoni-tal og
   spærrede etiketter i stedet for mono, blæk og isblå i stedet for guld.
   Mekanikken er den samme: scenen står fast, mens sektionen scroller, og
   teksten, etiketterne og skinnen flyttes af løkken i Fortaelling.tsx.

   Bygger på arctonia-ramme.css (tokens, .ar-cta) og arctonia-side.css
   (.ar-num, .ar-lab, .ar-titel, .ar-tekstknap, .ar-pil). Præfiks ar-pf-. */

.ar-pf{--ar-pf-kant:clamp(20px, 4vw, 64px);--ar-pf-is:#7fb8cc;--ar-pf-skifer:#e8611c;
  --ar-pf-ease:cubic-bezier(.16,1,.3,1);color:var(--ar-ink)}

/* ── fortællingen ──────────────────────────────────────────────────── */
.ar-pf-fortaelling{position:relative}
.ar-pf-scene{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.ar-pf-reserve{position:absolute;inset:0;
  background:radial-gradient(55% 55% at 62% 44%, rgba(255,255,255,.8), transparent 70%),
             linear-gradient(180deg, #e9eef1 0%, #eef2f3 50%, #f0f3f3 100%)}
.ar-pf-laerred{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.ar-pf-scene[data-klar] .ar-pf-laerred{opacity:1}
.ar-pf-hero,.ar-pf-kapitel,.ar-pf-lag-etiket,.ar-pf-hub,.ar-pf-tur,.ar-pf-lead{will-change:transform, opacity}
/* etiketterne er pynt (aria-hidden); kapitlerne skal altid kunne læses */
.ar-pf :is(.ar-pf-lag-etiket,.ar-pf-hub,.ar-pf-tur,.ar-pf-lead,.ar-pf-skinne)[data-skjult]{visibility:hidden}

.ar-pf-blocknum{display:flex;gap:calc(16*var(--ar-u));align-items:baseline}

/* the hero */
.ar-pf-hero{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(128px, 20vh, 210px) var(--ar-pf-kant) clamp(28px, 6vh, 64px);pointer-events:none}
.ar-pf-hero a,.ar-pf-hero button{pointer-events:auto}
.ar-pf-hero-titel{font-family:var(--ar-display);font-weight:400;letter-spacing:-.04em;color:#080b0e;
  font-size:clamp(3rem, 6.4vw, 6.6rem);line-height:.95;max-width:5.4em;margin-top:clamp(16px, 2.4vh, 26px)}
.ar-pf-hero-bund{grid-row:3;display:flex;flex-direction:column;gap:24px;max-width:440px}
.ar-pf-hero-tekst{font-size:clamp(15px, 1.15vw, 17px);line-height:1.6;color:#4d5864}
.ar-pf-knapper{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ar-pf-knapper .ar-cta{height:52px;padding:0 32px;font-size:12px}
.ar-pf-scroll{position:absolute;left:50%;bottom:clamp(26px, 5vh, 54px);display:flex;align-items:center;gap:12px;
  transform:translateX(-50%);background:none;border:0;cursor:pointer;padding:8px 0;
  font:400 11px/1 var(--ar-sans);letter-spacing:.19em;text-transform:uppercase;color:#5d6874}
.ar-pf-scroll-linje{position:relative;width:1px;height:34px;overflow:hidden;background:rgba(13,17,23,.15)}
.ar-pf-scroll-linje::after{content:'';position:absolute;inset:0;background:#0d1117;transform:translateY(-100%);
  animation:ar-pf-scroll 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ar-pf-scroll{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* the hero's entrance */
.ar-pf-ind{opacity:0;transform:translateY(14px);animation:ar-pf-ind .9s var(--ar-pf-ease) forwards}
@keyframes ar-pf-ind{to{opacity:1;transform:none}}
.ar-pf-maske{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.ar-pf-maske-ind{display:inline-block;transform:translateY(105%);animation:ar-pf-maske 1.1s var(--ar-pf-ease) forwards}
@keyframes ar-pf-maske{to{transform:none}}

/* the chapters */
.ar-pf-kapitel{position:absolute;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  width:min(440px, 36vw);pointer-events:none}
.ar-pf-kapitel[data-side='venstre']{left:var(--ar-pf-kant)}
.ar-pf-kapitel[data-side='hoejre']{right:var(--ar-pf-kant)}
.ar-pf-kapitel[data-side='midt']{left:0;right:0;top:auto;bottom:clamp(56px, 10vh, 104px);width:auto;
  align-items:center;text-align:center}
.ar-pf-kapitel-kort{display:flex;flex-direction:column;gap:16px}
.ar-pf-kapitel-titel{font-family:var(--ar-display);font-weight:400;letter-spacing:-.032em;color:#080b0e;
  font-size:clamp(2rem, 3.4vw, 3.3rem);line-height:1.03;text-wrap:balance}
.ar-pf-kapitel[data-side='midt'] .ar-pf-kapitel-titel{font-size:clamp(1.8rem, 2.8vw, 2.7rem)}
.ar-pf-kapitel-tekst{font-size:clamp(15px, 1.1vw, 17px);line-height:1.6;color:#4d5864;max-width:36ch;text-wrap:pretty}
.ar-pf-kapitel[data-side='midt'] .ar-pf-kapitel-tekst{max-width:46ch}
.ar-pf-link{align-self:flex-start;color:#141b22;border-bottom:1px solid rgba(13,17,23,.3);min-height:36px;margin-top:4px}
/* over the model the text stands on a sheet, like the front page's cards */
.ar-pf-kapitel[data-kort] .ar-pf-kapitel-kort{padding:clamp(24px, 2.2vw, 34px);
  background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.16);
  box-shadow:0 16px 40px rgba(40,60,80,.13)}

/* labels that follow the model */
.ar-pf-lag-etiket,.ar-pf-hub,.ar-pf-tur,.ar-pf-lead{position:absolute;left:0;top:0;z-index:3;height:0;width:0}
.ar-pf-lag-indhold{position:absolute;left:0;top:0;display:flex;align-items:center;width:max-content;transform:translateY(-50%)}
.ar-pf-lag-etiket[data-vend] .ar-pf-lag-indhold{left:auto;right:0;flex-direction:row-reverse}
.ar-pf-lag-prik{width:9px;height:9px;margin-left:-4.5px;flex:none;border-radius:50%;background:var(--ar-pf-skifer);
  box-shadow:0 0 0 4px rgba(255,122,40,.3)}
.ar-pf-lag-etiket[data-vend] .ar-pf-lag-prik{margin-left:0;margin-right:-4.5px}
.ar-pf-lag-streg{width:clamp(22px, 2.6vw, 40px);height:1px;flex:none;background:rgba(13,17,23,.4)}
.ar-pf-lag-tekst{display:flex;flex-direction:column;gap:3px;padding:9px 14px 10px;white-space:nowrap;
  background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.16);box-shadow:0 10px 26px rgba(40,60,80,.12)}
.ar-pf-lag-tekst b{font-family:var(--ar-display);font-weight:400;font-size:15px;letter-spacing:-.01em;color:#0d1117}
.ar-pf-lag-tekst small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5d6874}

.ar-pf-hub{border:0;background:none;padding:0;cursor:pointer}
.ar-pf-hub-pille{position:absolute;left:0;bottom:18px;display:flex;align-items:baseline;gap:9px;
  padding:8px 14px 8px 12px;transform:translateX(-50%);white-space:nowrap;
  font:400 13.5px/1 var(--ar-display);letter-spacing:-.005em;color:#0d1117;
  background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.18);box-shadow:0 8px 22px rgba(40,60,80,.14);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .45s var(--ar-pf-ease)}
.ar-pf-hub-pille .ar-num{font-size:12px}
.ar-pf-hub-pille::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:16px;
  background:linear-gradient(180deg, rgba(13,17,23,.45), transparent)}
.ar-pf-hub[data-hover] .ar-pf-hub-pille{background:#0d1117;border-color:#0d1117;color:#fff;transform:translateX(-50%) translateY(-3px)}
.ar-pf-hub[data-hover] .ar-pf-hub-pille .ar-num{color:#9fd4e4}

/* the trip card while we ride with the truck: an illustration, not a customer's screen */
.ar-pf-tur-kort{position:absolute;left:22px;bottom:10px;width:216px;padding:14px 16px 12px;
  background:rgba(252,253,253,.95);border:1px solid rgba(13,17,23,.16);box-shadow:0 14px 34px rgba(40,60,80,.14)}
.ar-pf-tur-top{display:flex;align-items:center;gap:8px;font:400 13.5px/1.2 var(--ar-display);color:#0d1117}
.ar-pf-tur-live{width:7px;height:7px;border-radius:50%;background:var(--ar-pf-skifer);animation:ar-pf-puls 1.6s ease-in-out infinite}
@keyframes ar-pf-puls{0%,100%{box-shadow:0 0 0 0 rgba(255,122,40,.7)}50%{box-shadow:0 0 0 6px rgba(255,122,40,0)}}
.ar-pf-tur-tid{margin-left:auto;font-family:var(--ar-serif);font-size:12.5px;color:#5d6874;font-variant-numeric:tabular-nums}
.ar-pf-tur-kort ol{margin-top:10px;padding-top:10px;border-top:1px solid rgba(13,17,23,.12);display:grid;gap:7px}
.ar-pf-tur-kort li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7783;transition:color .4s ease}
.ar-pf-tur-kort svg{width:15px;height:15px;padding:2px;border-radius:50%;border:1px solid rgba(13,17,23,.2);
  fill:none;stroke:transparent;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color .4s ease,border-color .4s ease,stroke .4s ease}
.ar-pf-tur-kort li[data-klar]{color:#0d1117}
.ar-pf-tur-kort li[data-klar] svg{background:#0d1117;border-color:#0d1117;stroke:#cfeaf2}

/* TurGulf's three taps beside the apartment block: the flow from the case,
   drawn as an illustration */
.ar-pf-lead-kort{position:absolute;left:34px;top:26px;width:262px;padding:14px 16px 15px;
  background:rgba(252,253,253,.95);border:1px solid rgba(13,17,23,.16);box-shadow:0 14px 34px rgba(40,60,80,.14)}
.ar-pf-lead[data-vend] .ar-pf-lead-kort{left:auto;right:34px}
.ar-pf-lead-top{display:flex;flex-direction:column;gap:5px;padding-bottom:11px;border-bottom:1px solid rgba(13,17,23,.12)}
.ar-pf-lead-top b{font:400 20px/1 var(--ar-display);letter-spacing:-.02em;color:#0d1117}
.ar-pf-lead-top span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5d6874}
.ar-pf-lead-kort ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;position:relative}
.ar-pf-lead-kort ol::before{content:'';position:absolute;left:12px;right:calc(33% - 6px);top:11px;height:1px;background:rgba(13,17,23,.18)}
.ar-pf-lead-kort li{position:relative;display:flex;flex-direction:column;gap:7px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b7783;transition:color .4s ease}
.ar-pf-lead-kort li .ar-num{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  border:1px solid rgba(13,17,23,.22);background:#fbfcfd;font-size:12px;transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.ar-pf-lead-kort li[data-klar]{color:#0d1117}
.ar-pf-lead-kort li[data-klar] .ar-num{background:#0d1117;border-color:#0d1117;color:#cfeaf2}

/* the rail: where in the story you are, as the front page's readout */
.ar-pf-skinne{position:absolute;left:50%;bottom:clamp(18px, 3.4vh, 34px);z-index:4;display:flex;align-items:center;gap:16px;
  padding:9px 12px 9px 18px;transform:translateX(-50%);
  background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.16);box-shadow:0 10px 28px rgba(40,60,80,.12)}
.ar-pf-skinne-tekst{display:flex;align-items:baseline;gap:12px;min-width:180px;white-space:nowrap;
  font-family:var(--ar-serif);font-size:13px;color:#5d6874;font-variant-numeric:tabular-nums}
.ar-pf-skinne-tekst b{font:400 11px/1 var(--ar-sans);letter-spacing:.19em;text-transform:uppercase;color:#0d1117}
.ar-pf-skinne ol{display:flex;align-items:center;gap:4px}
.ar-pf-skinne button{display:grid;place-items:center;width:20px;height:20px;background:none;border:0;padding:0;cursor:pointer}
.ar-pf-skinne-prik{width:6px;height:6px;border-radius:50%;background:rgba(13,17,23,.2);
  transition:background-color .4s ease,transform .5s var(--ar-pf-ease),box-shadow .4s ease}
.ar-pf-skinne button:hover .ar-pf-skinne-prik{background:rgba(13,17,23,.5)}
.ar-pf-skinne li[data-forbi] .ar-pf-skinne-prik{background:#0d1117}
.ar-pf-skinne li[data-aktiv] .ar-pf-skinne-prik{background:var(--ar-pf-skifer);transform:scale(1.5);box-shadow:0 0 0 3px rgba(255,122,40,.35)}

/* without WebGL the text still stands, but the labels mean nothing */
.ar-pf-scene[data-uden3d] :is(.ar-pf-lag-etiket,.ar-pf-hub,.ar-pf-tur,.ar-pf-lead){display:none}

/* ── the cases ─────────────────────────────────────────────────────── */
.ar-pf-cases{position:relative;padding:calc(150*var(--ar-u)) calc(64*var(--ar-u)) calc(160*var(--ar-u));
  background:linear-gradient(180deg, #f0f3f3 0%, #eef2f3 40%, #e6ecef 100%)}
.ar-pf-cases::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--ar-grain, none);background-size:220px 220px;opacity:.5;mix-blend-mode:multiply}
.ar-pf-cases > *{position:relative}
.ar-pf-cases-hoved .ar-titel{font-size:calc(64*var(--ar-u))}
.ar-pf-case-liste{display:grid;grid-template-columns:repeat(4, 1fr);gap:calc(16*var(--ar-u));margin-top:calc(56*var(--ar-u))}
.ar-pf-case-liste li{display:flex}
.ar-pf-case{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;
  background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.16);
  transition:border-color .35s ease,box-shadow .45s ease,transform .6s var(--ar-pf-ease)}
a.ar-pf-case:hover{border-color:rgba(13,17,23,.6);box-shadow:0 16px 40px rgba(40,60,80,.13);transform:translateY(-3px)}
.ar-pf-case-billede{display:block;aspect-ratio:16/10;overflow:hidden;background:#e3e9ec;border-bottom:1px solid rgba(13,17,23,.12)}
.ar-pf-case-billede img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ar-pf-ease)}
a.ar-pf-case:hover .ar-pf-case-billede img{transform:scale(1.03)}
.ar-pf-case-tekst{display:flex;flex-direction:column;gap:12px;flex:1;padding:calc(22*var(--ar-u)) calc(22*var(--ar-u)) calc(20*var(--ar-u))}
.ar-pf-case-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ar-pf-case b{font-family:var(--ar-display);font-weight:400;letter-spacing:-.022em;color:#080b0e;font-size:max(22px, calc(30*var(--ar-u)))}
.ar-pf-case-linje{flex:1;font-size:max(13px, calc(14*var(--ar-u)));line-height:1.6;color:#4d5864;max-width:40ch}
.ar-pf-case .ar-tekstknap{align-self:flex-start;color:#141b22;border-bottom:1px solid rgba(13,17,23,.3);min-height:36px}
.ar-pf-case-billede[data-bred]{background:#0b0d10}
.ar-pf-case-billede[data-bred] img{object-fit:contain;padding:0 8%}
.ar-pf-case-snart{border-style:dashed;border-color:rgba(13,17,23,.3);background:rgba(252,253,253,.55)}
.ar-pf-plade{display:grid;place-items:center;background:none;border-bottom:1px dashed rgba(13,17,23,.2)}
.ar-pf-plade img{width:auto;height:46%;object-fit:contain;mix-blend-mode:multiply;opacity:.9}

/* ── phone ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ar-pf-hero{padding:104px 16px 16px}
  .ar-pf-hero-titel{font-size:clamp(2.8rem, 13vw, 4.4rem)}
  .ar-pf-hero-bund{max-width:none;padding:20px;gap:18px;
    background:rgba(252,253,253,.94);border:1px solid rgba(13,17,23,.16);box-shadow:0 14px 34px rgba(40,60,80,.12)}
  .ar-pf-hero-tekst{font-size:15px;line-height:1.55}
  .ar-pf-knapper{gap:20px}
  .ar-pf-knapper .ar-cta{height:48px;padding:0 24px}
  .ar-pf-scroll{display:none}
  .ar-pf-kapitel,.ar-pf-kapitel[data-side]{top:auto;bottom:16px;left:16px;right:16px;width:auto;padding:22px;
    align-items:flex-start;text-align:left;
    background:rgba(252,253,253,.95);border:1px solid rgba(13,17,23,.16);box-shadow:0 14px 34px rgba(40,60,80,.12)}
  .ar-pf-kapitel-titel,.ar-pf-kapitel[data-side='midt'] .ar-pf-kapitel-titel{font-size:clamp(1.7rem, 7.4vw, 2.3rem)}
  .ar-pf-kapitel-tekst{font-size:15px}
  .ar-pf-kapitel[data-kort] .ar-pf-kapitel-kort{padding:0;background:none;border:0;box-shadow:none}
  .ar-pf-kapitel-kort{gap:12px}
  .ar-pf-lag-streg{display:none}
  .ar-pf-skinne{display:none}
  .ar-pf-lag-tekst{margin-left:8px;padding:7px 11px 8px}
  .ar-pf-lag-tekst small{display:none}
  .ar-pf-tur-kort{width:186px;left:12px}
  .ar-pf-lead-kort{width:228px;left:12px;top:22px}
  .ar-pf-lead[data-vend] .ar-pf-lead-kort{left:auto;right:12px}

  .ar-pf-cases{padding:calc(84*var(--ar-u)) calc(20*var(--ar-u)) calc(90*var(--ar-u))}
  .ar-pf-cases-hoved .ar-titel{font-size:calc(40*var(--ar-u))}
  .ar-pf-case-liste{grid-template-columns:1fr;gap:calc(14*var(--ar-u));margin-top:calc(30*var(--ar-u))}
  .ar-pf-case-tekst{padding:18px 18px 16px}
}
@media (max-width:1180px) and (min-width:901px){
  .ar-pf-case-liste{grid-template-columns:repeat(2, 1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ar-pf-ind,.ar-pf-maske-ind,.ar-pf-scroll-linje::after,.ar-pf-tur-live{animation:none;opacity:1;transform:none}
  .ar-pf-case,.ar-pf-case-billede img{transition:none}
}

/* ── Luqya: a case outside the tile (hidden on the site for now) ─────
   The pane is the platform's own conversation, in its materials: the
   ground #fcf8f1, black ink, the coral light behind, pills, and its glass
   orb. data-trin (0–5) on the pane plays the conversation. */
.ar-pf-lq{position:relative;padding:calc(140*var(--ar-u)) calc(64*var(--ar-u)) calc(160*var(--ar-u));
  background:linear-gradient(180deg, #e6ecef 0%, #eef2f3 100%);border-top:1px solid rgba(13,17,23,.08)}
.ar-pf-lq-gitter{display:grid;grid-template-columns:1fr minmax(340px, calc(470*var(--ar-u)));gap:calc(110*var(--ar-u));align-items:center}
.ar-pf-lq .ar-titel{font-size:calc(72*var(--ar-u));letter-spacing:-.04em}
.ar-pf-lq .ar-lede{max-width:calc(560*var(--ar-u))}
.ar-pf-lq-pointer{margin-top:calc(40*var(--ar-u));border-top:1px solid rgba(13,17,23,.16);max-width:calc(600*var(--ar-u))}
.ar-pf-lq-pointer li{display:grid;grid-template-columns:calc(48*var(--ar-u)) 1fr;gap:calc(10*var(--ar-u));
  padding:calc(18*var(--ar-u)) 0;border-bottom:1px solid rgba(13,17,23,.12)}
.ar-pf-lq-pointer .ar-num{font-size:max(13px, calc(16*var(--ar-u)));padding-top:3px}
.ar-pf-lq-pointer b{display:block;font-family:var(--ar-display);font-weight:400;letter-spacing:-.018em;color:#080b0e;
  font-size:max(18px, calc(22*var(--ar-u)))}
.ar-pf-lq-pointer p{margin-top:6px;font-size:max(13.5px, calc(14.5*var(--ar-u)));line-height:1.6;color:#4d5864;max-width:48ch}

.ar-pf-lq-figur{margin:0;justify-self:end;width:100%;max-width:470px;display:flex;flex-direction:column;gap:14px}
.ar-pf-lq-sprog{align-self:flex-end;display:inline-flex;border:1px solid rgba(13,17,23,.2);border-radius:999px;padding:3px;background:rgba(255,255,255,.6)}
.ar-pf-lq-sprog button{border:0;background:none;cursor:pointer;min-height:34px;padding:0 14px;border-radius:999px;
  font:400 12px/1 var(--ar-sans);letter-spacing:.08em;color:#3b4652;transition:background .25s,color .25s}
.ar-pf-lq-sprog button[lang="ar"]{font:400 14px/1 'Readex Pro','Geeza Pro','Noto Sans Arabic',sans-serif;letter-spacing:0}
.ar-pf-lq-sprog button[aria-pressed="true"]{background:#0d1117;color:#fff}

.ar-pf-lq-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;background:#fcf8f1;color:#000;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 40px 90px rgba(67,22,22,.14), 0 2px 0 rgba(255,255,255,.8) inset;
  padding:26px 24px 20px;height:640px;display:flex;flex-direction:column;
  font-family:var(--ar-display);-webkit-font-smoothing:antialiased}
.ar-pf-lq-panel[lang="ar"]{font-family:'Readex Pro','Geeza Pro','Noto Sans Arabic',var(--ar-display),sans-serif}
.ar-pf-lq-lys{position:absolute;z-index:-1;left:-30%;right:-30%;top:-26%;height:62%;pointer-events:none;
  background:radial-gradient(34% 44% at 28% 46%, rgba(255,110,143,.42), transparent 70%),
             radial-gradient(38% 46% at 70% 38%, rgba(255,137,88,.36), transparent 70%),
             radial-gradient(30% 40% at 52% 66%, rgba(255,154,231,.30), transparent 70%),
             radial-gradient(26% 34% at 82% 70%, rgba(255,68,58,.18), transparent 70%);
  filter:blur(34px);animation:ar-pf-lq-lys 14s ease-in-out infinite alternate}
@keyframes ar-pf-lq-lys{to{transform:translate3d(5%, 6%, 0) scale(1.08) rotate(4deg)}}

.ar-pf-lq-hoved{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(0,0,0,.08)}
.ar-pf-lq-hoved b{display:block;font-weight:500;font-size:19px;letter-spacing:-.01em}
.ar-pf-lq-hoved small{display:block;margin-top:3px;font-size:12.5px;color:rgba(0,0,0,.62)}
.ar-pf-lq-kugle{position:relative;flex:none;width:56px;height:56px;border-radius:50%;
  box-shadow:0 10px 26px rgba(67,22,22,.28), 0 0 0 1px rgba(184,134,79,.25);
  animation:ar-pf-lq-aande 5.5s ease-in-out infinite}
.ar-pf-lq-kugle img{display:block;width:100%;height:100%;border-radius:50%;animation:ar-pf-lq-drej 22s linear infinite}
.ar-pf-lq-kugle[data-taenker]{animation-duration:1.6s}
.ar-pf-lq-kugle[data-taenker] img{animation-duration:7s}
@keyframes ar-pf-lq-aande{50%{transform:scale(1.045)}}
@keyframes ar-pf-lq-drej{to{transform:rotate(360deg)}}

/* the conversation lives inside the pane's own height, as in a real chat:
   new lines come in at the bottom and push the earlier ones up and out under
   a soft fade, so the page around it never moves */
.ar-pf-lq-stroem{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;flex:1;min-height:0;overflow:hidden;
  padding-top:12px;margin-top:-12px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px);mask-image:linear-gradient(to bottom, transparent 0, #000 36px)}
.ar-pf-lq-stroem > *{flex:none}
.ar-pf-lq-boble{max-width:88%;font-size:15.5px;line-height:1.5;margin:0}
.ar-pf-lq-panel[lang="ar"] .ar-pf-lq-boble{font-size:16.5px;line-height:1.7}
.ar-pf-lq-boble.luqya{align-self:flex-start;padding:12px 16px;border-radius:20px;border-start-start-radius:6px;
  background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.07);box-shadow:0 6px 18px rgba(67,22,22,.06)}
.ar-pf-lq-boble.gaest{align-self:flex-end;padding:11px 16px;border-radius:20px;border-start-end-radius:6px;background:#000;color:#fcf8f1}
.ar-pf-lq-aabnere{display:flex;flex-wrap:wrap;gap:7px}
.ar-pf-lq-aabnere span,.ar-pf-lq-spoerg span,.ar-pf-lq-tider span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
  border-radius:999px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.7);font-size:13px;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.625,.05,0,1)}
.ar-pf-lq-aabnere span.tryk,.ar-pf-lq-spoerg span.tryk{background:#000;border-color:#000;color:#fcf8f1;transform:scale(.97)}
.ar-pf-lq-spoerg{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ar-pf-lq-spoerg p{margin:0}
.ar-pf-lq-tider{display:flex;flex-wrap:wrap;gap:7px}
.ar-pf-lq-tider span{border-color:rgba(184,134,79,.5);background:#fffaf2}
.ar-pf-lq-tider span.valgt{background:#431616;border-color:#431616;color:#efd7ac}
.ar-pf-lq-skriver{display:flex;align-items:center;gap:4px;margin:0;font-size:12.5px;color:rgba(0,0,0,.64)}
.ar-pf-lq-skriver i{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);animation:ar-pf-lq-prik 1.1s ease-in-out infinite}
.ar-pf-lq-skriver i:nth-child(2){animation-delay:.15s}
.ar-pf-lq-skriver i:nth-child(3){animation-delay:.3s;margin-inline-end:6px}
@keyframes ar-pf-lq-prik{50%{transform:translateY(-3px);opacity:.4}}
/* the steps arrive one by one */
.ar-pf-lq-panel :is(.gaest,.ar-pf-lq-skriver,.ar-pf-lq-spoerg,.ar-pf-lq-tider,.ar-pf-lq-svar,.ar-pf-lq-aabnere){opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;
  transition:opacity .5s ease,transform .6s cubic-bezier(.625,.05,0,1),max-height .7s cubic-bezier(.625,.05,0,1),margin .6s ease}
.ar-pf-lq-panel :is(.gaest,.ar-pf-lq-skriver,.ar-pf-lq-spoerg,.ar-pf-lq-tider,.ar-pf-lq-svar,.ar-pf-lq-aabnere)[data-vis]{opacity:1;transform:none;max-height:260px;overflow:visible}
.ar-pf-lq-panel :is(.gaest,.ar-pf-lq-svar,.ar-pf-lq-spoerg,.ar-pf-lq-tider,.ar-pf-lq-aabnere):not([data-vis]){margin-top:-12px}
.ar-pf-lq-svar p + p{margin-top:8px}
.ar-pf-lq-panel .ar-pf-lq-skriver:not([data-vis]){margin-top:-12px}

.ar-pf-lq-anonym{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08);
  font-size:12px;line-height:1.5;color:rgba(0,0,0,.58)}
.ar-pf-lq-panel[lang="ar"] .ar-pf-lq-anonym{font-size:13px}
.ar-pf-lq-anonym svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:#8a5c33;stroke-width:1.3}
.ar-pf-lq-figur figcaption{text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5d6874}

/* the prototype marks what the site does not show yet */
.ar-pf-skjult-maerke{position:absolute;top:calc(100*var(--ar-u));right:calc(64*var(--ar-u));z-index:2;
  padding:7px 12px;border:1px dashed rgba(155,58,42,.5);color:#9b3a2a;background:rgba(255,255,255,.7);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

@media (max-width:900px){
  .ar-pf-lq{padding:calc(80*var(--ar-u)) calc(20*var(--ar-u)) calc(90*var(--ar-u))}
  .ar-pf-lq-gitter{grid-template-columns:1fr;gap:calc(44*var(--ar-u))}
  .ar-pf-lq .ar-titel{font-size:calc(48*var(--ar-u))}
  .ar-pf-lq-pointer li{grid-template-columns:calc(36*var(--ar-u)) 1fr}
  .ar-pf-lq-figur{justify-self:stretch;max-width:none}
  .ar-pf-lq-panel{height:600px;padding:22px 18px 18px;border-radius:26px}
  .ar-pf-skjult-maerke{position:static;display:inline-block;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .ar-pf-lq-lys,.ar-pf-lq-kugle,.ar-pf-lq-kugle img,.ar-pf-lq-skriver i{animation:none}
  .ar-pf-lq-panel :is(.gaest,.ar-pf-lq-skriver,.ar-pf-lq-spoerg,.ar-pf-lq-tider){transition:none}
}

/* Dr. Asmaa's card: the platform's orb on its warm ground and coral light */
.ar-pf-case-billede[data-visuel="kugle"]{display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(60% 70% at 32% 30%, rgba(255,110,143,.38), transparent 70%),
             radial-gradient(55% 60% at 74% 36%, rgba(255,137,88,.32), transparent 70%),
             radial-gradient(50% 55% at 55% 80%, rgba(255,154,231,.24), transparent 70%), #fcf8f1}
.ar-pf-case-billede[data-visuel="kugle"] img.ar-pf-case-kugle{width:34%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 18px 40px rgba(67,22,22,.3), 0 0 0 1px rgba(184,134,79,.3);transition:transform .9s var(--ar-pf-ease)}
a.ar-pf-case:hover .ar-pf-case-billede[data-visuel="kugle"] img{transform:scale(1.05)}

/* ── the loading screen: "Under overfladen" ─────────────────────────
   Arctonia: while the island loads and draws its first frames, the tile is
   drawn as a geological section and filled from below with the real loading:
   the core (strata and lava veins), the system (the glass) and the work (the
   surface, where the buildings rise). Then the drawing glides onto the
   island's own tile and fades into it (Indlaesning.tsx). */
.ar-pf-laes{position:fixed;inset:0;z-index:210;pointer-events:auto}
.ar-pf-laes-grund{position:absolute;inset:0;transition:opacity .75s ease;
  background:radial-gradient(60% 55% at 50% 40%, #ffffff 0%, #eef2f3 56%, #e2e8ec 100%)}
.ar-pf-laes[data-aabner] .ar-pf-laes-grund{opacity:0}
.ar-pf-laes-tegning{position:absolute;inset:0;width:100%;height:100%;overflow:visible;--streg:1;--tegnet:0;transition:opacity .7s ease}
.ar-pf-laes[data-aabner] .ar-pf-laes-tegning{opacity:0}
.ar-pf-laes[data-hurtig] :is(.ar-pf-laes-grund,.ar-pf-laes-tegning){transition-duration:.4s}
.ar-pf-laes-tegning :is(.side,.omrids){fill:none;stroke:#1f2226;stroke-opacity:calc(.72*var(--streg));stroke-width:1.25;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tegnet))}
.ar-pf-laes-tegning .toppen{fill:#c4cda2;transition:opacity .4s ease}
.ar-pf-laes-tegning .vej{fill:none;stroke:#7c838a;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ar-pf-laes-tegning .baand-0{fill:#b2ab7c}
.ar-pf-laes-tegning .baand-1{fill:#8cc4d6;fill-opacity:.85}
.ar-pf-laes-tegning .baand-2{fill:#2c4b62}
.ar-pf-laes-tegning .strata{fill:none;stroke:#6f9bb4;stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.ar-pf-laes-tegning .aare{fill:none;stroke:#ffb34d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ar-pf-laes-tegning .aare-gloed{fill:none;stroke:#ff7a1a;stroke-opacity:.38;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ar-pf-laes-tegning .hus polygon{fill:#f2ece2;stroke:#1f2226;stroke-opacity:.6;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ar-pf-laes-tegning .hus .hus-tag{fill:#fbf8f2}
.ar-pf-laes-tekst{position:absolute;left:50%;bottom:clamp(40px, 9vh, 96px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;width:max-content;max-width:calc(100vw - 32px);
  transition:opacity .45s ease, transform .6s var(--ar-pf-ease, cubic-bezier(.16,1,.3,1))}
.ar-pf-laes[data-lander] .ar-pf-laes-tekst{opacity:0;transform:translate(-50%, 10px)}
.ar-pf-laes-hoved{display:flex;gap:14px;align-items:baseline}
.ar-pf-laes-lag{display:flex;gap:clamp(16px, 2.6vw, 40px);margin:0;padding:0;list-style:none}
.ar-pf-laes-lag li{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.38;transition:opacity .45s ease}
.ar-pf-laes-lag li[data-faerdig]{opacity:.7}
.ar-pf-laes-lag li[data-aktiv]{opacity:1}
.ar-pf-laes-lag b{font:400 15px/1.2 var(--ar-display);letter-spacing:-.01em;color:#0d1117}
.ar-pf-laes-lag small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5d6874}
.ar-pf-laes-maaler{position:relative;width:min(260px, 60vw);height:1px;background:rgba(13,17,23,.14);overflow:hidden}
.ar-pf-laes-maaler i{position:absolute;inset:0;background:#0d1117;transform-origin:left;transform:scaleX(0)}
html[data-tema="nat"] .ar-pf-laes-grund{background:radial-gradient(60% 55% at 50% 40%, #15253d 0%, #0b1428 56%, #070d18 100%)}
html[data-tema="nat"] .ar-pf-laes-tegning :is(.side,.omrids){stroke:#cfe3ec}
html[data-tema="nat"] .ar-pf-laes-tegning .toppen{fill:#56664a}
html[data-tema="nat"] .ar-pf-laes-tegning .hus polygon{fill:#d9d2c6;stroke:#cfe3ec;stroke-opacity:.4}
html[data-tema="nat"] .ar-pf-laes-lag b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-laes-lag small{color:#9fb2c3}
html[data-tema="nat"] .ar-pf-laes-maaler{background:rgba(159,228,242,.18)}
html[data-tema="nat"] .ar-pf-laes-maaler i{background:#9fe4f2}
@media (max-width:900px){
  .ar-pf-laes-lag{gap:14px}
  .ar-pf-laes-lag small{display:none}
}

/* ── night mode ("blåtryk") ───────────────────────────────────────────
   Arctonia: with the bar's toggle at night the island stays at night from
   the first chapter (verden/motor.ts), and the paper around it becomes the
   deep blue of a blueprint. The grounds are set here by hand; the colour
   rules after them are generated from this sheet's own rules (ink → ice, ink
   hairlines → cyan, white cards → night glass) and must be generated again
   when those change. The Dr. Asmaa pane keeps the platform's own colours,
   as a picture of the client's product. */
html[data-tema="nat"] .ar-pf-reserve{background:radial-gradient(55% 55% at 62% 44%, rgba(40,70,120,.35), transparent 70%), linear-gradient(180deg, #0b1428 0%, #070d18 100%)}
html[data-tema="nat"] .ar-pf-cases{background:linear-gradient(180deg, #0b1428 0%, #0a1322 40%, #08101d 100%)}
html[data-tema="nat"] .ar-pf-case-billede{background:#0f1b2d}
html[data-tema="nat"] .ar-pf-lq{background:linear-gradient(180deg, #08101d 0%, #0b1428 100%)}
html[data-tema="nat"] .ar-pf-hero-titel{color:#eef3f7}
html[data-tema="nat"] .ar-pf-hero-tekst{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-scroll{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-kapitel-titel{color:#eef3f7}
html[data-tema="nat"] .ar-pf-kapitel-tekst{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-link{color:#eef3f7;border-bottom:1px solid rgba(159,228,242,0.27)}
html[data-tema="nat"] .ar-pf-kapitel[data-kort] .ar-pf-kapitel-kort{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 16px 40px rgba(0,0,0,0.29)}
html[data-tema="nat"] .ar-pf-lag-tekst{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 10px 26px rgba(0,0,0,0.26)}
html[data-tema="nat"] .ar-pf-lag-tekst b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-lag-tekst small{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-hub-pille{color:#eef3f7;background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.16);box-shadow:0 8px 22px rgba(0,0,0,0.31)}
html[data-tema="nat"] .ar-pf-hub[data-hover] .ar-pf-hub-pille{border-color:#cfe0ea}
html[data-tema="nat"] .ar-pf-tur-kort{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 14px 34px rgba(0,0,0,0.31)}
html[data-tema="nat"] .ar-pf-tur-top{color:#eef3f7}
html[data-tema="nat"] .ar-pf-tur-tid{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-tur-kort ol{border-top:1px solid rgba(159,228,242,0.11)}
html[data-tema="nat"] .ar-pf-tur-kort li{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-tur-kort svg{border:1px solid rgba(159,228,242,0.18)}
html[data-tema="nat"] .ar-pf-tur-kort li[data-klar]{color:#eef3f7}
html[data-tema="nat"] .ar-pf-tur-kort li[data-klar] svg{border-color:#cfe0ea}
html[data-tema="nat"] .ar-pf-lead-kort{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 14px 34px rgba(0,0,0,0.31)}
html[data-tema="nat"] .ar-pf-lead-top{border-bottom:1px solid rgba(159,228,242,0.11)}
html[data-tema="nat"] .ar-pf-lead-top b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-lead-top span{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-lead-kort li{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-lead-kort li .ar-num{border:1px solid rgba(159,228,242,0.20)}
html[data-tema="nat"] .ar-pf-lead-kort li[data-klar]{color:#eef3f7}
html[data-tema="nat"] .ar-pf-lead-kort li[data-klar] .ar-num{border-color:#cfe0ea}
html[data-tema="nat"] .ar-pf-skinne{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 10px 28px rgba(0,0,0,0.26)}
html[data-tema="nat"] .ar-pf-skinne-tekst{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-skinne-tekst b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-case{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14)}
html[data-tema="nat"] a.ar-pf-case:hover{border-color:rgba(159,228,242,0.54);box-shadow:0 16px 40px rgba(0,0,0,0.29)}
html[data-tema="nat"] .ar-pf-case-billede{border-bottom:1px solid rgba(159,228,242,0.11)}
html[data-tema="nat"] .ar-pf-case b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-case-linje{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-case .ar-tekstknap{color:#eef3f7;border-bottom:1px solid rgba(159,228,242,0.27)}
html[data-tema="nat"] .ar-pf-case-snart{border-color:rgba(159,228,242,0.27);background:rgba(16,28,46,0.57)}
html[data-tema="nat"] .ar-pf-plade{border-bottom:1px dashed rgba(159,228,242,0.18)}
html[data-tema="nat"] .ar-pf-lq{border-top:1px solid rgba(159,228,242,0.07)}
html[data-tema="nat"] .ar-pf-lq-pointer{border-top:1px solid rgba(159,228,242,0.14)}
html[data-tema="nat"] .ar-pf-lq-pointer li{border-bottom:1px solid rgba(159,228,242,0.11)}
html[data-tema="nat"] .ar-pf-lq-pointer b{color:#eef3f7}
html[data-tema="nat"] .ar-pf-lq-pointer p{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-lq-figur figcaption{color:#a3b5c5}
html[data-tema="nat"] .ar-pf-skjult-maerke{color:#a3b5c5;background:rgba(16,28,46,0.72)}
@media (max-width:900px){
  html[data-tema="nat"] .ar-pf-hero-bund{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 14px 34px rgba(0,0,0,0.26)}
  html[data-tema="nat"] .ar-pf-kapitel,html[data-tema="nat"] .ar-pf-kapitel[data-side]{background:rgba(16,28,46,0.94);border:1px solid rgba(159,228,242,0.14);box-shadow:0 14px 34px rgba(0,0,0,0.26)}
}