/* forside.css — forsidens ark, FØRSTE del af tre: toppen af siden: hero, løbetekst, om os, priser, holdet bag og centrene.
   Flyttet ORDRET ud af `<style>`-blokken i `index.html` 07-10-2026 (kodekvalitet, trin E — ingen kildefil over 1.000
   kodelinjer) og delt ved to linjer. ⚠ RÆKKEFØLGEN ER MEKANIKKEN: de tre ark hentes efter hinanden, dér hvor blokken stod —
   efter `pulsn-site.css` og før `<noscript>`-reglen — så hver regel står samme sted i kaskaden som før. */
    /* ══ HVER RAA FARVE, DER ER TILBAGE PAA FORSIDEN, ER ET VALG — HER ER LISTEN (28-08-2026) ══
       MAALT: 37 raa farve-udtryk mod 474 token-opslag = 511 i alt, altsaa 92,8 % tema-baaren.
       (Talt paa filen med kommentarer skaaret vaek: «raa» = en hex eller en `rgb/rgba(` med tal
       i; `rgba(var(--x), .5)` er IKKE raa — det er kanal-formen og foelger stilretningen.)
       Skriv ALDRIG en ny hex her — reglerne staar i `assets/pulsn-theme.css` under
       «LAES DETTE FOERST». De 37 er FEM grupper, og hver enkelt staar nu ved NAVN:

       ① GOOGLE-LOGOET (12) — `#4285F4 · #34A853 · #FBBC05 · #EA4335`, gentaget i de tre
          anmeldelses-maerker. Det er GOOGLES farver, ikke vores, og de maa ALDRIG foelge vores
          stilretning. Kanonens undtagelse ⑤, andet led.

       ② FOTO-BEHANDLING (9) — de laa foer kun som linjenumre, og numrene var forlaengst
          forkerte. Nu ved navn og vaerdi:
             `.hero-overlay`            rgba(5,5,7,0.97) · rgba(5,5,7,0.72) · rgba(5,5,7,0.12)
                                        rgba(5,5,7,0.3)  · rgba(5,5,7,1)
             `.hero-overlay::after`     rgba(255,90,20,0.07)   — den varme flammegloed
             `.hero-portal-chip:hover`  #fff                   — blaek OVEN PAA fotoet
             `.team-photo-overlay`      rgba(8,8,8,0.8)
             `.cta-overlay`             rgba(8,8,8,0.82)
          GRUNDEN: alle ni ligger OVEN PAA ET BILLEDE. Et sloer er ikke en farve, det er en
          daempning — det, der goer en overskrift laesbar oven paa et foto. Fulgte det
          stilretningen, ville det paa de fire LYSE blive til en lys hinde over et moerkt
          motiv, og saa daemper det ingenting. Samme logik som kanonens skygge-undtagelse,
          spejlvendt.
          ⛔ OG DE KAN IKKE UDLEDES, HELLER IKKE HVIS MAN VILLE: der findes intet
          `--pulsn-bg-rgb` i temaet (maalt — kun `--pulsn-ink-rgb`, `--pulsn-red-rgb`,
          `--pulsn-nav-ink-rgb`, `--pulsn-portalsheet-ink-rgb`). Og `5,5,7` er i oevrigt ikke
          `--pulsn-bg` (`#080808`), saa der er ikke engang et tal at genbruge.

          ⚠⚠ MEN SLOERET SKJULER EN AEGTE FEJL, OG DEN SKAL IKKE GLEMMES, FORDI SLOERET ER LOVLIGT:
          **sloeret staar fast, men BLAEKKET OVEN PAA DET foelger temaet.** Maalt 28-08 i
          Chromium, heroens overskrift mod sloeret (foto antaget rgb(40,40,40) bag
          `brightness(.6)`):
                standard 20,24:1  ·  sand 20,24:1
                avispapir 1,14:1  ·  frost 1,22:1  ·  ler 1,24:1
          `.team-name` mod `.team-photo-overlay` maaler 1,09–1,18:1 de samme tre steder.
          Altsaa: paa de lyse stilretninger er forsidens stoerste overskrift praktisk talt
          USYNLIG. Det er husets kendte fejlform vendt om — foer vendte fladerne med temaet,
          mens blaekket stod fast; her staar fladen fast, mens blaekket vender.
          ⇒ RETTELSEN HOERER IKKE HER. Den kraever et «blaek paa et foto»-token i
          `assets/pulsn-theme.css` — praecis samme svar som navbjaelken og portal-arket fik
          (`--pulsn-nav-ink-rgb`, `--pulsn-portalsheet-ink-rgb`). Erklaeres parret i DENNE blok,
          vinder den over arket (F3-fejlen), og saa kan temaet aldrig saette det.
          ⚠ Og `.hero-portal-chip` viser bruddet i det smaa: dens HVILE-farve er
          `rgba(var(--pulsn-ink-rgb),0.65)` og vender med temaet, mens dens HOVER er `#fff` og
          ikke goer. Paa avispapir er hover derfor den eneste laesbare af de to tilstande.
          **Lav ikke hover om til et token for konsekvensens skyld** — det ville blot gøre den
          lige saa usynlig som resten. Begge skal have foto-blaekket, naar det findes.

       ③ SORTE SLOER OG SKYGGER (6) — `.hero-overlay`s to `rgba(0,0,0,…)`, `.legal-overlay`,
          `.portal-backdrop`, `.portal-sheet`s `box-shadow` og `#ci-modal`. Kanonens undtagelse
          ⑤, foerste led: en skygge i husets blaek ville LYSE paa en moerk bund.
          ⚠ FOR ARKET ER DEN BEGRUNDELSE FORAELDET — men konklusionen staar. Arket er ikke
          laengere altid moerkt: paa lys/avispapir/ler/frost henter `assets/pulsn-theme.css`
          (linje 982 · 1015 · 1049 · 1082) arkets flade fra sidens `--pulsn-bg-2`, saa skuffen
          er LYS de fire steder. Skyggen bliver alligevel staaende, af to MAALTE grunde:
          1) DEN LANDER IKKE PAA SIDEN. `.portal-backdrop` daekker hele skaermen med 74 % sort
             og males UNDER arket, saa skyggens bund er taeppet — ikke sidens flade. Maalt
             sammensat: 0,0,0 paa kontrast … 64,63,63 paa lys, altsaa moerk paa alle elleve.
             Skyggens eget trin har en oevre graense paa 17,88 dL* (lys, fuld alfa). Maaler man
             den mod sidens flade i stedet, lyder svaret 54,69 — og det tal er en MAALEFEJL,
             ikke en skygge. Et vaern, der leder efter for kraftige skygger, skal undtage denne
             ene OG skrive taeppet som dens bund; ellers melder det husets stoerste fund, og
             fundet findes ikke.
          2) DEN PEGER OPAD MED VILJE. Arket er en bundskuffe: nederste kant ligger uden for
             skaermen, og den eneste synlige kant er den OEVERSTE. Et almindeligt
             elevations-token kaster NEDAD og ville fjerne adskillelsen praecis dér, hvor den
             er den eneste, der er tilbage. Skift derfor ikke instrument her.

       ④ `var(--x, #hex)`-NOEDVEJE (9) — de syv i `:root` nedenfor plus `.portal-sheet`s
          `--pulsn-portalsheet-top/-bund`. Kanonens undtagelse ⑤, tredje led. ⚠ En fallback er
          en PAASTAND om tokenets vaerdi; staar der noget andet end tokenets faktiske vaerdi,
          lyver den praecis den dag arket ikke naar frem.
          ⚠⚠ OG EN FALLBACK KAN GOERE EN MAALING BLIND, UDEN AT NOGEN FAAR BESKED.
          `--pulsn-portalsheet-ink-rgb` er paa de fire lyse stilretninger et ALIAS — den peger
          paa sidens eget blaek-token i stedet for at staa som tre tal — og husets `kk_farve()`
          kan ikke foelge et kanal-alias: den svarer null. Forsidens 11 opslag paa det navn er
          derfor UMAALTE praecis dér, hvor arket lige er skiftet fra moerkt til lyst, altsaa
          dér hvor en kontrast-fejl er mest sandsynlig. De er ikke meldt groenne — de er slet
          ikke set. Rettelsen hoerer i temaet (skriv de fire som literale tripler), ikke her;
          men indtil da er «ingen fund paa forsiden» ikke det samme som «ingen fejl».

       ⑤ `--blue: #0e274f` er en token-DEFINITION med nul forbrugere (maalt i
          `public_theme_reach_test`). En definition er det ene sted, et raat tal hoerer hjemme.

       ✅ HVAD DER IKKE LAENGERE STAAR HER: den gamle liste havde en gruppe ④ «DET HARDKODEDE
       PORTAL-ARK (5) … den ene, der stadig VENTER paa en rettelse». Den rettelse ER landet:
       `assets/pulsn-theme.css` har nu `--pulsn-portalsheet-top/-bund/-ink-rgb`, og arket
       laeser dem. Kun noedvejene er tilbage, og de hoerer i ④. En note, der beskriver arbejde,
       som er gjort, faar den naeste til at lede efter en fejl, der ikke er der.
       ══════════════════════════════════════════════════════════════════════════════════════ */
    /* ─── SCROLL REVEAL ──────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
    /* ⚠ UDEN JAVASCRIPT VAR HELE SIDEN TOM (rettet 2026-08-19).
       38 elementer — prislisten, kontaktformularen, adresserne og sidefodens juridiske links —
       står på `opacity:0`, indtil `IntersectionObserver` sætter `.visible`. Er JS blokeret, eller
       kaster den ene store inline-blok en fejl FØR observeren rejses, ser den besøgende en
       fuldstændig tom side. Ikke en dårligere side: en TOM side.
       Animation er pynt; indholdet er ikke. Så pynten er nu det, der falder væk. */
    @media (scripting: none) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }
    /* ⚠ SELEN TIL LIVREMMEN STÅR NEDERST I `<head>` — `<noscript><style>` med samme regel.
       Den er der, fordi `@media (scripting: none)` også er den NYESTE af de to: ældre Safari og
       en del indlejrede browsere springer hele blokken over, og det er netop dér, JS oftest også
       fejler. De to kan stå sammen uden at slås — begge sætter den samme værdi.

       ⚠ MEN HULLET ER IKKE LUKKET, og det skal stå skrevet. Begge regler svarer på «JS er slået
       FRA». Ingen af dem svarer på «JS er slået TIL og kastede en fejl, før observeren blev
       rejst» — og det er den tilstand, en tastefejl i den store inline-blok faktisk giver.
       Resultatet er stadig en helt tom forside. Den eneste rigtige rettelse er at gøre `.visible`
       til STANDARDEN og lade JS fjerne den; det er en større ændring end denne og hører til et
       sted, hvor forsiden kan efterprøves bagefter. */
    /* Samme regel for dem, der har bedt om mindre bevægelse — de fik hidtil animationen alligevel,
       fordi den er den eneste vej til at blive synlig. */
    @media (prefers-reduced-motion: reduce) {
      .reveal { transition: none; }
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ─── HERO ───────────────────────────────────────────────── */
    #hero {
      position: relative;
      min-height: 100dvh;
      display: flex;
      /* ⛔ HER STOD `align-items: flex-end` MED `padding-top: 0`, OG DET VAR FEJLEN.
         I flexbox overflyder et for højt element MOD STARTKANTEN — altså opad — og med en FAST
         menubjælke ovenover og `overflow: hidden` her forsvandt de øverste linjer af overskriften
         helt. Symptomet er «nogen gange», fordi det kun sker, når indholdet er højere end
         skærmen: kort skærm, telefon på tværs, eller stor skrift.
         ⭐ Kuren er to ting, og begge skal være der: `flex-start` gør padding-kanten til
         startlinjen, så intet kan stige over den — og `margin-top: auto` på `.hero-content`
         (nedenfor) beholder den nederste placering, når der ER plads, og falder til nul, når der
         ikke er. En `auto`-margen slår `align-items`, så de to modsiger ikke hinanden. */
      align-items: flex-start;
      /* Bjælkens højde PLUS luft: uden de sidste pixels rører overskriften bjælkens underkant på
         en kort skærm. Luften koster intet på en høj skærm — `margin-top: auto` æder den. */
      padding: calc(var(--nav-h) + 20px) var(--gutter) 80px;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      /* WEBP MED FALDSKÆRM — samme aftale som <picture>, bare for et baggrundsbillede (G5).
         Heroen er IKKE et <img>, og det er præcis derfor den slap forbi den første omlægning:
         `<picture>` kan kun pakke et <img>, så den tungeste fil på forsiden (884.451 B) blev
         liggende urørt mens de ni andre blev lette.
         `image-set()` med `type()` giver samme kontrakt: forstår browseren erklæringen, vælger
         den WebP'en (163.152 B); gør den ikke, kasserer den HELE erklæringen og bruger `url()`-
         linjen ovenfor — altså nøjagtig den side vi leverer i dag. Rækkefølgen er derfor ikke til
         pynt: fallbacken SKAL stå først, ellers er der ingen faldskærm.
         Den samme dobbelt-erklæring står på selve elementet (`style=` på #heroBg), fordi en
         inline-stil vinder over dette regelsæt — rettes kun det ene sted, sker der intet. */
      /* ⚠ ROD-ABSOLUT (07-10-2026): en relativ adresse i et ark læses fra ARKETS mappe. `images/…` pegede på /images/, så længe
         reglen stod i `index.html`; herfra ville den pege på /assets/images/, som ikke findes (`doede_links_test` ④). */
      background-image: url('/images/tarp-pulsn-3.JPEG');
      background-image: image-set(url('/images/tarp-pulsn-3.webp') type('image/webp'),
                                  url('/images/tarp-pulsn-3.JPEG') type('image/jpeg'));
      background-size: cover;
      background-position: 40% center;
      transform: scale(1.04);
      transition: transform 9s ease-out;
      filter: brightness(0.6) contrast(1.15) saturate(0.75);
    }
    .hero-bg.loaded { transform: scale(1); }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 65% at 62% 52%, transparent 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.92) 88%),
        linear-gradient(to right, rgba(5,5,7,0.97) 0%, rgba(5,5,7,0.72) 28%, rgba(5,5,7,0.12) 55%),
        linear-gradient(to bottom, rgba(5,5,7,0.3) 0%, transparent 15%, transparent 55%, rgba(5,5,7,1) 100%);
    }
    /* Warm flame glow bleeds through on right side */
    .hero-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 45% 60% at 65% 50%, rgba(255,90,20,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 25% 40% at 88% 45%, rgba(var(--pulsn-red-rgb,255,28,53),0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: var(--max-w);
      width: 100%;
      /* `auto` foroven, 0 forneden: bundplaceringen bevares, når der er fri plads, og falder til
         nul, når indholdet fylder mere end skærmen — så det aldrig kan stige op under bjælken. */
      margin: auto auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: flex-end;
      /* ⛔ ARVEN VAR FEJLEN. `body{color:var(--white)}` → `--pulsn-ink`, som er NÆSTEN SORT på
         de fire lyse stilretninger — og h1 arvede den ned på et slør, der ALTID er mørkt.
         Målt: 1,00:1 på avispapir. Ikke svær at læse; samme farve. Hele tabellen står ved
         `--pulsn-foto-ink` i `assets/pulsn-theme.css`. */
      color: var(--pulsn-foto-ink);
    }
    .hero-left { min-width: 0; }
    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
    }
    .hero-eyebrow-line {
      width: 40px;
      height: 2px;
      background: var(--red);
    }
    .hero-eyebrow span {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--pulsn-foto-accent);
    }
    .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(72px, 10vw, 140px);
      font-weight: var(--pulsn-display-weight, 800);
      font-style: var(--pulsn-display-style, italic);
      line-height: 0.92;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      margin-bottom: 32px;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.35s forwards;
    }
    .hero-headline em {
      font-style: normal;
      color: var(--pulsn-foto-accent);
    }
    /* Lokation + ydelse INDE i H1 — Google læser den vigtigste overskrift som
       "Forandringen … Fitnesscenter i Bramming & Tarp". Bevidst synlig (ikke
       display:none): skjult tekst i en H1 er cloaking og kan koste placering. */
    .hero-h1-sub {
      display: block;
      margin-top: 18px;
      font-family: var(--font-body);
      font-size: clamp(var(--fs-md), 1.4vw, var(--fs-xl));
      font-style: normal;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(var(--pulsn-foto-ink-rgb), .72);
    }
    .hero-sub {
      font-size: var(--fs-2xl);
      color: rgba(var(--pulsn-foto-ink-rgb), .72);
      line-height: 1.7;
      max-width: 420px;
      margin-bottom: 40px;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.5s forwards;
    }
    .hero-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.65s forwards;
    }
    .hero-portal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.8s forwards;
    }
    .hero-portal-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 12px 14px;
      min-height: 44px;
      background: rgba(var(--pulsn-foto-ink-rgb), 0.06);
      border: 1px solid rgba(var(--pulsn-foto-ink-rgb), 0.12);
      border-radius: 20px;
      color: rgba(var(--pulsn-foto-ink-rgb), 0.65);
      font: 500 var(--fs-sm)/1 var(--font-body);
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .hero-portal-chip:hover {
      background: rgba(var(--pulsn-red-rgb,255,28,53),0.15);
      border-color: rgba(var(--pulsn-red-rgb,255,28,53),0.4);
      color: var(--pulsn-foto-ink);
    }
    .hero-portal-chip svg { flex-shrink: 0; opacity: 0.7; }
    .btn-hero-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      background: var(--red);
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--paa-brand);
      border-radius: 2px;
      transition: background 0.2s, gap 0.2s;
    }
    .btn-hero-primary:hover { background: var(--red-dark); gap: 14px; }
    .btn-hero-primary svg { width: 16px; height: 16px; }
    .btn-hero-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 0;
      font-size: var(--fs-md);
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(var(--pulsn-foto-ink-rgb), .72);
      border-bottom: 1px solid rgba(var(--pulsn-foto-ink-rgb), .66);
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-hero-ghost:hover { color: var(--pulsn-foto-ink); border-color: var(--pulsn-foto-ink); }

    .hero-right {
      display: flex;
      flex-direction: column;
      gap: 24px;
      justify-content: flex-end;
      padding-bottom: 8px;
    }
    .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.5s forwards;
    }
    .hero-stat {
      background: color-mix(in srgb, var(--bg-2) 80%, transparent);
      backdrop-filter: blur(8px);
      padding: 28px 24px;
    }
    .hero-stat-number {
      font-family: var(--font-display);
      font-size: 52px;
      font-weight:var(--pulsn-tal-weight, 800);
      line-height: 1;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .hero-stat-number span { color: var(--accent-ink, var(--red)); }
    .hero-stat-label {
      font-size: var(--fs-sm);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gray-2);
    }
    .hero-locations {
      display: flex;
      gap: 20px;
      opacity: 0;
      animation: fadeUp 0.9s var(--ease-out) 0.7s forwards;
    }
    .hero-location {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-md);
      color: rgba(var(--pulsn-foto-ink-rgb), .72);
    }
    .hero-location svg { color: var(--pulsn-foto-accent); flex-shrink: 0; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── MARQUEE TICKER ─────────────────────────────────────── */
    .marquee-section {
      background: var(--red);
      padding: 14px 0;
      overflow: hidden;
      border-top: 1px solid rgba(var(--pulsn-ink-rgb,255,255,255),0.1);
      border-bottom: 1px solid rgba(var(--pulsn-ink-rgb,255,255,255),0.1);
    }
    .marquee-track {
      display: flex;
      gap: 0;
      animation: marquee 30s linear infinite;
      white-space: nowrap;
    }
    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      padding: 0 32px;
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      /* TEKST PÅ BRANDFLADEN. `.marquee-section` fyldes med var(--red), men denne regel
         står i sin EGEN krop og selektoren staver ikke forælderen — derfor kunne hverken
         den direkte eller den arvede skanner i public_theme_reach_test se den, og den
         overlevede begge D1-rettelser. Målt som rå hvid .9: 2,54–5,10:1 (dårligst
         «skovnat», hvis accent er en lys koral). Med stilretningens EGET valg af blæk på
         brandfladen: 3,84–6,70:1. De 3,84 er husets kendte F3 (hvid på PULSN-rød) og
         kan først hæves når brandfarvens forgrund vælges — men ingen stilretning måler
         længere dårligere end sit eget valg. */
      color: var(--paa-brand);
    }
    .marquee-item::after {
      content: '';
      width: 4px;
      height: 4px;
      background: rgba(var(--pulsn-ink-rgb), 0.5);
      border-radius: 50%;
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─── ABOUT ──────────────────────────────────────────────── */
    #about {
      padding-top: clamp(60px, 8vw, 100px);
      padding-bottom: clamp(60px, 8vw, 100px);
      border-bottom: 1px solid var(--border);
    }
    .about-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-image-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .about-img {
      border-radius: 2px;
      overflow: hidden;
      aspect-ratio: 3/4;
    }
    .about-img:first-child { margin-top: 40px; }
    .about-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s var(--ease-out);
    }
    .about-img:hover img { transform: scale(1.04); }
    .about-text {}
    /* OVERSKRIFT: sektionens rubrik (versaler, linjehoejde 0,95, <em> i accent) — vaegten hoerer stilretningen til. */
    .about-title {
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 68px);
      font-weight: var(--pulsn-display-weight, 800);
      line-height: 0.95;
      text-transform: uppercase;
      margin-bottom: 28px;
    }
    .about-title em { font-style: normal; color: var(--accent-ink, var(--red)); }
    .about-desc {
      font-size: var(--fs-2xl);
      color: var(--gray-2);
      line-height: 1.8;
      margin-bottom: 40px;
    }
    .about-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .about-feature {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: var(--fs-lg);
      color: var(--gray-1);
    }
    .about-feature-icon {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--accent-ink, var(--red));
    }


    /* ─── PRICING ────────────────────────────────────────────── */
    #pricing {}
    .pricing-header {
      text-align: center;
      margin-bottom: 60px;
    }
    .pricing-header .section-tag { justify-content: center; }
    .pricing-header .section-sub { margin: 0 auto; text-align: center; }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .pricing-card {
      background: var(--bg);
      padding: 48px 40px;
      position: relative;
      transition: background 0.3s;
      display: flex;
      flex-direction: column;
    }
    .pricing-card.featured {
      background: var(--bg-3);
    }
    .pricing-card.featured::before {
      content: 'MEST POPULÆR';
      position: absolute;
      top: 0; left: 0; right: 0;
      background: var(--red);
      text-align: center;
      padding: 8px;
      font-size: var(--fs-2xs);
      font-weight: 700;
      letter-spacing: 0.2em;
    }
    .pricing-card.featured { padding-top: 60px; }
    .pricing-tier {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gray-2);
      margin-bottom: 20px;
    }
    .pricing-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 8px;
    }
    .pricing-currency {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--gray-2);
    }
    .pricing-amount {
      font-family: var(--font-display);
      font-size: 72px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .pricing-period {
      font-size: var(--fs-md);
      color: var(--gray-3);
    }
    .pricing-divider {
      height: 1px;
      background: var(--border);
      margin: 32px 0;
    }
    .pricing-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 40px;
    }
    .pricing-features li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: var(--fs-lg);
      color: var(--gray-1);
    }
    .pricing-features li.disabled { color: var(--gray-3); }
    .pricing-features li svg { flex-shrink: 0; width: 16px; height: 16px; }
    .pricing-features li.disabled svg { color: var(--gray-3); }
    .pricing-features li:not(.disabled) svg { color: var(--accent-ink, var(--red)); }
    .pricing-btn {
      display: block;
      width: 100%;
      margin-top: auto;
      padding: 14px;
      text-align: center;
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: 1px solid var(--border);
      border-radius: 2px;
      color: var(--white);
      transition: background 0.2s, border-color 0.2s;
    }
    .pricing-btn:hover { background: var(--bg-3); border-color: var(--gray-3); }
    .pricing-btn.featured-btn {
      background: var(--red);
      border-color: var(--accent-ink, var(--red));
    }
    .pricing-btn.featured-btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
    .pricing-note {
      text-align: center;
      margin-top: 32px;
      font-size: var(--fs-md);
      color: var(--gray-3);
    }

    /* ─── TEAM ───────────────────────────────────────────────── */
    #team { background: var(--bg-2); }
    .team-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 60px;
      gap: 40px;
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
    }
    .team-card {
      background: var(--bg-2);
      overflow: hidden;
      cursor: pointer;
    }
    .team-photo {
      aspect-ratio: 3/4;
      overflow: hidden;
      position: relative;
    }
    .team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s var(--ease-out);
      filter: grayscale(30%);
    }
    .team-card:hover .team-photo img {
      transform: scale(1.05);
      filter: grayscale(0%);
    }
    .team-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8,8,8,0.8) 0%, transparent 50%);
    }
    .team-info {
      padding: 24px;
      border-top: 1px solid var(--border);
    }
    /* OVERSKRIFT: medarbejderens navn — «Tine», «Daisy» (markup l.3539/3555/3572), ikke et tal. */
    .team-name {
      font-family: var(--font-display);
      font-size: var(--fs-4xl);
      font-weight: var(--pulsn-display-weight, 800);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .team-role {
      font-size: var(--fs-sm);
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-ink, var(--red));
      margin-bottom: 12px;
    }
    .team-certs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .team-cert {
      font-size: var(--fs-2xs);
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--gray-2);
      border: 1px solid var(--border);
      padding: 3px 8px;
      border-radius: 1px;
    }

    /* ─── LOCATIONS ──────────────────────────────────────────── */
    #locations {}
    .locations-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-top: 60px;
    }
    .location-card {
      background: var(--bg);
      overflow: hidden;
    }
    .location-image {
      aspect-ratio: 16/9;
      overflow: hidden;
    }
    .location-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s var(--ease-out);
    }
    .location-card:hover .location-image img { transform: scale(1.03); }
    .location-body {
      padding: 40px;
    }
    .location-name {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 8px;
    }
    .location-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent-ink, var(--red));
      margin-bottom: 28px;
    }
    .location-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      animation: pulse 2s infinite;
    }
    .location-badge-closed { color: var(--gray-3) !important; }
    .location-badge-closed::before { animation: none; }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.3); }
    }
    .location-details {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
    }
    .location-detail {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .location-detail-icon {
      color: var(--accent-ink, var(--red));
      margin-top: 2px;
      flex-shrink: 0;
    }
    .location-detail-content {}
    .location-detail-label {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gray-3);
      margin-bottom: 2px;
    }
    .location-detail-value {
      font-size: var(--fs-lg);
      color: var(--gray-1);
      line-height: 1.5;
    }
    .location-hours-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .location-hour-row {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-md);
      color: var(--gray-2);
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
    }
    .location-hour-row span:first-child { color: var(--gray-3); font-size: var(--fs-sm); }
    .location-hour-all { border-bottom: none; font-size: var(--fs-lg); }
    .location-hour-all span:last-child { color: var(--white); font-weight: 600; }
    .location-reception-block {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      padding: 10px 14px;
      background: rgba(var(--pulsn-ink-rgb), 0.04);
      border: 1px solid rgba(var(--pulsn-ink-rgb,255,255,255),0.09);
      border-radius: 8px;
      color: var(--gray-2);
    }
    .location-reception-block svg { flex-shrink: 0; color: var(--accent-ink, var(--red)); }
    .location-reception-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .location-reception-label { font-size: var(--fs-xs); color: var(--gray-3); text-transform: uppercase; letter-spacing: 0.08em; }
    .location-reception-hours { font-size: var(--fs-md); color: var(--white); font-weight: 500; }