/* ============================================================
   donebynoon.club — style.css
   Ren statisk CSS. Bygges sektion for sektion.
   Indhold pt.: variabler, font-face, menu, load-koreografi, hero.
============================================================ */

/* ---------- Font: Perfectly Vintages (KUN logo/display) ---------- */
@font-face {
  font-family: "Perfectly Vintages";
  /* Filen er reelt en TrueType-font (hedder bare .otf) — derfor truetype-hint */
  src: url("assets/perfectly-vintages.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variabler ---------- */
:root {
  --black: #0a0a0a;
  --white: #fafafa;
  --grey-dark: #2a2a2a;
  --grey-mid: #6a6a6a;
  --grey-light: #d4d4d4;

  /* Rolig, tung easing — skal foeles dyrt, ikke hurtigt */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Perfectly Vintages", serif; /* KUN logo */
  --font-sans: "Manrope", sans-serif;          /* overskrifter + broedtekst */
  --font-mono: "Geist Mono", monospace;        /* accent: menu, labels, tal, knapper, microcopy */
}

/* ---------- Reset / grundlag ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Ingen vandret swipe-navigation / rubber-band fra to-finger-gestus */
  overscroll-behavior-x: none;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Ingen vandret scroll/hop */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* ---------- Accent-utility: label-stil (Geist Mono) ----------
   Til smaa, praecise tekstelementer: kategori-maerkater, korte label-
   overskrifter, tal m.m. Brug som krydderi — aldrig til broedtekst. */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--grey-mid);
}


/* ============================================================
   FAST MENU
============================================================ */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 2rem;
  color: var(--white);
  text-transform: lowercase;
  /* Glider ind sammen med hero (fase 7) */
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.9s var(--ease-cinematic),
              transform 0.9s var(--ease-cinematic);
  pointer-events: none;
}

/* Diskret backdrop bag menuen: blur + en blød, maskeret fade — saa tekst der
   scroller forbi under menuen ikke smelter sammen med logo/nav. Ingen haard kant. */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Fader hele backdrop'en (inkl. blur) ud mod bunden → blød kant */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

.menu.is-in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu-logo: altid i hero-fonten (Perfectly Vintages), opstillet som
   hovedlogoet — "donebynoon" sort, ".club" lysegraa paa ny linje, forskudt. */
.menu__logo {
  font-family: var(--font-display);
  display: inline-block;
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-decoration: none;
}

/* Default: menuen ligger over moerk baggrund (hero) → "donebynoon" hvid */
.menu__logo-done {
  display: block;
  color: var(--white);
  font-size: 1.45rem;
}

.menu__logo-club {
  display: block;
  text-align: right;
  color: var(--grey-light);
  font-size: 1.65rem;
  margin-top: -0.18em;
}

/* Lys baggrund: saettes (.menu.is-light) naar menuen ligger over lyse
   sektioner → "donebynoon" sort igen, og oevrige farver justeres for kontrast.
   Skiftet kobles paa naar de lyse sektioner bygges. */
.menu.is-light .menu__logo-done {
  color: var(--black);
}

.menu.is-light .menu__logo-club {
  color: var(--grey-mid);
}

.menu.is-light .menu__links a {
  color: var(--black);
}

.menu__links {
  display: flex;
  gap: 1.75rem;
}

.menu__links a {
  /* Accent: Geist Mono for et skarpt, teknisk touch */
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-cinematic);
}

.menu__links a:hover {
  opacity: 1;
}

/* ============================================================
   HAMBURGER-MENU (kun mobil ≤768px) — 3 streger → X.
   Genbruger .menu__links som fuldskaerms-overlay. Desktop uroert.
============================================================ */
.menu__burger { display: none; } /* skjult paa desktop */

@media (max-width: 768px) {
  /* Fjern menuens transform paa mobil: en transform paa .menu ville ellers
     goere .menu__links (position:fixed) relativ til MENUEN i stedet for
     viewporten → overlayen ville kun fylde menubjaelkens hoejde. */
  .menu,
  .menu.is-in { transform: none; }

  /* Burger-knappen vises */
  .menu__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 2; /* over overlayen, saa X altid kan trykkes */
  }
  .menu__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--white);
    transition: transform 0.45s var(--ease-cinematic),
                opacity 0.3s var(--ease-cinematic),
                background-color 0.4s var(--ease-cinematic);
  }
  /* Lys sektion (services-tema): moerke streger for kontrast (lukket tilstand) */
  .menu.is-light .menu__burger span { background: var(--black); }

  /* Logoet bliver paa toppen af overlayen (hjem-link forbliver synligt) */
  .menu__logo { position: relative; z-index: 2; }

  /* Links → fuldskaerms moerk overlay, skjult indtil .is-open */
  .menu__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.4rem, 4vh, 2.4rem);
    padding: 0 2rem;
    margin: 0;
    background: var(--black);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-cinematic),
                visibility 0s linear 0.5s;
  }
  .menu__links a {
    color: var(--white);
    opacity: 0.9;
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    letter-spacing: 0.02em;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-cinematic),
                transform 0.6s var(--ease-cinematic);
  }

  /* Aaben tilstand */
  .menu.is-open .menu__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s var(--ease-cinematic);
  }
  .menu.is-open .menu__links a { transform: translateY(0); opacity: 1; }

  /* Streger → X, og altid hvide naar aaben (overlay er sort) */
  .menu.is-open .menu__burger span { background: var(--white); }
  .menu.is-open .menu__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu.is-open .menu__burger span:nth-child(2) { opacity: 0; }
  .menu.is-open .menu__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Laas baggrunds-scroll mens mobil-menuen er aaben */
.menu-open { overflow: hidden; }


/* ============================================================
   LOAD-KOREOGRAFI (fixed overlay)

   Load-fladen er et fuldskaerms fixed overlay der IKKE aendrer dokumentets
   hoejde. Siden ligger hele tiden i toppen med hero bagved; gardin-revealen
   drives af scroll-input (virtuel progress i JS), og til sidst glider
   overlayet op (transform). Ingen hoejde-aendring → intet scroll-hop.

   BASE (uden JS / reduceret bevaegelse / refresh-skip): overlayet er skjult,
   saa hero + menu staar klar med det samme.
   .is-anim (saettes af JS): overlayet vises, spinner + bjaelker koerer.
============================================================ */
.load-cover {
  display: none;
}

.is-anim .load-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--white);
  overflow: hidden;
  will-change: transform;
  /* Bloed, tids-styret exit (uafhaengig af scroll-hastighed) */
  transition: transform 2.2s var(--ease-cinematic);
}

