/* Skrifttyper — lokale WOFF2-filer */
@font-face{
  font-family:"Grotta";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/Grotta-Light.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Grotta";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/Grotta-Regular.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Grotta";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/Grotta-Medium.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Grotta";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/Grotta-Semibold.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Grotta";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/Grotta-Bold.woff2?v=20260821-2") format("woff2");
}

@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-UltraLight.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Light.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Regular.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Medium.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Semibold.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Bold.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Heavy.woff2?v=20260821-2") format("woff2");
}
@font-face{
  font-family:"Nimbus Sans Novus";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("../fonts/NimbusSansNovus-Black.woff2?v=20260821-2") format("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.
   ============================================================ */

:root{
  /* --- Brandfarver (må ikke ændres) --- */
  --orange: #F46600;
  --beige:  #EAC798;
  --black:  #000000;
  --stone:  #8E8B86;
  --grey:   #E6E6E6;
  --white:  #FFFFFF;

  /* --- Layout --- */
  --page-x:      clamp(20px, 2.05vw, 34px);
  --logo-w:      clamp(78px, 16.6vw, 240px);
  --logo-h:      calc(var(--logo-w) / 3.325);   /* logoets bredde/højde-forhold */
  --h1-indent:   clamp(0px, 6.6vw, 110px);
  --top-pad-t:   clamp(12px, 1.83vw, 32px);
  --top-pad-b:   clamp(28px, 2.55vw, 44px);
  --title-gap:   clamp(60px, 4.78vw, 78px);
  --brand-top:   clamp(18px, 2.37vw, 40px);
  --brand-right: clamp(20px, 7.98vw, 130px);
  --num-bottom:  clamp(22px, 2.42vw, 40px);

  /* --- Typografi --- */
  --fs-nav:     clamp(13px, 1.39vw, 24px);
  --fs-body:    clamp(15px, 1.39vw, 22px);
  --fs-display: clamp(40px, 6.2vw, 92px);   /* h1, h2 og brandnavn er samme grad */
  --fs-lead:    clamp(20px, 2.4vw, 38px);
  --fs-brand:   clamp(28px, 6.2vw, 92px);
  --fs-num:     clamp(23px, 3.4vw, 52px);

  /* --- Om-sektionen --- */
  --about-pad-t:    clamp(56px, 10.1vw, 150px);
  --about-pad-b:    clamp(20px, 2.1vw, 34px);
  --about-gap-lead: clamp(32px, 5.1vw, 76px);
  --about-gap-body: clamp(18px, 2vw, 30px);
  --about-gap-btn:  clamp(18px, 1.9vw, 28px);
  --about-gap-more: clamp(56px, 7.6vw, 112px);

  /* --- Cases-sektionen --- */
  --work-pad-t:    clamp(64px, 7.2vw, 106px);
  --work-pad-b:    clamp(48px, 6.25vw, 92px);
  --work-head-gap: clamp(14px, 1.36vw, 20px);
  --work-cap-gap:  clamp(12px, 1.53vw, 23px);
  --work-logo-gap: clamp(44px, 6.3vw, 92px);
  --logo-cell-h:   clamp(34px, 4.3vw, 62px);
  --logo-row-gap:  clamp(20px, 2.3vw, 34px);
  --logo-scale:    1;
  --work-more-fs:  clamp(24px, 2.8vw, 42px);

  /* --- Footer --- */
  --fs-footer-mail: clamp(20px, 2.5vw, 38px);
  --footer-pad-t:   clamp(56px, 5.6vw, 84px);
  --footer-pad-b:   clamp(56px, 2.9vw, 46px);
  --footer-gap:     clamp(26px, 1.9vw, 30px);

  --nav-gap: 1.85em;
  --num-gap: 1.52em;
}

/* --- Reset --- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--grey);
  color: var(--black);
  font-family:"Nimbus Sans Novus", Helvetica, Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,svg{ display:block; max-width:100%; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }

.only-mobile{ display:none; }
.nb{ white-space:nowrap; }

.display{
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;                        /* Grotta Medium */
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ display:flex; flex-direction:column; min-height:100svh; }

/* ---------- Øverste, grå felt ---------- */
.hero__top{
  position:relative;
  overflow:hidden;
  background: var(--grey);
  /* Overskriften står, hvor den gjorde, da headeren lå i flowet */
  padding: calc(var(--top-pad-t) + var(--logo-h) + var(--title-gap)) var(--page-x) var(--top-pad-b);
}

/* ------------------------------------------------------------
   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.
   ------------------------------------------------------------ */
.rings{
  position:absolute;
  left:50%;                 /* animationen starter på midten … */
  bottom:0;
  width:50%;                /* … og løber ud til højre kant */
  aspect-ratio:1 / 1;       /* kilden er kvadratisk, centrum i nederste venstre hjørne */
  pointer-events:none;
}

/* ---------- Masthead ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding: var(--top-pad-t) var(--page-x);
  background: var(--header-bg, var(--grey));
  transition:background-color .35s ease, color .35s ease;
}
/* Helt i top: ingen baggrund, så ringanimationen kan ses bagved. */
body.at-top .site-header{ background-color:transparent; }

/* Kun ved scroll NEDAD: baggrunden forsvinder, menuen fader ud,
   og alene S'et bliver stående. Opad og i hvile er alt synligt. */
body.nav-hidden .site-header{ background-color:transparent; }
body.nav-hidden .nav{ opacity:0; pointer-events:none; }
body.nav-hidden .logo__word{ opacity:0; }

/* 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. */
body.nav-hidden.on-dark .site-header .logo{ color: var(--white); }

.nav, .logo__word, .logo{ transition:opacity .3s ease, color .3s ease; }

.masthead{
  display:flex;
  flex-wrap:nowrap;                       /* headeren må aldrig ombryde */
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(16px, 4vw, 60px);
}
.logo{
  flex:0 0 auto;
  width: var(--logo-w);
  color: var(--black);
}
.logo svg{ width:100%; height:auto; fill:currentColor; }

.nav{
  flex:0 1 auto;
  display:flex;
  align-items:center;
  gap: var(--nav-gap);
  font-size: var(--fs-nav);
  white-space:nowrap;
  padding-top:.55em;
}
/* Ingen bundpolstring: linjen ligger uden for boksen, så teksten
   selv bliver centreret lodret i menuen. */
.nav__link{ position:relative; }
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:2px;
  background: var(--black);
  transform:scaleX(0);
  transform-origin:right;          /* forlader mod højre … */
  transition:transform .35s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;           /* … og tegnes fra venstre */
}

