/* Skrifttyper — undersat til latin-1 og pakket som woff2 *//* ============================================================
   SPREAD — Forside
   Farver: brand guide s. 46. Display: Grotta Medium.
   Brødtekst/navigation: Nimbus Sans Novus Regular.
   Alle mål er kalibreret mod designet ved 1365 px bredde.
   ============================================================ *//* --- Reset --- *//* ============================================================
   HERO
   ============================================================ *//* ---------- Øverste, grå felt ---------- *//* ------------------------------------------------------------
   RINGE
   Jeres animation, looper konstant. Kilden er kvadratisk med
   centrum i nederste venstre hjørne. Den forankres derfor med
   venstre kant på 50 % og bunden i bund, så ringene udgår fra
   midten af sektionen og breder sig mod højre.
   ------------------------------------------------------------ *//* ---------- Masthead ---------- *//* Helt i top: ingen baggrund, så ringanimationen kan ses bagved. *//* Kun ved scroll NEDAD: baggrunden forsvinder, menuen fader ud,
   og alene S'et bliver stående. Opad og i hvile er alt synligt. *//* S'et er sort som udgangspunkt og skifter til hvidt, når det står
   frit oven på et mørkt afsnit. Aldrig andre farver. *//* Ingen bundpolstring: linjen ligger uden for boksen, så teksten
   selv bliver centreret lodret i menuen. *//* Sprogvælger — pille med globus på desktop, EN | DK på mobil *//* ---------- Overskrift ---------- *//* ============================================================
   VIDEO-STAGE — 10 klip á 5 sekunder
   ============================================================ *//* Ligger bag videoen og bliver kun synlig, hvis klippet ikke kan hentes *//* Blødt slør i bunden, så tallene kan læses oven på video *//* ---------- Brandnavn, øverst til højre ---------- *//* ---------- Tal-navigation ---------- *//* ============================================================
   OM SPREAD — sort sektion med den brede animation
   ============================================================ *//* Den brede animation dækker hele sektionen *//* "See our work" med pil ned *//* ============================================================
   EXPLORE OUR WORK — cases og logovæg
   ============================================================ *//* Kortrækken: tre cases plus det orange kort.
   Kolonnebredderne er låst i designets forhold (172 : 102),
   så kortenes højder følges ad uanset skærmbredde. *//* Det orange "View more"-kort *//* Logovæggen — alle mærker ligger i kvadratiske SVG'er,
   så hvert logo skaleres med sin egen faktor (--s) i cellen. *//* ============================================================
   FOOTER — Curious? Let's talk.
   ============================================================ *//* kun to linjer på mobil *//* ============================================================
   Mobil — følger det godkendte mobil-design
   ============================================================ *//* ============================================================
   Reduceret bevægelse — ringene står stille
   ============================================================ *//* ============================================================
   ABOUT — sidespecifik
   Mål taget i designet ved 891 px indholdsbredde.
   ============================================================ *//* Headerens baggrund hører til siden *//* Aktivt menupunkt *//* ---------- 1. Intro ---------- *//* Samme ringanimation som på forsiden — her forankret i venstre side *//* ---------- 2. Services ---------- *//* Skjult tekst: rækken går fra 0fr til 1fr, så kassen vokser blødt *//* ---------- 3. Collaboration ---------- *//* Blødt slør, så den hvide tekst kan læses oven på fotoet *//* ============================================================
   ABOUT — tablet
   ============================================================ *//* ============================================================
   ABOUT — mobil
   ============================================================ *//* ============================================================
   CASES — sidespecifik
   Mål taget i designbillederne. Desktop-billedet er 512 px bredt
   og har --page-x på 10,5 px, altså skala 0,375 (viewport ~1365).
   Mobilbilledet er 249 px bredt med 12 px indrykning, altså
   skala 0,781 og viewport 320 px, hvor --page-x er 16.
   ============================================================ */:root{
  --case-col-gap:    1.2%;                      /* målt 1,22 % desktop, 1,11 % mobil */
  --case-row-gap:    clamp(32px, 4.7vw, 64px);
  --case-head-gap:   clamp(31px, 5vw, 68px);    /* overskrift → filtre */
  --case-filter-gap: clamp(20px, 2.7vw, 37px);  /* filtre → grid */
  --case-cap-gap:    clamp(8px, 1.2vw, 17px);   /* billede → billedtekst */
  --case-pill-gap:   clamp(4px, .58vw, 8px);
  /* Filterteksten er sin egen grad. Målt i designet er den 1,22 gange
     billedteksten på desktop, men kun 0,67 gange på mobil — ellers kan
     "Employer Branding" ikke være i en tredjedels bredde ved 320 px. */
  --fs-filter:       clamp(10px, 1.67vw, 26px);
}/* Headerens baggrund hører til siden, ikke sektionen */.page-cases{ --header-bg: var(--grey); }.cases{
  min-height:100svh;
  background: var(--grey);
  color: var(--black);
  padding: calc(var(--top-pad-t) + var(--logo-h) + clamp(32px, 5.6vw, 84px))
           var(--page-x) var(--work-pad-b);
}.cases__head{
  margin:0 0 var(--case-head-gap);
  font-size: var(--fs-display);
  line-height:1.03;
}/* ---------- Filtre ----------
   Pillerne er lige brede uanset ordlængde. Det er målt begge
   steder: fem lige kolonner på desktop, tre på mobil, hvor den
   sidste række kun har to piller og ikke strækkes ud. */.filters{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap: var(--case-pill-gap);
  margin-bottom: var(--case-filter-gap);
}.filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.15em;                /* målt 2,19 em desktop, 2,07 em mobil */
  padding:.25em .5em;
  border:1px solid var(--black);
  border-radius:999px;
  font-size: var(--fs-filter);
  line-height:1.1;
  text-align:center;
  transition:background-color .2s ease, color .2s ease;
}.filter:hover{ background: var(--black); color: var(--white); }.filter.is-active{ background: var(--black); color: var(--white); }/* ---------- Griddet ---------- */.cases__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap: var(--case-col-gap);
  row-gap: var(--case-row-gap);
  align-items:start;
}.case[hidden]{ display:none; }.case > a{ display:block; color:inherit; }/* Samme billedformat som kortene på forsiden */.case__media{
  aspect-ratio:172 / 253;
  display:grid;
  place-items:center;
  background: var(--stone);
  color: var(--white);
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: clamp(15px, 1.6vw, 24px);
}.case:nth-child(3n/**/+2) .case__media{ background: var(--black); }img.case__media{ width:100%; height:100%; object-fit:cover; }.case__caption{
  margin-top: var(--case-cap-gap);
  font-size: var(--fs-body);
  line-height:1.27;
}/* Linjeafstanden er ens hele vejen ned — ingen ekstra luft mellem
   navn, beskrivelse og tags. Sådan er den målt i begge designbilleder. */.case__caption p{ margin:0; }.case__title{ margin:0; font-size:1em; font-weight:700; line-height:inherit; }.case__tags{ color: var(--stone); }.cases__empty{
  margin: clamp(24px, 3vw, 44px) 0 0;
  font-size: var(--fs-body);
}.cases__empty[hidden]{ display:none; }/* ============================================================
   CASES — mobil
   ============================================================ */@media (max-width: 620px){
  .cases__grid{ grid-template-columns:repeat(2, 1fr); }
  .filters{ grid-template-columns:repeat(3, 1fr); }
}

/* ---------- Danske SEO-indlæg ----------
   Vises kun på /da/cases/ og bruger samme pill-hover som case-filtrene. */
.case-post-links{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--case-pill-gap);
  margin-top:clamp(72px,8.5vw,126px);
}
.case-post-links .filter{
  width:100%;
  min-height:2.15em;
  font-size:clamp(12px,1.03vw,16px);
  text-decoration:none;
  white-space:normal;
}
@media (max-width:900px){
  .case-post-links{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:620px){
  .case-post-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:clamp(52px,14vw,76px);
  }
}