/* Exit: hele den hvide flade glider op og afsloerer hero */
.is-anim .load-cover.is-exiting {
  transform: translateY(-100%);
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Logoet ("donebynoon" + ".club") ---------- */
/* Samlet enhed. inline-block → bredden styres af linje 1 ("donebynoon"),
   saa ".club" paa linje 2 kan hoejre-flugte under den. */
.load-screen__logo {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  display: inline-block;
  line-height: 0.9;
  letter-spacing: 0.005em;
}

/* I animations-tilstand er logoet skjult indtil blokken daekker det */
.is-anim .load-screen__logo {
  opacity: 0;
}

.logo-word--done {
  display: block;
  color: var(--black);
  font-size: clamp(2.5rem, 11vw, 7rem);
}

/* ".club" lysegraa (inkl. graat punktum), lidt stoerre, forskudt mod
   hoejre og overlappende let opad mod linje 1 */
.logo-line2 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: -0.34em;
  padding-right: 0.12em;
}

.logo-word--club {
  color: var(--grey-light);
  font-size: clamp(2.9rem, 12.5vw, 8rem);
}

/* ---------- Fase 1: loading-spinner ---------- */
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem; /* centrering via margin → transform fri til rotation */
  border: 0.18rem solid var(--grey-light);
  border-top-color: var(--black);
  border-radius: 50%;
  opacity: 0;
  display: none;
}

.is-anim .spinner {
  display: block;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Fase 2-5: de to streger/bjaelker (gardiner) ---------- */
/* Skarpe kanter, ingen runde hjoerner. JS saetter bredde, hoejde og top
   ud fra koreografien; scaleX bruges til at skyde stregerne ud i fase 2. */
.bar {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  background: var(--black);
  transform: translateX(-50%);
  display: none;
}

.is-anim .bar {
  display: block;
}


/* ============================================================
   CUSTOM "scroll"-CURSOR (vises mens scroll-fasen er aktiv)
============================================================ */
.scroll-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  transform: translate(-50%, -50%);
  /* Kun tekst — ingen boks. Microcopy i Geist Mono. */
  font-family: var(--font-mono);
  color: var(--black);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-cinematic);
}

.scroll-cursor.is-on {
  opacity: 1;
}

/* Hvid tekst paa den moerke hero (sort under intro'ens hvide flade) */
.scroll-cursor.is-light {
  color: var(--white);
}

/* Skjul den normale cursor mens scroll-fasen er aktiv */
body.scrub-active {
  cursor: none;
}


/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* venstre */
  justify-content: center;     /* hoejere op (ikke klistret til bunden) */
  text-align: left;
  overflow: hidden;
  padding: clamp(7rem, 14vh, 10rem) clamp(1.5rem, 5vw, 6rem);
}

.hero__bg {
  position: absolute;
  inset: -10% 0;
  background: var(--black) url("assets/clouds.jpg") center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.45) 40%,
    rgba(10, 10, 10, 0.8) 80%,
    rgba(10, 10, 10, 0.98) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 58rem;
}

/* Stort statement, venstrejusteret, paa TO linjer ("consider it" / "donebynoon.")
   for et komponeret, asymmetrisk nedre-venstre udtryk. */
.hero__title {
  font-family: var(--font-sans);
  font-weight: 500;
  /* Lowercase-princippet: styres visuelt, copy staar uroert i HTML */
  text-transform: lowercase;
  font-size: clamp(3rem, 9vw, 6.8rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--white);
}

/* Smal skaerm: teksten hoejere op (centreret, ikke klistret til bunden) +
   mindre luft i top/bund, saa der ikke er en doed zone. */
@media (max-width: 767px) {
  .hero {
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .hero__title-brand {
    font-size: 1.2em;
  }
  .hero__sub {
    margin-top: 1.8rem;
  }
}

/* Brandnavnet i hero-overskriften: Perfectly Vintages (samme som logoet).
   De to fonte har forskellig metrik, saa stoerrelse + baseline afstemmes her. */
.hero__title-brand {
  font-family: var(--font-display);
  font-weight: 400;
  /* Perfectly Vintages staar optisk lidt mindre — loeftes en anelse for balance */
  font-size: 1.12em;
  line-height: 1;
  /* Finjuster baseline saa den flugter med Manrope-delen */
  vertical-align: baseline;
  position: relative;
  top: 0.04em;
}

/* Hero-undertekst: stoerre broedtekst, mere luft op til statementet. */
.hero__sub {
  margin-top: clamp(2.6rem, 5.5vh, 4.2rem);
  max-width: 40rem;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--grey-light);
}

.hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: clamp(1.5rem, 5vw, 6rem); /* venstrejusteret som indholdet */
  z-index: 2;
  width: 1px;
  height: 56px;
  overflow: hidden;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--grey-light);
  animation: scroll-hint 2.4s var(--ease-cinematic) infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}


/* ============================================================
   SCROLL-REVEAL (scrubbet + REVERSIBEL "rewind", se initScrollReveals).
   JS saetter opacity + translateY per frame som funktion af scroll-position,
   saa der ingen CSS-transition er (ellers ville hurtig scroll hakke).
   Skjul-tilstanden gaelder KUN naar JS er aktiv (.reveals-ready), saa teksten
   altid er synlig uden JS / ved reduceret bevaegelse.
============================================================ */
.reveals-ready .reveal-up {
  opacity: 0;
  will-change: opacity, transform;
}

/* UNDTAGELSE: data-reveal-late ("Det fikser vi.") er IKKE scrubbet/reversibelt,
   men et ENGANGS, TIDS-styret reveal (CSS-transition). Saa det altid naar at
   fade helt ind — ogsaa naar "sammen."-grebet laaser scroll lige efter — og
   bliver staaende (matcher at "sammen." ogsaa er engangs). */
.reveals-ready .reveal-up[data-reveal-late] {
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-cinematic),
              transform 1s var(--ease-cinematic);
}
.reveals-ready .reveal-up[data-reveal-late].is-revealed {
  opacity: 1;
  transform: none;
}