/* Sprogvælger — pille med globus på desktop, EN | DK på mobil */
.lang-pill{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-left:calc(var(--nav-gap) * -0.5);   /* pillen sidder tættere, jf. designet */
  border:1px solid var(--black);
  border-radius:999px;
  padding:.28em .7em .3em .55em;
  line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
.lang-pill svg{ width:1.05em; height:1.05em; fill:currentColor; }
.lang-pill:hover{ background: var(--black); color: var(--white); }

/* ---------- Overskrift ---------- */
.hero__title{
  position:relative;
  z-index:1;
  margin: 0 0 0 var(--h1-indent);
  max-width:18ch;
  font-size: var(--fs-display);
  line-height:1.03;
}

/* ============================================================
   VIDEO-STAGE — 10 klip á 5 sekunder
   ============================================================ */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:46svh;
  overflow:hidden;
  background: var(--black);
}
.stage__slides{ position:absolute; inset:0; }
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .7s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide video,
.slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Ligger bag videoen og bliver kun synlig, hvis klippet ikke kan hentes */
.slide__placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing:-.01em;
  color: var(--white);
}
.slide:nth-child(3n+1) .slide__placeholder{ background: var(--black); }
.slide:nth-child(3n+2) .slide__placeholder{ background: var(--stone); }
.slide:nth-child(3n+3) .slide__placeholder{ background: var(--orange); }

