/* 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; }
}/* ============================================================
   KONTAKT og BOOKING
   Målt i designbillederne. Desktop-kontakt er 993 px bred
   (logobredden rammer 16,6 % og indrykningen 2,05 %), booking
   802 px. Mobil er 375 px i begge tilfælde.
   ============================================================ */:root{
  --sheet-pad-b:  0px;                        /* ordmærkets p rører sidens underkant */
  --sheet-gap:    clamp(18px, 1.9vw, 30px);   /* overskrift → adresse */
  --social-b:     clamp(8px, .9vw, 16px);     /* links nede i underlængdens felt */
  --wordmark-gap: clamp(64px, 6vw, 96px);     /* knap → ordmærke */
  --fs-step:      clamp(27px, 2.52vw, 40px);  /* 01 02 03 */
  --field-gap:    clamp(10px, 1.05vw, 16px);
}/* Headerens baggrund hører til siden */.page-contact{ --header-bg: var(--black); }.page-book   { --header-bg: var(--stone); }/* Begge sider er mørke hele vejen igennem, så headeren er hvid.
   S'et er stadig kun sort eller hvidt — her altid hvidt. */.page-contact .site-header,
.page-book    .site-header{ color: var(--white); }.page-contact .logo,
.page-book    .logo{ color: var(--white); }.page-contact .nav__link::after,
.page-book    .nav__link::after{ background: var(--white); }.page-contact .lang-pill,
.page-book    .lang-pill{ border-color: var(--white); }.page-contact .lang-pill:hover,
.page-book    .lang-pill:hover{ background: var(--white); color: var(--black); }/* ---------- Fælles ramme ---------- */.sheet{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  color: var(--white);
  padding: calc(var(--top-pad-t) + var(--logo-h) + var(--title-gap))
           var(--page-x) var(--sheet-pad-b);
}.sheet--contact{ background: var(--black); }.sheet--book   { background: var(--stone); }/* Alt undtagen animationen ligger over den. .social holdes udenfor,
   fordi den skal blive ved med at være absolut placeret. */.sheet > *:not(.rings):not(.social){ position:relative; z-index:1; }/* Ordmærket i bunden — logoets egen SVG, skaleret ud i fuld bredde */.wordmark{
  margin-top:auto;
  padding-top: var(--wordmark-gap);
}.wordmark svg{ width:100%; height:auto; fill: var(--white); }/* På bookingsiden er ordmærket smallere end sidens indhold. Målt til
   66 % af indholdsbredden, forankret i venstre kant. */.page-book .wordmark svg{ width:66%; }/* Ordmærket i bunden er ikke headerens logo. Ordet skal blive stående,
   også når headeren er skrumpet ind til S'et under scroll. */body.nav-hidden .wordmark .logo__word{ opacity:1; }/* Instagram, LinkedIn, Privacy policy. De ligger bevidst oven på
   ordmærket, nede i højre hjørne, sådan som designet viser det. */.social{
  position:absolute;
  right: var(--page-x);
  bottom: var(--social-b);
  z-index:2;
  display:flex;
  gap: clamp(14px, 3.2vw, 34px);
  font-size: var(--fs-body);
}.social a:hover{ text-decoration:underline; }/* ---------- Pilleknap ---------- */.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.95em;
  padding:.42em 1.45em;
  border:1px solid currentColor;
  border-radius:999px;
  font-size: var(--fs-body);
  line-height:1.1;
  transition:background-color .2s ease, color .2s ease;
}.btn-pill:hover{ background: var(--white); color: var(--black); }.btn-pill--solid{
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  padding:.42em 2em;
}.btn-pill--solid:hover{ background: var(--black); color: var(--white); border-color: var(--white); }/* ============================================================
   KONTAKT
   ============================================================ */.contact__inner{
  display:grid;
  grid-template-columns: 1fr 24.5%;
  column-gap: 3%;
}.contact__main{ padding-left: var(--h1-indent); }.contact__title{
  margin:0;
  font-size: var(--fs-display);
  line-height:1.03;
}.contact__title a:hover{ text-decoration:underline; }.contact__details{ margin-top: var(--sheet-gap); }/* Linjeafstanden her er målt til 1,48 på desktop og 1,49 på mobil —
   løsere end brødteksten ellers er på sitet. */.contact__details p,
