/* PrideService.dk — efter Brand Charter v0.2, i Milano-retningen.
   Selvhostede skrifter. Ingen eksterne kald. Ingen build. */

@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Charter 3.4 */
  --papir:#FAFAF8; --kalk:#F1F0EC; --asfalt:#14161A;
  --grus:#5A5F66; --kridt:#E3E1DC;
  --baker-dyb:#C0005E; --baker-pink:#E8006F; --volt:#007A5E;

  /* Progress-flaget — kun som sektionsflader og i Ruten */
  --f-sort:#000000; --f-brun:#613915; --f-lysebla:#5BCEFA; --f-lyserod:#F5A9B8;
  --f-hvid:#ECECEC; --f-rod:#E40303; --f-orange:#FF8C00; --f-gul:#FFED00;
  --f-gron:#008026; --f-bla:#24408E; --f-lilla:#732982;

  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --marg:24px;
  --luft:104px;

  --ruten:linear-gradient(90deg,
    #000000 0 9.0909%,  #613915 9.0909% 18.1818%, #5BCEFA 18.1818% 27.2727%,
    #F5A9B8 27.2727% 36.3636%, #ECECEC 36.3636% 45.4545%, #E40303 45.4545% 54.5454%,
    #FF8C00 54.5454% 63.6363%, #FFED00 63.6363% 72.7272%, #008026 72.7272% 81.8181%,
    #24408E 81.8181% 90.9090%, #732982 90.9090% 100%);
}
@media (min-width:860px){ :root{ --marg:64px; --luft:168px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }
}

body{
  margin:0; background:var(--papir); color:var(--asfalt);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:600; }
p,ul,ol,figure{ margin:0; }
img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }

/* ---------- Ruten (charter 3.2) ---------- */
/* Hårlinjen under Ruten afgrænser stregen mod fladen. Uden den forsvinder
   flagets gule felt i en gul sektion, og det hvide i en lys. Samme logik som
   charterets tilpasning af flagets hvid til #ECECEC. */
.ruten{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:6px; background-image:var(--ruten);
  border-bottom:1px solid rgba(20,22,26,.38);
}
.ruten-bund{ height:4px; background-image:var(--ruten); }

/* ---------- Struktur ---------- */
.sek{ padding-block:var(--luft); padding-inline:var(--marg); }
.ind{ max-width:1120px; margin-inline:auto; }
.tekst{ max-width:62ch; }

/* Sektionsflader. Tekstfarve følger med fladen — kontrol i én blok. */
.paa-papir{ background:var(--papir); color:var(--asfalt); }
.paa-gul{ background:var(--f-gul); color:var(--asfalt); }        /* 15,0:1 */
.paa-lyserod{ background:var(--f-lyserod); color:var(--asfalt); }/*  9,7:1 */
.paa-orange{ background:var(--f-orange); color:var(--asfalt); } /*  7,8:1 */
.paa-lysebla{ background:var(--f-lysebla); color:var(--asfalt); }/* 10,1:1 */
.paa-lilla{ background:var(--f-lilla); color:var(--papir); }     /*  8,9:1 */
.paa-asfalt{ background:var(--asfalt); color:var(--papir); }     /* 16,8:1 */
.paa-sort{ background:var(--f-sort); color:var(--papir); }