/* Blødt slør i bunden, så tallene kan læses oven på video */
.stage::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
  pointer-events:none;
}

/* ---------- Brandnavn, øverst til højre ---------- */
.slide__brand{
  position:absolute;
  top: var(--brand-top);
  right: var(--brand-right);
  margin:0;
  font-size: var(--fs-brand);
  line-height:1;
  color: var(--white);
}

/* ---------- Tal-navigation ---------- */
.stage__index{
  position:absolute;
  left:0; right:0;
  bottom: var(--num-bottom);
  z-index:2;
  display:flex;
  gap: var(--num-gap);
  font-size: var(--fs-num);
  padding-inline: var(--page-x);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.stage__index::-webkit-scrollbar{ display:none; }
.stage__index button{
  flex:0 0 auto;
  font-size:1em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color: var(--white);
  transition:color .3s ease;
}
.stage__index button:hover{ color: var(--beige); }
.stage__index button[aria-current="true"]{ color: var(--beige); }

/* ============================================================
   OM SPREAD — sort sektion med den brede animation
   ============================================================ */
.about{
  position:relative;
  overflow:hidden;
  background: var(--black);
  color: var(--white);
  padding: var(--about-pad-t) var(--page-x) var(--about-pad-b);
  /* Fylder skærmen som hero. Indholdet ligger øverst, og
     "See our work" bliver skubbet ned i bunden af det ledige rum. */
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
/* Den brede animation dækker hele sektionen */
.about__anim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.about__inner{ position:relative; z-index:1; flex:1 1 auto; }

.about__title{
  margin:0 0 0 var(--h1-indent);
  font-size: var(--fs-display);
  line-height:1.03;
}
.about__col{
  margin: var(--about-gap-lead) 0 0 57%;
  max-width:34%;
}
.about__lead{
  margin:0;
  font-size: var(--fs-lead);
  line-height:1.14;
}
.about__text{
  margin-top: var(--about-gap-body);
  font-size: var(--fs-body);
  line-height:1.27;
}
.about__text p{ margin:0; }
.about__text p + p{ margin-top:1.26em; }

.about__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: var(--about-gap-btn);
  min-height:2em;
  padding:0 1.7em;
  border:1px solid var(--white);
  border-radius:999px;
  font-size: var(--fs-body);
  line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
.about__cta:hover{ background: var(--white); color: var(--black); }

/* "See our work" med pil ned */
.about__more{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5em;
  width:max-content;
  margin: var(--about-gap-more) auto 0;
  font-size: var(--fs-body);
  transition:opacity .2s ease;
}
.about__more:hover{ opacity:.6; }
.about__more svg{
  width:1.1em;
  height:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
}

/* ============================================================
   EXPLORE OUR WORK — cases og logovæg
   ============================================================ */
.work{
  min-height:100svh;
  background: var(--grey);
  color: var(--black);
  padding: var(--work-pad-t) var(--page-x) var(--work-pad-b);
}
.work__head{
  margin:0 0 var(--work-head-gap);
  font-size: var(--fs-lead);
  line-height:1.15;
}

/* 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. */
.work__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr) .593fr;
  gap:.94%;
  align-items:start;
}
.work__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);
}
.work__item:nth-child(2) .work__media{ background: var(--black); }
.work__item:nth-child(3) .work__media{ background: var(--stone); }

.work__caption{ margin-top: var(--work-cap-gap); font-size: var(--fs-body); line-height:1.27; }
.work__title{ margin:0; font-size:1em; font-weight:700; }
.work__desc{ margin:.3em 0 0; }

/* Det orange "View more"-kort */
.work__more{
  display:flex;
  align-items:center;
  aspect-ratio:102 / 253;
  padding:0 8.8%;
  background: var(--orange);
  color: var(--black);
  font-size: var(--work-more-fs);
  line-height:1.1;
  transition:filter .2s ease;
}
.work__more:hover{ filter:brightness(1.08); }