/* ============================================================
   DELT TYPE-SYSTEM (TRE niveauer) — brugt i ALLE sektioner via faelles
   klasser, saa hierarki + stoerrelser er IDENTISKE paa tvaers.
     1) .section-title  sektions-headline (oeverste, stoerste statement)
     2) .statement      baerende linje (Manrope, let)
     3) .uddyb          uddybning: tydeligt mindre, daempet graa
        .maerke         lille Geist Mono label/anker (valgfrit)
   Kontekst-klasser paa sektionen:
     .sec--dark   moerk bg → hvid statement, lysegraa uddyb/maerke
     .sec--media  sektion MED billede → headline + statement skrues NED,
                  saa billedet faar visuel vaegt
   Alt venstrejusteret. Strukturklasser er aliased ind, saa intet kan afvige.
============================================================ */

/* 1) Sektions-headline */
.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--black);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* 2) STATEMENT — baerende linje */
.statement,
.problem__lead,
.services__heading,
.record__line,
.regnemed__lead,
.club__line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--black);
}

/* 3) UDDYB — mindre + daempet graa */
.uddyb,
.problem__detail,
.services__desc,
.regnemed__detail,
.hero__sub,
.cta__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--grey-mid);
}

/* MAERKE — lille mono label/anker */
.maerke {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--grey-mid);
}

/* MOERK kontekst — hvid statement/headline, lysegraa uddyb/maerke */
.sec--dark .section-title,
.sec--dark .statement,
.sec--dark .record__line,
.sec--dark .regnemed__lead,
.sec--dark .club__line { color: var(--white); }
.sec--dark .uddyb,
.sec--dark .regnemed__detail,
.sec--dark .hero__sub,
.sec--dark .cta__sub,
.sec--dark .maerke { color: var(--grey-light); }

/* MED billede — skru headline + statement NED (billedet baerer vaegten).
   Hoejere gulv paa mobil, saa teksten ikke bliver for lille ift. billederne. */
.sec--media .section-title { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.sec--media .statement,
.sec--media .problem__lead,
.sec--media .services__heading,
.sec--media .record__line,
.sec--media .regnemed__lead { font-size: clamp(1.85rem, 2.8vw, 2.3rem); }

/* Titel-wrappers baerer parallax-driften (titel-teksten selv reveal'er) */
.problem__title-wrap,
.services__title-wrap {
  will-change: transform;
}

/* ============================================================
   DELTE LAYOUT-MOENSTRE — PAR (tekst + billede side om side, forskudt,
   skiftevis side) og KOLLAGE. Kun fra desktop; mobil stabler rent.
============================================================ */
.pair__media,
.collage { will-change: transform; }

/* Mobil: billedet foelger teksten med god luft (grid + forskydning fra 1024px) */
.pair__media { margin-top: clamp(1.5rem, 4vh, 3rem); }

@media (min-width: 1024px) {
  .pair {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
  }
  /* Forskudt: billedet lidt lavere end teksten (rolig asymmetri) */
  .pair__media { margin-top: clamp(3rem, 8vh, 7rem); }
  /* Skiftevis side: --reverse laegger billedet til VENSTRE */
  .pair--reverse .pair__text { order: 2; }
  .pair--reverse .pair__media { order: 1; margin-top: 0; margin-bottom: clamp(3rem, 8vh, 7rem); }
}

/* Mobil/tablet: billedet er IKKE fuld bredde — forskudt til samme side som paa
   desktop (hoejre for .pair, venstre for .pair--reverse) = samme laekre asymmetri. */
@media (max-width: 1023px) {
  .pair__media { width: 84%; }
  .pair:not(.pair--reverse) .pair__media { margin-left: auto; }  /* hoejre */
  .pair--reverse .pair__media { margin-right: auto; }            /* venstre */
}


/* ============================================================
   3. PROBLEM-STATEMENT
============================================================ */
.problem {
  position: relative;
  background: var(--white);
  color: var(--black);
  padding: 0 2rem 4vh;
  overflow: hidden;
}

/* Glidende moerk→lys overgang i toppen (ikke et haardt klip) */
.problem__fade {
  height: 48vh;
  margin: 0 -2rem; /* fuld bredde trods sektionens side-padding */
  background: linear-gradient(
    180deg,
    var(--black) 0%,
    var(--black) 5%,
    var(--white) 100%
  );
}
/* Mobil: mindre overgang, saa der ikke er for langt ned til teksten */
@media (max-width: 767px) {
  .problem__fade { height: 26vh; }
}

.problem__inner {
  /* Bred kolonne, saa de store linjer kan staa paa EEN linje paa desktop */
  max-width: 90rem;
  /* Venstrestillet, med en deliberat inset paa stoerre skaerme */
  margin-left: clamp(0rem, 5vw, 6rem);
  padding-top: 6vh;
}

/* Moderat, ENS afstand mellem de to blokke — del af samme rolige hele */
.problem__block + .problem__block {
  margin-top: clamp(3.5rem, 8vh, 6.5rem);
}

/* KUN Manrope. To niveauer. Stram rytme i hver blok. */
.problem__line {
  display: block;
  font-family: var(--font-sans);
  color: var(--black);
}

/* Baerende linjer: type fra det delte system. Her kun farve (sort, lys bg). */
.problem__lead {
  color: var(--black);
}

/* Uddybning: UDDYB-niveauet (mindre). Her kun farve: daempet graa. */
.problem__detail {
  color: var(--grey-mid);
}

/* Stram overgang baerende → uddybning (samme 0.4em som de andre sektioner,
   saa baerende linje + uddybning laeses som een enhed) */
.problem__lead + .problem__detail {
  margin-top: 0.55em;
}

/* Naar en baerende linje foelger uddybning (fx "Det fikser vi.") — mere luft,
   men stadig tydeligt del af samme blok. Absolut vaerdi (ikke em), saa den
   ikke eksploderer med den store font. */
.problem__detail + .problem__lead {
  margin-top: clamp(3rem, 6vh, 5rem);
}

/* (Det gamle "sammen"-scroll-greb er fjernet — "Det fikser vi. sammen." er nu
   en almindelig reveal-up-linje.) */

/* Kaos-billedet i par'et (placering styres af .pair-gridet). Liggende ramme. */
.problem__media {
  aspect-ratio: 16 / 10;
}

/* Overlap-cluster: desk-two-review oven paa kaos-billedet, asymmetrisk. */
.problem__cluster { position: relative; }
.problem__media2 { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .problem__media2 {
    position: absolute;
    width: 50%;
    left: -10%;       /* forskudt mod VENSTRE → anden sidemargin end kaos-billedet (hoejre) */
    bottom: -13%;
    z-index: 2;
  }
}
@media (max-width: 1023px) {
  .problem__media2 {
    width: 64%;
    margin-top: -14%; /* let lodret overlap */
    margin-left: 0;   /* venstre (kaos er hoejre-forskudt) = asymmetri */
    z-index: 2;
  }
}


/* ============================================================
   LINE-DIVIDER (mellem problem og "hvad vi goer")
   Haarfin streg, god luft omkring, tegner sig ud fra venstre ved scroll.
============================================================ */
.line-divider {
  background: var(--white);
  padding: clamp(4rem, 9vh, 7rem) 2rem;
}

.line-divider__inner {
  max-width: 60rem;
  margin-left: clamp(0rem, 5vw, 6rem); /* flugter med tekstens venstrekant */
}

.line-divider__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--grey-dark);
  /* Default (uden JS / reduceret bevaegelse): fuld streg, statisk */
  transform: scaleX(1);
  transform-origin: left;
}

