/* 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
   ============================================================ */@media (max-width: 767px){
  :root{
    --page-x: 20px;
    --logo-w: 78px;
    --h1-indent: 0px;
    --top-pad-t: 12px;
    --top-pad-b: 60px;
    --title-gap: 60px;
    --brand-right: 20px;
    --num-bottom: 22px;
    --fs-nav: 13px;
    --fs-h1: 27px;
    --fs-brand: 34px;
    --fs-num: 23px;
    --nav-gap: 1.2em;
    --num-gap: 1.06em;
    --fs-lead: 29px;
    --fs-body: 15px;
    /* Den længste låste linje er "Spread is a full-service" på 10,37 em.
       Graden følger derfor bredden, så overskrifterne altid er så store,
       som de kan være uden at blive beskåret. */
    --fs-display: min(calc(9.2vw - 3.7px), 40px);
    --about-pad-t: 56px;
    --about-gap-lead: 46px;
    --about-gap-body: 26px;
    --about-gap-btn: 30px;
    --about-gap-more: 56px;

    --work-pad-t: 52px;
    --work-pad-b: 48px;
    --work-head-gap: 20px;
    --work-cap-gap: 12px;
    --work-logo-gap: 44px;
    --work-more-fs: 32px;
    --logo-cell-h: 52px;
    --logo-row-gap: 26px;
    --logo-scale: .9;

    --fs-footer-mail: 20px;
    --footer-pad-t: 48px;
    --footer-pad-b: 60px;
    --footer-gap: 26px;
  }
  .only-desktop{ display:none; }
  .only-mobile{ display:inline; }
  .footer__title{ font-size:48px; line-height:1; }   /* bevidst større end de øvrige */
  .footer__title br{ display:inline; }
  .footer__cols{ grid-template-columns:1fr; row-gap:30px; }
  .about__title{ margin-left:0; }
  .about__col{ margin-left:0; max-width:none; }
  .about__lead{ line-height:1.05; }
  .about__text{ line-height:1.5; }
  .about__text p + p{ margin-top:1.27em; }

  /* Knappen er et understreget link på mobil */
  .about__cta{
    align-self:flex-start;
    min-height:0;
    padding:0 0 .3em;
    border:0;
    border-bottom:1px solid currentColor;
    border-radius:0;
  }
  .about__cta:hover{ background:none; color:var(--white); opacity:.7; }

  /* Cases: to kort pr. række, logoer tre pr. række */
  .work__head{ max-width:55%; }
  .work__grid{ grid-template-columns:repeat(2, 1fr); gap:1.48%; }
  .work__more{
    aspect-ratio:172 / 253;
    align-items:flex-end;
    padding:0 8.4% 8%;
  }
  .work__logos{ grid-template-columns:repeat(3, 1fr); }
  /* Mobil viser 15 mærker i fem rene rækker */
  .work__logos li:last-child{ display:none; }
  .nav{ padding-top:.2em; }
  .hero__title{ max-width:none; }
}/* ============================================================
   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
   ============================================================ */@media (max-width: 767px){
  :root{
    --intro-indent:0px;
    --intro-gap-top:44px;
    --intro-pad-b:56px;
    --col-x:0%;
    --col-w:none;
    --svc-indent:0px;
    --svc-pad-x:20px;
    --svc-pad-y:26px;
    --collab-indent:0px;
  }
  .intro__title{ max-width:none; }
  .intro__body{ margin: clamp(40px, 12vw, 70px) 0 0; max-width:none; }

  .services__intro{ margin-left:0; max-width:none; }
  .services__head{ margin-left:0; }
  .services__list{ margin-left:0; gap:6px; }
  .svc__bar{ grid-template-columns:1fr; }
  .svc.is-open .svc__text{ display:block; padding-top:1.1em; }

  .collab{ justify-content:flex-start; }
  .collab__inner{ margin-left:0; max-width:none; }
  .collab__title{ max-width:none; }
}/* Light-snittet bruges til datoen *//* ============================================================
   PRIVACY & COOKIES POLICY
   Baggrunden står stille, teksten glider hen over den.
   ============================================================ */:root{
  --policy-gap-h1: clamp(28px, 3.4vw, 52px);
  --policy-gap-h2: clamp(40px, 4.6vw, 70px);
  --policy-gap-h3: clamp(22px, 2.4vw, 36px);
}.page-privacy{ --header-bg: var(--black); background: var(--black); }/* Hele siden er mørk, så headeren er hvid — som på kontakt- og bookingsiden */.page-privacy .site-header{ color: var(--white); }.page-privacy .logo{ color: var(--white); }.page-privacy .nav__link::after{ background: var(--white); }.page-privacy .lang-pill{ border-color: var(--white); }.page-privacy .lang-pill:hover{ background: var(--white); color: var(--black); }.policy{
  position:relative;
  min-height:100svh;
  background: var(--black);
  color: var(--white);
  padding: calc(var(--top-pad-t) + var(--logo-h) + clamp(32px, 5.6vw, 84px))
           var(--page-x) clamp(56px, 7vw, 110px);
}/* Animationen er fastlåst til ruden i fuld bredde, så den bliver
   stående, mens teksten scroller forbi. */.policy__anim{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  object-fit:cover;
  object-position:center center;
  transform:none;
  z-index:0;
  pointer-events:none;
}.policy__inner{
  position:relative;
  z-index:1;
  max-width:44em;
  margin-inline:auto;      /* spalten står midt på siden, teksten er venstrestillet */
  font-size: var(--fs-body);
  line-height:1.6;
}.policy__title{
  margin:0;
  font-size: var(--fs-display);
  line-height:1.03;
}.policy__date{
  margin:.6em 0 0;
  font-weight:300;
}.policy__inner h2{
  margin: var(--policy-gap-h2) 0 0;
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: var(--fs-lead);
  line-height:1.15;
}.policy__inner h3{
  margin: var(--policy-gap-h3) 0 0;
  font-size:1em;
  font-weight:700;
  line-height:inherit;
}.policy__inner p{ margin: 1em 0 0; }.policy__inner h2 + p,
.policy__inner h3 + p{ margin-top:.5em; }.policy__inner > p:first-of-type{ margin-top: var(--policy-gap-h1); }.policy__inner ul{
  margin:.6em 0 0;
  padding:0;
  list-style:none;
}.policy__inner li{ position:relative; padding-left:1.1em; }.policy__inner li::before{
  content:"•";
  position:absolute;
  left:0;
}.policy__inner li + li{ margin-top:.25em; }.policy__inner a{ text-decoration:underline; }.policy__inner a:hover{ text-decoration:none; }@media (max-width: 767px){
  .policy__inner{ max-width:none; }
}
@supports not (height:100dvh){
  .policy__anim{height:100vh}
}