/* Logovæggen — alle mærker ligger i kvadratiske SVG'er,
   så hvert logo skaleres med sin egen faktor (--s) i cellen. */
.work__logos{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  column-gap: clamp(12px, 1.35vw, 26px);
  row-gap: var(--logo-row-gap);
  margin-top: var(--work-logo-gap);
}

/* På brede desktop-skærme får logovæggen mere luft mellem kolonnerne
   og lidt mere lodret afstand, så de 16 logoer står som et roligt 8×2-grid. */
@media (min-width: 1200px){
  .work__logos{
    column-gap: clamp(22px, 1.9vw, 38px);
    row-gap: clamp(28px, 2.6vw, 44px);
  }
}
.work__logos li{
  height: var(--logo-cell-h);
  display:grid;
  place-items:center;
}
.work__logos img{
  width: calc(var(--s) * var(--logo-scale) * 100%);
  height:auto;
  max-width:none;
  /* SVG'erne er beskåret til motivets kant, så place-items:center
     centrerer det faktiske logo — ikke et tomt kvadrat omkring det. */
}

/* ============================================================
   FOOTER — Curious? Let's talk.
   ============================================================ */
.footer{
  background: var(--black);
  color: var(--white);
  padding: var(--footer-pad-t) var(--page-x) var(--footer-pad-b);
}
.footer__title{
  margin:0;
  font-size: var(--fs-display);
  line-height:1.03;
}
.footer__title br{ display:none; }        /* kun to linjer på mobil */

.footer__cols{
  display:grid;
  grid-template-columns:71.5% 17.1% 1fr;
  margin-top: var(--footer-gap);
}
.footer__mail{
  display:block;
  margin:0 0 .35em;
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: var(--fs-footer-mail);
  line-height:1.2;
}
.footer__mail:hover{ text-decoration:underline; }

.footer__cols p{ margin:0; font-size: var(--fs-body); line-height:1.6; }
.footer__cols strong{ font-weight:700; }
.footer__person p:first-child{ font-weight:700; }
.footer__cols a:hover{ text-decoration:underline; }

/* ============================================================
   Mobil — følger det godkendte mobil-design
   ============================================================ */
@media (max-width: 620px){
  :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; }
}
@media (max-width: 359px){
  :root{ --page-x:16px; --logo-w:70px; --fs-nav:12px; --nav-gap:.95em; }
}

/* ============================================================
   Reduceret bevægelse — ringene står stille
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ============================================================
   ABOUT — sidespecifik
   Mål taget i designet ved 891 px indholdsbredde.
   ============================================================ */
:root{
  --intro-indent:  clamp(0px, 4.65vw, 78px);
  --intro-gap-top: clamp(40px, 10vw, 150px);
  --intro-pad-b:   clamp(56px, 14.5vw, 200px);
  --col-x:         53.5%;          /* højre tekstkolonne, begge sektioner */
  --col-w:         40%;
  --svc-indent:    clamp(0px, 2.1vw, 32px);
  --svc-pad-x:     clamp(16px, 1.55vw, 26px);
  --svc-pad-y:     clamp(18px, 2vw, 32px);
  --collab-indent: clamp(0px, 5.85vw, 96px);
}

/* Headerens baggrund hører til siden */
.page-about{ --header-bg: var(--beige); }

/* Aktivt menupunkt */
.nav__link.is-active{ font-weight:700; }

/* ---------- 1. Intro ---------- */
.intro{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background: var(--beige);
  color: var(--black);
  padding: calc(var(--top-pad-t) + var(--logo-h) + var(--intro-gap-top))
           var(--page-x) var(--intro-pad-b);
}
/* Samme ringanimation som på forsiden — her forankret i venstre side */
.rings--left{ left:0; }