/* JS + bevaegelse: stregen tegner sig ud fra venstre ved scroll */
.reveals-ready .line-divider__line {
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-cinematic);
}

.reveals-ready .line-divider__line.is-drawn {
  transform: scaleX(1);
}


/* ============================================================
   4. HVAD VI GOER (gradient hvid → lys, moeder billed-divideren)
============================================================ */
.services {
  /* Hvid (matcher problem-statementet over) → lys tone der flugter med
     hero.png's lyse himmel i toppen, saa bundkanten moeder billedet soemloest */
  background: linear-gradient(180deg, var(--white) 0%, #ededed 100%);
  color: var(--black);
  padding: 13vh 2rem 16vh; /* mere luft i top → titlen laengere ned */
}

/* Titlen taettere paa foerste spor ("Smartere drift") */
.services .section-title {
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.services__inner {
  max-width: 96rem;
  margin-left: clamp(0rem, 5vw, 6rem);
  margin-right: clamp(0rem, 5vw, 6rem);
}

/* Hvert spor er nu et PAR (tekst + billede, skiftevis side). God luft imellem. */
.services__track + .services__track {
  margin-top: clamp(5rem, 12vh, 10rem);
}

/* Diskret anker-streg over hver overskrift (ingen numre). */
.services__mark {
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-bottom: clamp(1.1rem, 2.6vh, 1.8rem);
  background: var(--grey-mid);
}

/* Overskrift = STATEMENT (sort, lys bg). Beskrivelse = UDDYB (daempet graa). */
.services__heading { color: var(--black); }
.services__desc {
  margin-top: clamp(0.9rem, 2.2vh, 1.4rem);
  color: var(--grey-mid);
}

/* Billed-rammen i services-parrene */
.services .pair__media { aspect-ratio: 4 / 3; }

/* Tekst broeder nu naturligt i sine kolonner (intet nowrap — det delte
   type-system + smallere tekst i billed-sektioner goer linjerne kortere). */
@media (min-width: 768px) {
  /* Beskrivelsernes tvungne mobil-linjeskift skjules paa desktop. */
  .desc-break {
    display: none;
  }
}


/* ============================================================
   5. BILLED-DIVIDER (assets/hero.png) — lyst (top) → moerkt (bund)
============================================================ */
.divider {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--black); /* bag billedet + bundtone */
}

/* Mobil: landskabs-billedet fylder mindre, og luften omkring strammes. */
@media (max-width: 767px) {
  .divider { min-height: 62vh; }
  .services { padding-bottom: 8vh; }
}

.divider__img {
  position: absolute;
  /* Lidt ekstra hoejde, saa parallax-bevaegelsen ikke blotter kanter */
  top: -10%;
  bottom: -10%;
  left: 0;
  right: 0;
  background: url("assets/hero.jpg") center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

/* Soemloes top: sektionens lyse tone smelter ind i billedets lyse himmel */
.divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12vh;
  background: linear-gradient(180deg, #ededed 0%, rgba(237, 237, 237, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Moerk bund: billedets moerke terraen flyder videre ned i den moerke del */
.divider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16vh;
  background: linear-gradient(0deg, var(--black) 0%, rgba(10, 10, 10, 0) 100%);
  z-index: 1;
  pointer-events: none;
}


/* ============================================================
   6. TRACK RECORD ("Hvem vi er")
   Overlapper billedets moerke bund (negativ margin), saa teksten lige
   begynder over den sorte terraen. ::before er en bloed transparent→sort
   blend, saa der ALDRIG er en synlig kant — een sammenhaengende moerk flade.
============================================================ */
.record {
  position: relative;
  z-index: 2;                 /* over divideren */
  margin-top: -22vh;          /* traek op over billedets moerke bund */
  background: var(--black);
  color: var(--white);
  padding: 16vh 2rem 13vh; /* mere luft ned mod lysavisen */
}

/* Bloed overgang fra billedets moerke terraen til sektionens sorte flade */
.record::before {
  content: "";
  position: absolute;
  top: -14vh;
  left: 0;
  right: 0;
  height: 14vh;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, var(--black) 100%);
  z-index: -1;
  pointer-events: none;
}

.record__inner {
  max-width: 90rem;
  margin-left: clamp(0rem, 5vw, 6rem); /* venstrestillet, samme inset */
}

/* Sektions-titlen er hvid paa de moerke sektioner */
.record .section-title,
.regnemed .section-title {
  color: var(--white);
}

/* Ydre blok baerer parallax-driften (statement reveal'er inde i den) */
.record__block {
  will-change: transform;
}

/* Lidt luft mellem de tre udsagn — hvert for sig, men een sammenhaengende blok */
.record__block + .record__block {
  margin-top: clamp(3.5rem, 8vh, 6.5rem);
}

/* Hver saetning paa sin egen linje. Type fra det delte system; her kun
   layout (egen linje) + farve (hvid, moerk bg). */
.record__line {
  display: block;
  color: var(--white);
}

/* Team-billedet i record-par'et */
.record__media {
  aspect-ratio: 4 / 3;
}


/* ---------- Line-divider, moerk variant (lys streg paa sort) ---------- */
.line-divider--dark {
  background: var(--black);
}

.line-divider--dark .line-divider__line {
  background: var(--grey-mid);
}


/* ============================================================
   KINETISK MARQUEE — stort wordmark-baand der driver langsomt vandret.
   overflow:hidden klipper baandet (ingen vandret side-scroll). Sort baand,
   hvid tekst. Seamless: track = 2 ens halvdele → translateX(0 → -50%).
============================================================ */
.marquee {
  overflow: hidden;
  background: var(--black);
  /* Ingen streger over/under. Mere luft, saa "lysavisen" staar for sig selv. */
  padding: clamp(4rem, 9vh, 7.5rem) 0;
}

.marquee__track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-drift 42s linear infinite;
}