/* ---------- Typografi ---------- */
.mega{
  font-size:clamp(3.5rem,13vw,10.5rem);
  font-weight:700; line-height:.88; letter-spacing:-.035em;
  text-transform:uppercase; text-wrap:balance;
}
.stor{
  font-size:clamp(2.2rem,7vw,5rem);
  font-weight:700; line-height:.92; letter-spacing:-.03em;
  text-transform:uppercase; text-wrap:balance;
}
.h3{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.underafsnit{ margin-top:56px; }

.svar{ font-size:clamp(1.125rem,2.2vw,1.4rem); line-height:1.45; font-weight:500; }
.brod{ margin-top:16px; }
.brod + .brod{ margin-top:16px; }

.mrk{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.2;
  display:block; margin-bottom:24px;
}
.spec{
  font-family:var(--mono); font-size:.8125rem; line-height:1.5;
  margin-top:16px; opacity:.75;
}
.dmp{ opacity:.72; }
/* Pris står som tal, ikke som versaler — det skal kunne læses som et beløb. */
.pris{ font-family:var(--mono); font-size:.9375rem; line-height:1.5; margin-top:12px; font-weight:500; }

/* ---------- Ordmærke ---------- */
.top{
  position:fixed; inset:7px var(--marg) auto auto; z-index:40;
}
/* Fladt felt bagved, jf. charter 3.3: ordmærket må ikke ligge direkte på en
   flade, det ikke er testet mod. Papir virker over alle sektionsfarver. */
.ordmaerke{
  display:inline-block; font-size:1.0625rem; font-weight:600;
  letter-spacing:-.02em; text-decoration:none; line-height:1.15;
  color:var(--asfalt); background:var(--papir);
  padding:10px 14px 8px;
}
.ordmaerke .streg{ display:block; height:4px; margin-top:.25em; background-image:var(--ruten); }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(120px,18vh,200px) 64px; padding-inline:var(--marg);
  background:var(--f-gul);
  animation:flagskift 20s steps(1,end) infinite;
}
@keyframes flagskift{
  0%,24.9%   { background-color:#FFED00; }
  25%,49.9%  { background-color:#FF8C00; }
  50%,74.9%  { background-color:#F5A9B8; }
  75%,100%   { background-color:#5BCEFA; }
}
.hero-sub{ margin-top:32px; max-width:46ch; font-size:clamp(1.0625rem,2vw,1.3rem); line-height:1.45; }

/* Nav-chips — Milano-greb. Eneste afrundede element på siden. */
.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:48px 0 0;
}
.chip{
  display:inline-block; padding:7px 16px; border-radius:999px;
  border:1.5px solid var(--asfalt); background:transparent; color:var(--asfalt);
  font-size:.9375rem; font-weight:600; text-decoration:none; line-height:1.4;
  transition:background-color .15s, color .15s;
}
.chip:hover,.chip:focus-visible{ background:var(--asfalt); color:var(--papir); }
.chip-fyldt{ background:var(--asfalt); color:var(--papir); }
.chip-fyldt:hover,.chip-fyldt:focus-visible{ background:transparent; color:var(--asfalt); }

/* ---------- Produkter ---------- */
.vare{ margin-top:var(--luft); }
.vare:first-of-type{ margin-top:64px; }
.vare-txt{ max-width:52ch; }
.vare-num{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; opacity:.6; display:block; margin-bottom:12px;
}
figure.foto{ margin-top:32px; }
figure.foto img{ width:100%; object-fit:cover; }
.foto-h{ aspect-ratio:4/3; }
.foto-p{ aspect-ratio:3/4; max-width:620px; }
figcaption{
  font-family:var(--mono); font-size:.75rem; line-height:1.5;
  margin-top:12px; opacity:.7;
}

@media (min-width:900px){
  .vare{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
  .vare-omvendt .vare-txt{ order:2; }
  .vare-omvendt figure.foto{ order:1; }
  figure.foto{ margin-top:0; }
}

/* Enkeltstående foto uden tekstspalte ved siden af. Efter media-blokken,
   så margin-top ikke nulstilles af figure.foto. */
figure.foto-alene{ margin-top:var(--luft); max-width:620px; }

/* ---------- FAQ ---------- */
.faq{ margin-top:64px; border-top:2px solid currentColor; }
.faq-p{ border-bottom:2px solid currentColor; padding-block:28px; }
.faq-q{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.faq-a{ margin-top:12px; max-width:62ch; }

/* ---------- Referencer ---------- */
.ref-net{ margin-top:64px; display:grid; gap:40px; }
@media (min-width:820px){ .ref-net{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; } }
@media (min-width:1100px){ .ref-net{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px; } }

/* ---------- Kontakt ---------- */
/* Formularen er fjernet; adressen er selve handlingen og sættes derefter. */
.mail{ margin-top:56px; }
.mail a{
  display:inline-block; max-width:100%;
  font-size:clamp(1.4rem,5.2vw,3rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.1; overflow-wrap:anywhere;
  text-decoration-thickness:2px; text-underline-offset:.14em;
}
.mail a:hover{ text-decoration-thickness:4px; }

/* Caseliste på forsiden — beskrivende ankertekst, store klikmål. */
.cases{ list-style:none; padding:0; margin:48px 0 0; max-width:62ch; border-top:2px solid currentColor; }
.cases li{ border-bottom:2px solid currentColor; }
.cases a{
  display:block; padding-block:18px; text-decoration:none;
  font-weight:600; font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.3;
}
.cases a:hover,.cases a:focus-visible{ text-decoration:underline; }

/* ---------- Tidslinje ---------- */
/* Farvebåndet er Ruten brugt som information: grøn når der er god tid,
   gul når det strammer, rød ved fristen, lilla på selve dagen. */
.tidslinje{ list-style:none; padding:0; margin:56px 0 0; display:grid; gap:24px; }
.tidslinje li{ padding-top:20px; border-top:8px solid var(--f, currentColor); }
.tidslinje .tid{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; display:block; margin-bottom:10px; opacity:.7;
}
.tidslinje h3{ margin-bottom:8px; }
.tidslinje p{ font-size:.9375rem; line-height:1.55; max-width:34ch; }
@media (min-width:820px){
  .tidslinje{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
  .tidslinje li{ padding-right:32px; }
}

/* ---------- To spalter: vi / I ---------- */
.deling{ margin-top:56px; display:grid; gap:40px; }
@media (min-width:820px){ .deling{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; } }
.deling h3{ margin-bottom:16px; }
.deling ul{ list-style:none; padding:0; margin:0; border-top:2px solid currentColor; }
.deling li{
  border-bottom:2px solid currentColor; padding-block:12px;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Valg af enhed ---------- */
.enheder{ margin-top:56px; display:grid; gap:32px; }
@media (min-width:820px){ .enheder{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } }
.enhed{ border-top:8px solid var(--f, currentColor); padding-top:20px; }
.enhed h3{ margin-bottom:10px; }
.enhed p{ font-size:.9375rem; line-height:1.55; }
.enhed .spec{ margin-top:14px; }

/* ---------- Case-sider ---------- */
/* Lavere hero end forsiden: en case skal vise indhold med det samme. */
.case-hero{
  padding-block:clamp(120px,16vh,180px) clamp(56px,7vw,88px);
  padding-inline:var(--marg);
}
.case-hero .ind{ max-width:1120px; }
.case-h1{
  font-size:clamp(2.4rem,8vw,5.5rem);
  font-weight:700; line-height:.94; letter-spacing:-.03em;
  text-transform:uppercase; text-wrap:balance;
}
.krumme{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:24px;
}
.krumme a{ text-decoration:underline; }
.krumme span[aria-current]{ opacity:.65; }

.leverance{
  list-style:none; padding:0; margin:32px 0 0;
  display:grid; gap:0; max-width:52ch;
  border-top:2px solid currentColor;
}
.leverance li{
  border-bottom:2px solid currentColor; padding-block:14px;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em;
  text-transform:uppercase;
}

.case-net{ margin-top:var(--luft); display:grid; gap:40px; }
@media (min-width:900px){ .case-net{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; } }

.videre{ margin-top:var(--luft); }
.videre .mail{ margin-top:32px; }

/* ---------- Sprog + footer ---------- */
/* Sprogskift er et navigationsmål, ikke et inline-link. Charter 6: 44 × 44 px. */
.sprog{ margin-top:32px; font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em; }
.sprog a,.sprog span[aria-current],
.kolofon a[hreflang],.kolofon span[aria-current]{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:8px;
}
.sprog a{ text-decoration:underline; }
.sprog a:first-child,.sprog span[aria-current]:first-child{ padding-left:0; }

footer{ background:var(--f-sort); color:var(--papir); }
.kolofon{
  font-family:var(--mono); font-size:.75rem; line-height:1.8;
  padding:40px var(--marg); max-width:1120px; margin-inline:auto;
}
.kolofon a{ text-decoration:underline; }

/* Skip-link */
.spring{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--asfalt); color:var(--papir); padding:12px 20px;
  font-weight:600; text-decoration:none;
}
.spring:focus{ left:var(--marg); top:16px; }