.intro__inner{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1 1 auto; }
.intro__eyebrow{
  margin:0 0 .9em var(--intro-indent);
  font-size: var(--fs-lead);
  line-height:1.2;
}
.intro__title{
  margin:0 0 0 var(--intro-indent);
  max-width:12em;
  font-size: var(--fs-display);
  line-height:1.03;
}
.intro__body{
  margin: clamp(90px, 9vw, 140px) 0 0 var(--col-x);
  max-width: var(--col-w);
  font-size: var(--fs-body);
  line-height:1.33;
}
.intro__body p{ margin:0; }
.intro__body p + p{ margin-top:1.33em; }

/* ---------- 2. Services ---------- */
.services{
  position:relative;
  overflow:hidden;
  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) clamp(48px, 6.6vw, 100px);
}
.services__inner{ position:relative; z-index:1; }

.services__intro{ margin-left: var(--col-x); max-width: var(--col-w); }
.services__lead{ margin:0; font-size: var(--fs-lead); line-height:1.15; }
.services__text{ margin-top: clamp(14px, 1.7vw, 26px); font-size: var(--fs-body); line-height:1.33; }
.services__text p{ margin:0; }
.services__text p + p{ margin-top:1.33em; }

.services__head{
  margin: clamp(40px, 9.5vw, 140px) 0 clamp(10px, 1.1vw, 18px) var(--svc-indent);
  font-size: var(--fs-lead);
  line-height:1.15;
}

.services__list{ margin-left: var(--svc-indent); display:flex; flex-direction:column; gap:3px; }
.svc--black { background: var(--black);  color: var(--white); }
.svc--stone { background: var(--stone);  color: var(--white); }
.svc--orange{ background: var(--orange); color: var(--white); }

.svc__bar{
  display:grid;
  grid-template-columns:52% 1fr;
  align-items:start;
  width:100%;
  padding: var(--svc-pad-y) var(--svc-pad-x);
  text-align:left;
  color:inherit;
}
.svc__title{ font-size: var(--fs-lead); line-height:1.2; }

/* Skjult tekst: rækken går fra 0fr til 1fr, så kassen vokser blødt */
.svc__reveal{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s ease, opacity .3s ease;
}
.svc__text{
  overflow:hidden;
  font-size: var(--fs-body);
  line-height:1.33;
}
.svc.is-open .svc__reveal{ grid-template-rows:1fr; opacity:1; }

@media (hover: hover) and (min-width: 1025px){
  .svc:hover .svc__reveal{ grid-template-rows:1fr; opacity:1; }
}

/* ---------- 3. Collaboration ---------- */
.collab{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  color: var(--white);
  background: var(--black);
  padding: calc(var(--top-pad-t) + var(--logo-h) + clamp(28px, 5vw, 76px))
           var(--page-x) clamp(40px, 5vw, 76px);
}
.collab__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.collab__placeholder{
  display:grid;
  place-items:center;
  background: var(--stone);
  font-family:"Grotta", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: clamp(18px, 2vw, 30px);
  color: rgba(255,255,255,.7);
}
/* Blødt slør, så den hvide tekst kan læses oven på fotoet */
.collab::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, rgba(0,0,0,.42), rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.collab__inner{
  position:relative;
  z-index:1;
  margin-left: var(--collab-indent);
  max-width:34%;
  font-size: var(--fs-body);
  line-height:1.33;
}
.collab__title{
  margin:0 0 clamp(14px, 1.7vw, 26px);
  max-width:14em;
  font-size: var(--fs-lead);
  line-height:1.15;
}
.collab__inner p{ margin:0; }
.collab__inner p + p{ margin-top:1.33em; }

/* ============================================================
   ABOUT — tablet
   ============================================================ */
@media (max-width: 1024px){
  :root{ --col-x:46%; --col-w:48%; }
  .collab__inner{ max-width:46%; }
}

/* ============================================================
   ABOUT — mobil
   ============================================================ */
@media (max-width: 620px){
  :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; }
}