.marquee__item {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(4rem, 11vw, 8rem); /* stoerre, ogsaa paa mobil */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--grey-mid); /* moerkere graa — mere diskret */
  padding-right: clamp(3.5rem, 8vw, 8rem); /* mere mellemrum mellem gentagelser */
}

@keyframes marquee-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduceret bevaegelse: baandet staar stille (ingen drift) */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}


/* ============================================================
   BILLED-SYSTEM (genbrugeligt) — cinematisk reveal + lobende parallax.
   .media = klippe-ramme (overflow hidden). .media__img = billedet, let
   oversized (scale 1.1) saa der er plads til parallax-drift.
   JS (initMediaReveals) styrer alt mappet til SCROLL-POSITION (reversibelt,
   ligesom teksten): et clip-wipe der ruller billedet op naar det kommer ind,
   + en rolig parallax mens det passerer. Reveal-stilen (wipe) er BEVIDST
   forskellig fra tekstens (stig+fade), saa de spiller sammen, ikke ens.
   Uden JS / reduceret bevaegelse: billedet staar helt synligt og roligt.
============================================================ */
.media {
  position: relative;
  overflow: hidden;
}

.media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14); /* overflow-margin til parallax */
  will-change: transform;
}

/* JS aktiv: billedet starter "lukket" (clip), saa wipe'et kan rulle det op.
   Saettes kun naar JS koerer → uden JS er billedet altid synligt. */
.media-ready .media {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* Fuld-bredde billed-baand (kant-til-kant brud mellem sektioner).
   Ekstra moerk luft over baandet = mere ro/"ventetid" efter "Lad os hjaelpe". */
.media-band {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(5vh, 10vh, 14vh);
}
/* Behold ansigterne (staaende personer i toppen) — crop fra BUNDEN */
.media-band .media__img { object-position: center top; }
@media (max-width: 767px) {
  .media-band { aspect-ratio: 4 / 3; }
}
.regnemed {
  background: var(--black);
  color: var(--white);
  padding: 13vh 2rem 18vh; /* mere luft op fra lysavisen */
}

.regnemed__inner {
  max-width: 96rem;
  margin-left: clamp(0rem, 5vw, 6rem);
  margin-right: clamp(0rem, 5vw, 6rem);
}

/* Ydre punkt baerer parallax-driften (teksten reveal'er inde i den) */
.regnemed__point {
  will-change: transform;
}

/* Luft mellem punkterne (mindre nu, da teksten er skruet ned i denne
   billed-sektion — billederne baerer vaegten). */
.regnemed__point + .regnemed__point {
  margin-top: clamp(3rem, 7vh, 5rem);
}

/* ---------- KOLLAGE-layout: tekst-punkter + billed-cluster ---------- */
@media (min-width: 1024px) {
  .regnemed__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  /* Billed-cluster i blandede formater, forskudt paa forskellige hoejder */
  .collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 2.5vw, 3rem);
    align-items: start;
  }
  .collage__a { aspect-ratio: 3 / 4; }                                   /* portraet, oeverst venstre */
  .collage__b { aspect-ratio: 4 / 3; margin-top: clamp(4rem, 11vh, 9rem); } /* liggende, forskudt ned */
  .collage__c {                                                           /* bred, forskudt mod hoejre */
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    width: 82%;
    margin-left: auto;
    margin-top: clamp(0.5rem, 2vh, 1.5rem);
  }
}

/* Mobil/tablet: kollagen er ASYMMETRISK selv uden bredde — blandede
   stoerrelser + skiftevis side (som desktop, bare via stoerrelser). */
@media (max-width: 1023px) {
  .collage__a { width: 64%; margin-right: auto; aspect-ratio: 3 / 4; }   /* portraet, venstre */
  .collage__b { width: 80%; margin-left: auto; aspect-ratio: 4 / 3; }    /* liggende, hoejre */
  .collage__c { width: 88%; margin-right: auto; aspect-ratio: 16 / 10; } /* bred, venstre */
  .collage > .media + .media { margin-top: clamp(2rem, 6vh, 4rem); }
  .regnemed__points { margin-bottom: clamp(3rem, 8vh, 6rem); }
}

/* Ledeordet: type fra det delte system; her kun layout (egen linje) + farve
   (hvid, moerk bg). */
.regnemed__lead {
  display: block;
  color: var(--white);
}

/* Saetningen under: type fra det delte system. Taet paa ledeordet (samme 0.4em
   som de andre sektioner), saa ledeord + saetning laeses som EEN enhed —
   den store luft ligger mellem de fem punkter. Farve: lysegraa (moerk bg). */
.regnemed__detail {
  display: block;
  max-width: 52rem;
  margin-top: 0.55em;
  color: var(--white);
}


/* ============================================================
   8. CLUB-TEASER ("donebynoon.club") — sidens vigtigste oejeblik.
   Default (no-JS / reduceret bevaegelse): rolig, statisk moerk sektion
   med god luft. Med JS + bevaegelse: .club--scrub gives paa, sektionen
   pinnes (sticky) og teksten scrubbes ind (se initClubScrub).
============================================================ */
.club {
  position: relative;
  background: var(--black);
  color: var(--white);
  /* Generoes luft, saa teaseren staar som sit eget oejeblik og ikke
     klistrer op ad "Hvad I kan regne med" (gaelder den statiske visning). */
  padding: 22vh 2rem;
}

.club__inner {
  max-width: 90rem;
  margin-left: clamp(0rem, 5vw, 6rem); /* samme venstre-inset som resten */
}

/* Afstand mellem de tre strofer (de blanke linjer i teksten) */
.club__group + .club__group {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}

/* Lidt luft mellem linjerne i samme strofe — hver linje sit eget hug */
.club__line + .club__line {
  margin-top: clamp(0.5rem, 1.4vh, 1.1rem);
}

/* Hver linje paa sin egen linje. Typografi fra det DELTE system (= "Hvem vi
   er"-stilen); her kun layout + farve (hvid paa moerk). */
.club__line {
  display: block;
  color: var(--white);
}

/* "donebynoon.club" som brand-wordmark i Perfectly Vintages (resten Manrope).
   Anden metrik → let stoerre, som i hero-brandet. */
.club__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12em;
  line-height: 1;
  letter-spacing: 0;
}

/* Ekstra dramatisk luft under foerste linje — et helt "blankt" hug mere,
   saa aabningen faar lov at staa alene. */
.club__line--first {
  margin-bottom: clamp(1.6rem, 4.5vh, 3.2rem);
}