.person p{ margin:0; font-size: var(--fs-body); line-height:1.5; }.contact__details strong{ font-weight:700; }.person p:first-child{ font-weight:700; }.contact__details a:hover,
.person a:hover{ text-decoration:underline; }.contact__people{ margin-top: clamp(0px, 2.6vw, 40px); }.person + .person{ margin-top: 1.5em; }.contact__people .btn-pill{ margin-top: clamp(24px, 3.2vw, 48px); }/* ============================================================
   BOOKING
   ============================================================ */.book__inner{
  display:grid;
  grid-template-columns: 1fr 30.4%;
  column-gap: 11.5%;
  align-items:start;
}.book__main{ padding-left: var(--h1-indent); }.book__title{
  margin:0;
  max-width:8.2em;          /* holder brydningen efter "creative" */
  font-size: var(--fs-display);
  line-height:1.03;
}.book__text{
  margin: var(--sheet-gap) 0 0;
  max-width:31em;
}.book__text p{ margin:0; font-size: var(--fs-body); line-height:1.27; }.book__text p + p{ margin-top:1.2em; }/* De tre trin. Feltet er hvidt lagt oven på stone; blandingen er
   målt til 33 trin lysere end baggrunden. */.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2%;
  margin-top: clamp(28px, 3.6vw, 54px);
}.step{
  background: rgba(255,255,255,.28);
  padding:1.6em 1.4em;
}.step__num{
  display:block;
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: var(--fs-step);
  line-height:1.1;
}.step p{
  margin:.9em 0 0;
  font-size: var(--fs-body);
  line-height:1.4;
}/* ---------- Formularen ---------- */.book__form{ margin-top: clamp(36px, 4.5vw, 70px); }.book__form h2{
  margin:0 0 clamp(14px, 1.5vw, 24px);
  font-size: var(--fs-lead);
  line-height:1.2;
}.field{
  display:block;
  width:100%;
  min-height:2.42em;
  padding:.5em .8em;
  border:1px solid rgba(255,255,255,.5);
  border-radius:4px;
  background:transparent;
  color: var(--white);
  font-family:inherit;
  font-size: var(--fs-body);
  line-height:1.3;
}.field::placeholder{ color: rgba(255,255,255,.75); opacity:1; }.field:focus{ outline:none; border-color: var(--white); }.field--notes{ min-height:calc(3.9em + 1em); resize:none; }/* Etiketterne ligger mellem felterne i koden, så nabovælgeren (+) rammer
   ikke. Derfor sættes afstanden på felterne selv. */.book__form .field{ margin-top: var(--field-gap); }.book__form .field:first-of-type{ margin-top:0; }.book__form .field.field--notes{ margin-top:var(--field-gap); }.book__form .btn-pill{ margin-top: clamp(10px, 1.1vw, 18px); }/* ============================================================
   Mobil
   ============================================================ */@media (max-width: 767px){
  .contact__inner,
  .book__inner{ grid-template-columns:1fr; }
  .contact__main,
  .book__main{ padding-left:0; }
  .contact__people{ margin-top:1.5em; }

  .book__text p{ line-height:1.45; }   /* målt løsere på mobil end på desktop */
  .book__title{ max-width:none; }

  .btn-pill{ padding:.62em 2.3em; min-height:2.28em; }
  .btn-pill--solid{ padding:.62em 2.6em; }

  /* Større tal og mere luft over og under i kasserne */
  :root{ --fs-step: 34px; }
  .step{ padding:1.15em .75em; }

  /* Underlængdens felt — fra grundlinjen ned til p'ets bund — er 21,75 %
     af ordmærkets højde, altså kun cirka 22 px ved 375 px bredde. Rækken
     bliver liggende dernede, så p'et kan røre kanten, og teksten skrumper
     med bredden for at kunne være der. */
  .social{
    bottom: clamp(4px, 1.2vw, 12px);
    gap: clamp(10px, 2.6vw, 22px);
    font-size: clamp(10px, 2.6vw, 15px);
  }

  /* Ordmærket fylder hele bredden igen, også på bookingsiden */
  .page-book .wordmark svg{ width:100%; }
}.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}