/* ---------- Pin/scrub-tilstand: gives KUN paa naar JS er aktiv (ikke
   reduceret bevaegelse). Saa no-JS/reduced-motion faar en normal, rolig
   sektion uden pin. ---------- */
.club--scrub {
  height: 460vh;        /* endnu mere scroll-distance → langsommere, premium */
  padding: 0 2rem;      /* lodret luft styres nu af det centrerede pin */
}

.club--scrub .club__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;  /* teksten centreret lodret mens sektionen pinner */
}

/* Linjerne starter skjult og scrubbes ind af JS. INGEN CSS-transition: opacity
   saettes per frame som ren funktion af scroll-position, saa hurtig scroll
   aldrig hakker eller flyver forbi. */
.club--scrub .club__line {
  opacity: 0;
  transform: translateY(44px);
  will-change: opacity, transform;
}


/* ============================================================
   9. FOOTER-CTA (#kontakt) — sidens rolige, moerke afslutning.
   Soemloes sort flade efter club-teaseren. Statement + egen formular.
============================================================ */
.cta {
  background: var(--black);
  color: var(--white);
  padding: 18vh 2rem 16vh;
  scroll-margin-top: 4rem; /* anker-hop ender ikke under den faste menu */
}

.cta__inner {
  max-width: 96rem;
  margin-left: clamp(0rem, 5vw, 6rem);
  margin-right: clamp(0rem, 5vw, 6rem);
}

/* CTA-par: tekst+formular venstre, billede hoejre. Top-justeret (lang formular). */
@media (min-width: 1024px) {
  .cta__inner.pair { align-items: start; }
}
.cta__media { aspect-ratio: 4 / 3; }

/* Underteksten: mindre og daempet, taet under det store statement */
.cta__sub {
  margin-top: clamp(1.2rem, 3vh, 2.2rem);
  max-width: 42rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--grey-light);
}

/* ---------- Egen kontaktformular (rene linjer, minimal, sort/hvid/graa) ---------- */
.cta__form {
  margin-top: clamp(4.5rem, 10vh, 8rem);
  max-width: 40rem;
}

/* Rolig stabling — god luft mellem felterne */
.field + .field {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}

/* Lille label i Geist Mono (sidens label-stil, som nav/microcopy) */
.field__label {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--white);
}

/* Input: ingen boks — kun en ren bundlinje. Manrope, hvid tekst. */
.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--grey-dark);
  border-radius: 0;
  padding: 0.7rem 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.4;
  color: var(--white);
  transition: border-color 0.5s var(--ease-cinematic);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--white);
}

.field__input--area {
  resize: vertical;
  min-height: 6.5rem;
}

/* Autofyld: hold den moerke baggrund + hvide tekst (ingen lys boks) */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

/* Send-knap: minimal, mono. Rolig invert paa hover. */
.cta__submit {
  margin-top: clamp(2.8rem, 6vh, 4rem);
  display: inline-block;
  background: transparent;
  border: 1px solid var(--grey-mid);
  border-radius: 0;
  padding: 1rem 2.8rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.5s var(--ease-cinematic),
              color 0.5s var(--ease-cinematic),
              border-color 0.5s var(--ease-cinematic);
}

.cta__submit:hover,
.cta__submit:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  outline: none;
}

/* Bekraeftelses-besked efter submit (fader roligt ind) */
.cta__status {
  margin-top: clamp(1.5rem, 3vh, 2.2rem);
  min-height: 1.4em; /* reserver plads, saa knappen ikke hopper */
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.6s var(--ease-cinematic);
}

.cta__status.is-visible {
  opacity: 1;
}

/* CTA-brødtekst HVID (ikke daempet) — hoejere specificitet end .sec--dark .cta__sub */
.cta .cta__sub {
  margin-top: clamp(1.2rem, 3vh, 2.2rem);
  max-width: 44rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--white);
}

/* Screening-linjen staar paa egen linje med dobbelt afstand fra statementet over */
.cta .cta__sub--screening {
  margin-top: clamp(1.8rem, 4vh, 3rem);
}

/* ---------- CTA billed-cluster (par-siden): haandtryk + dame i telefon ---------- */
.cta__cluster { position: relative; }
.cta__cluster-a { aspect-ratio: 4 / 3; }
.cta__cluster-b { aspect-ratio: 3 / 4; }
@media (min-width: 1024px) {
  .cta__cluster-b {
    position: absolute;
    width: 38%;
    right: 0;
    bottom: -20%;   /* kysser kun bund-hoejre hjoerne — mindre overlap */
    z-index: 2;
  }
}
@media (max-width: 1023px) {
  .cta__cluster-b {
    width: 58%;
    margin-top: -16%;  /* lodret overlap */
    margin-left: auto; /* hoejre = asymmetri */
    z-index: 2;
  }
}

/* ---------- CTA billed-galleri: billeder, let overlappende, asymmetrisk ---------- */
.cta__gallery {
  max-width: 96rem;
  margin: clamp(5rem, 12vh, 10rem) clamp(0rem, 5vw, 6rem) 0;
}
.cta__g { aspect-ratio: 3 / 4; }
@media (min-width: 1024px) {
  .cta__gallery {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .cta__g--1 { width: 30%; margin-top: clamp(3rem, 9vh, 7rem); }
  .cta__g--2 { width: 40%; aspect-ratio: 4 / 3; margin-left: -4%; z-index: 2; } /* stoerst, midt, overlapper */
  .cta__g--3 { width: 28%; margin-left: -3%; margin-top: clamp(6rem, 15vh, 12rem); }
}
/* Mobil: stablet, men forskudt side til side + let lodret overlap = asymmetrisk */
@media (max-width: 1023px) {
  .cta__g--1 { width: 70%; margin-right: auto; }
  .cta__g--2 { width: 80%; margin-left: auto; margin-top: -10%; aspect-ratio: 4 / 3; }
  .cta__g--3 { width: 64%; margin-right: auto; margin-top: -8%; }
}


/* ============================================================
   "Lad os hjaelpe jer." — roligt, premium tekst-oejeblik (ANKER)
============================================================ */
.help {
  background: var(--black);
  color: var(--white);
  padding: clamp(12vh, 20vh, 24vh) 2rem;
}
.help__inner {
  max-width: 80rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.help .section-title {
  margin-bottom: clamp(3rem, 8vh, 6rem);
}
.help__line + .help__line {
  margin-top: clamp(0.4rem, 1.5vh, 1rem);
}


/* ============================================================
   CTA-HOOK: "Ready to be donebynoon?" — stort, forskudt brand-statement
   der linker (smooth) ned til formularen.
============================================================ */
.hook {
  position: relative;
  overflow: hidden;
  background: var(--black);
  padding: clamp(10vh, 18vh, 22vh) 0; /* INGEN side-padding → blokke til kanten */
}

/* Intro-agtige HVIDE BLOKKE (curtain): to fuld-bredde blokke (top+bund) der
   daekker statementet og traekker sig vaek naar man scroller det ind.
   Standard (uden JS / reduceret bevaegelse): blokke vaek (tekst synlig). */
.hook::before,
.hook::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%; /* lille overlap i midten → ingen haarlinje */
  background: var(--white);
  z-index: 3;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-cinematic);
}
.hook::before { top: 0; transform-origin: top; }
.hook::after { bottom: 0; transform-origin: bottom; }
/* JS armer (daekker til), og afslører ved scroll (blokke traekker sig) */
.hook.is-armed::before,
.hook.is-armed::after { transform: scaleY(1); }
.hook.is-armed.is-revealed::before,
.hook.is-armed.is-revealed::after { transform: scaleY(0); }

.hook__link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 clamp(1.5rem, 5vw, 6rem); /* tekst-inset (blokkene er fuld bredde) */
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: lowercase;
}
.hook__line { display: block; }
.hook__line--a { margin-left: 0; }                       /* venstre */
.hook__line--b { margin-left: clamp(2rem, 18vw, 14rem); } /* forskudt mod hoejre */
/* "donebynoon" i Perfectly Vintages (brand-wordmark) */
.hook__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12em;
  text-transform: none;
}
/* Rolig hover: brand-ordet lyser op / hele statementet faar en let drift */
.hook__link:hover .hook__brand,
.hook__link:focus-visible .hook__brand { opacity: 0.7; }
.hook__brand { transition: opacity 0.5s var(--ease-cinematic); }


/* ============================================================
   TEAM-UNDERSIDE (team.html) — arver forsidens system; her kun det
   side-specifikke (sektioner, profil-layout, placeholder, tags).
============================================================ */

/* Aktiv nav-side */
.menu__links a[aria-current="page"] { opacity: 1; }

/* 1) Intro-anker */
.team-intro {
  background: var(--black);
  color: var(--white);
  /* Stor top-padding rydder den faste menu + giver et roligt aabningsrum */
  padding: clamp(20vh, 26vh, 30vh) 2rem clamp(14vh, 20vh, 18vh);
}
.team-intro__inner {
  max-width: 72rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.team-intro__lead {
  max-width: 52rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* 2-3) Team-medlem (par) */
.team-member {
  background: var(--black);
  color: var(--white);
  padding: clamp(7vh, 13vh, 11vh) 2rem;
}
/* Foerste profil: stort, roligt rum ned fra intro'en (premium aabning, ikke
   "preloadet" — profilen kommer foerst ved scroll). */
.team-member--lead {
  padding-top: clamp(16vh, 26vh, 22vh);
}
.team-member__inner {
  max-width: 96rem;
  margin-left: clamp(0rem, 5vw, 6rem);
  margin-right: clamp(0rem, 5vw, 6rem);
}
/* Lang profiltekst → top-justeret par paa desktop */
@media (min-width: 1024px) {
  .team-member__inner.pair { align-items: start; }
}
.team-member__name {
  margin-top: clamp(0.4rem, 1.4vh, 0.8rem);
}
.team-member .uddyb {
  max-width: 42rem;
}
.team-member .pair__text > .uddyb:first-of-type {
  margin-top: clamp(1.2rem, 3vh, 2rem);
}
.team-member .uddyb + .uddyb {
  margin-top: 1.1em;
}

/* ---------- Team-portraetter: stort, editorial, asymmetrisk ----------
   Ikke ét fast format: de to portraetter har forskellige formater, forskellig
   kolonnevaegt og ligger forskudt lodret — saa billede og tekst aldrig rammer
   oejet samtidig. data-band paa figuren goer billed-wipe'et bevidst langsommere. */
.team-member--lead .team-member__media { aspect-ratio: 4 / 5; }   /* Rasmus */
.team-member--cto  .team-member__media { aspect-ratio: 3 / 4; }   /* Emil — hoejere ramme */

@media (min-width: 1024px) {
  /* Rasmus (billede VENSTRE): billed-kolonnen vejer tungest; teksten falder
     lavt ind ved siden af (forskudt ned = asymmetrisk reveal). */
  .team-member--lead .team-member__inner.pair {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 5vw, 7rem);
  }
  .team-member--lead .pair__text { margin-top: clamp(4rem, 13vh, 10rem); }

  /* Emil (billede HOEJRE): spejlvendt asymmetri — billedet ligger lavt,
     teksten staar hoejt. */
  .team-member--cto .team-member__inner.pair {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 7rem);
  }
  .team-member--cto .team-member__media { margin-top: clamp(6rem, 17vh, 13rem); }
}

/* Kernekompetencer som diskrete Geist Mono-tags */
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 42rem;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--grey-light);
  border: 1px solid var(--grey-dark);
  padding: 0.5rem 0.85rem;
}

/* 4) Hvorfor det virker (anker) */
.team-why {
  background: var(--black);
  color: var(--white);
  padding: clamp(10vh, 16vh, 14vh) 2rem clamp(16vh, 24vh, 20vh);
}
.team-why__inner {
  max-width: 72rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.team-why .uddyb {
  max-width: 54rem;
}
.team-why .uddyb:first-of-type {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.team-why .uddyb + .uddyb {
  margin-top: 1.1em;
}

/* 5) Diskret CTA-linje → forsidens kontakt */
.team-cta {
  background: var(--black);
  color: var(--white);
  /* CTA'en faar luft over OG en lang rolig hale under, saa siden ikke "stopper"
     paa selve linjen. */
  padding: clamp(14vh, 22vh, 20vh) 2rem clamp(26vh, 36vh, 32vh);
}
.team-cta__inner {
  max-width: 90rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.team-cta__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-mid);
  padding-bottom: 0.08em;
  transition: border-color 0.5s var(--ease-cinematic);
}
.team-cta__link:hover,
.team-cta__link:focus-visible {
  border-color: var(--white);
  outline: none;
}


/* ============================================================
   SERVICES-UNDERSIDE (services.html) — arver forsidens system; her det
   side-specifikke: exo-ape "how we work"-zigzag, underpunkter, brud-statement.
   Hele siden er moerk (body er sort), saa menuen staar rent hele vejen.
============================================================ */

/* Intro-anker */
.svc-intro {
  background: var(--black);
  color: var(--white);
  /* Stoerre moerk bund = laengere runway foer det FOERSTE farveskift (den lyse
     foerste kategori udloeser skiftet naar dens top krydser viewportens midte).
     Generoes moerk hold = bevidst, "dyr" overgang i stedet for et hurtigt skift. */
  padding: clamp(20vh, 26vh, 30vh) 2rem clamp(22vh, 32vh, 38vh);
}
.svc-intro__inner {
  max-width: 72rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.svc-intro__lead {
  max-width: 54rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* ---------- Kategori-blokke (forskudt, skiftevis side = zigzag) ---------- */
.svc {
  background: var(--black);
  color: var(--white);
  padding: clamp(6vh, 11vh, 9vh) 2rem;
}
.svc__inner {
  max-width: 56rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
/* Forskydning: hoejre-kategorier skubbes mod hoejre paa desktop → zigzag */
@media (min-width: 1024px) {
  .svc--right .svc__inner {
    margin-left: auto;
    margin-right: clamp(0rem, 5vw, 6rem);
  }
}

.svc__head .maerke {
  display: block;
  margin-bottom: clamp(0.8rem, 2vh, 1.3rem);
}
/* Stor kategori-overskrift (under sidens H1 i hierarki) */
.svc__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--white);
}
.svc__intro {
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  max-width: 44rem;
}

/* Underpunkter: to kolonner paa desktop, een paa mobil */
.svc__points {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid;
  gap: clamp(1.8rem, 4vh, 3rem) clamp(2rem, 4vw, 4rem);
}
@media (min-width: 700px) {
  .svc__points { grid-template-columns: 1fr 1fr; }
}
.svc__point-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.5em;
}

/* Proces-billeder mellem kategorierne (forskudt, clip-wipe + parallax) */
.svc-media {
  width: 84%;
  aspect-ratio: 4 / 3;
  margin-top: clamp(4vh, 9vh, 8vh);
  margin-bottom: clamp(4vh, 9vh, 8vh);
}
.svc-media--left  { margin-right: auto; margin-left: clamp(1rem, 5vw, 6rem); }
.svc-media--right { margin-left: auto;  margin-right: clamp(1rem, 5vw, 6rem); }
@media (min-width: 1024px) {
  .svc-media { width: 44rem; }
}

/* Stort udbrydende statement (filmisk brud) */
.svc-break {
  background: var(--black);
  padding: clamp(12vh, 22vh, 20vh) clamp(1.5rem, 5vw, 6rem);
}
.svc-break__text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 10rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--white);
  max-width: 14ch;
}

/* Fondsansøgninger */
.svc-note {
  background: var(--black);
  color: var(--white);
  padding: clamp(8vh, 14vh, 12vh) 2rem;
}
.svc-note__inner {
  max-width: 64rem;
  margin-left: clamp(0rem, 5vw, 6rem);
}
.svc-note .maerke {
  display: block;
  margin-bottom: clamp(0.8rem, 2vh, 1.3rem);
}
.svc-note .uddyb {
  max-width: 52rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* Sådan arbejder vi */
.svc-how {
  background: var(--black);
  color: var(--white);
  padding: clamp(8vh, 14vh, 12vh) 2rem clamp(10vh, 16vh, 14vh);
}
.svc-how__inner {
  max-width: 96rem;
  margin-left: clamp(0rem, 5vw, 6rem);
  margin-right: clamp(0rem, 5vw, 6rem);
}
.svc-how__grid {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  gap: clamp(2.2rem, 5vh, 3.5rem) clamp(2rem, 4vw, 4rem);
}
@media (min-width: 800px) {
  .svc-how__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-how__item .maerke {
  display: block;
  margin-bottom: 0.9rem;
}
.svc-how__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 0.6em;
}


/* ============================================================
   SCROLL-FARVESKIFT (exoape-stil) — KUN paa services (.page-services).
   Baggrund + tekst krydsfader bloedt mellem moerk og lys, mens man scroller
   (styres af initServicesTheme). theme-dark er sikker default uden JS.
============================================================ */
body.page-services {
  --fg: var(--white);
  --fg-dim: var(--grey-light);
  background-color: var(--black);
  transition: background-color 0.7s var(--ease-cinematic);
}
body.page-services.theme-light {
  --fg: var(--black);
  --fg-dim: var(--grey-mid);
  background-color: var(--white);
}

/* Tekst foelger temaet (bloed cross-fade) */
.page-services .section-title,
.page-services .svc__title,
.page-services .svc__point-title,
.page-services .svc-break__text,
.page-services .svc-how__title {
  color: var(--fg);
  transition: color 0.7s var(--ease-cinematic);
}
.page-services .uddyb,
.page-services .maerke {
  color: var(--fg-dim);
  transition: color 0.7s var(--ease-cinematic);
}

/* Sektionerne er gennemsigtige, saa body-bg'ens farveskift ses igennem */
.page-services .svc-intro,
.page-services .svc,
.page-services .svc-break,
.page-services .svc-note,
.page-services .svc-how { background: transparent; }

/* Menuen skifter farve i takt med temaet (is-light saettes af JS) */
.page-services .menu__logo-done,
.page-services .menu__logo-club,
.page-services .menu__links a { transition: color 0.6s var(--ease-cinematic); }


/* ============================================================
   SIDE-SKIFT mellem menu-siderne — "bladre" op (View Transitions API,
   cross-document). Den nye side glider op nedefra. Falder elegant tilbage
   til almindelig navigation i browsere uden support. (Reduceret bevaegelse
   slaar animationen fra laengere nede.)
============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-page-up 0.6s var(--ease-cinematic); }
@keyframes vt-page-up {
  from { transform: translateY(100%); }
}


/* ============================================================
   prefers-reduced-motion: spring koreografien over,
   vis logo + hero + menu statisk
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .load-screen__logo {
    opacity: 1 !important;
  }
  .spinner,
  .bar {
    display: none !important;
  }
  .hero__scroll-line {
    animation: none;
  }
  /* Ingen side-skift-animation eller farve-cross-fade ved reduceret bevaegelse */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  body.page-services,
  .page-services .section-title,
  .page-services .svc__title,
  .page-services .svc__point-title,
  .page-services .svc-break__text,
  .page-services .svc-how__title,
  .page-services .uddyb,
  .page-services .maerke {
    transition: none !important;
  }
}