/* ==========================================================================
   Komponenter — porteret 1:1 fra prototypen.
   Inline-styles og data-m-overrides er erstattet af klasser og rigtige
   media queries. Det visuelle resultat er uændret.
   ========================================================================== */

/* --- Fælles sektionsbyggeklodser ---------------------------------------- */

.acs-section {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: var(--acs-section-y) var(--acs-gutter);
}
.acs-band { width: 100%; }
.acs-band--dark { background: var(--acs-evergreen); }
.acs-band--quote { background: #DCE1D3; }
.acs-band__inner {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: var(--acs-section-y) var(--acs-gutter);
}

.acs-eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: var(--acs-w-label);
  letter-spacing: var(--acs-track-label);
  text-transform: uppercase;
  color: var(--acs-label-blue);
}
.acs-eyebrow--palm { color: var(--acs-label-palm); }
.acs-eyebrow--on-dark { color: var(--acs-label-palm-dk); }
.acs-eyebrow--quote { color: #4d6242; }

/* Overskrifter der står på én linje på desktop og bryder på mobil.
   Erstatter prototypens data-m="nowrapline". */
.acs-nowrap { white-space: nowrap; }
@media (max-width: 700px) {
  .acs-nowrap { white-space: normal; }
}

/* Håndtegnet blå scribble under et nøgleord — signaturelementet. */
.acs-scribble { position: relative; white-space: nowrap; }
.acs-scribble svg {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -14px;
  width: calc(100% + 12px);
  height: 22px;
  overflow: visible;
}

/* --- Hero ---------------------------------------------------------------- */

.acs-hero {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) var(--acs-gutter) clamp(24px, 3vw, 40px);
}
.acs-hero h1 {
  margin: 0;
  font-weight: var(--acs-w-light);
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: var(--acs-track-tight);
  color: var(--acs-ink);
}
.acs-hero__lead {
  margin: 34px 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: var(--acs-w-body);
  line-height: 1.65;
  color: var(--acs-ink-muted);
}

/* --- Marquee: kundeudgaver ----------------------------------------------- */

@keyframes acs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Bundpaddingen ligger på sektionen selv — tidligere kom en del af luften
   fra pauseknappens række, som er fjernet. Loftet er sænket fra
   prototypens 88px til 83px, så den rammer 83px ved 1440px skærmbredde.
   Under ~1383px skalerer den som før med 6vw. */
.acs-marquee {
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 83px);
}
.acs-marquee__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(28px, 3.5vw, 56px);
  width: max-content;
  padding: 0 clamp(14px, 1.75vw, 28px);
  animation: acs-marquee 78s linear infinite;
}

/* Båndet standser ved museover og ved tastaturfokus. Der er bevidst ingen
   synlig pauseknap. Betingelsen om en rigtig mus er vigtig: på en telefon
   kan et tryk efterlade :hover hængende på elementet, og så ville båndet
   stå stille resten af besøget. */
@media (hover: hover) and (pointer: fine) {
  .acs-marquee:hover .acs-marquee__track,
  .acs-marquee:focus-within .acs-marquee__track {
    animation-play-state: paused;
  }
}


.acs-marquee figure {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(230px, 23vw, 310px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.acs-marquee img {
  width: 100%;
  /* height:auto er nødvendig: width/height-attributterne på <img> sætter en
     konkret højde, og aspect-ratio er kun aktiv når højden er auto. */
  height: auto;
  aspect-ratio: 1.775;
  object-fit: contain;
  object-position: bottom;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(4, 27, 21, .16));
}
.acs-marquee figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  letter-spacing: var(--acs-track-caps);
  text-transform: uppercase;
  color: var(--acs-label-blue);
  font-weight: var(--acs-w-label);
}

/* --- Rullende logostribe -------------------------------------------------
   Bruges både i forsidens hero og i Cases-heroen, derfor her og ikke i
   en enkelt sides fil. */

.acs-logos {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  padding: clamp(30px, 3.5vw, 50px) 0 clamp(34px, 4vw, 56px);
}
.acs-logos__track {
  display: flex;
  align-items: center;
  gap: clamp(34px, 4vw, 62px);
  width: max-content;
  animation: acs-marquee 78s linear infinite;
}
/* Standses ved museover og tastaturfokus — men kun hvor der er en rigtig
   mus. På en telefon kan et tryk efterlade :hover hængende, og så stod
   båndet stille for altid. */
@media (hover: hover) and (pointer: fine) {
  .acs-logos:hover .acs-logos__track,
  .acs-logos:focus-within .acs-logos__track {
    animation-play-state: paused;
  }
}
.acs-logos img {
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  opacity: .8;
}

/* --- Pausekontrol (WCAG 2.2.2) -------------------------------------------
   Sat i ACS' eget formsprog: versaler, sperret, ingen ikon, ingen ramme,
   ingen radius — samme behandling som figcaptions og eyebrows.           */

.acs-pause {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--acs-w-label);
  letter-spacing: var(--acs-track-caps);
  text-transform: uppercase;
  color: var(--acs-label-blue);
  transition: color .2s;
}
.acs-pause:hover { color: var(--acs-ink); }
.acs-pause:focus-visible {
  outline: 2px solid var(--acs-blue);
  outline-offset: 3px;
}
.acs-pause--quote { color: #4d6242; }
.acs-pause--quote:hover { color: var(--acs-ink); }

/* Uden JavaScript giver knappen ingen mening — den skjules da. */
.no-js .acs-pause { display: none; }

/* --- Nummererede rækker på hårstreger (mørk flade) ----------------------- */

.acs-rows { display: flex; flex-direction: column; }
.acs-rows__row {
  display: flex;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  border-top: 1px solid var(--acs-rule-dark);
  padding: 26px 0;
  flex-wrap: wrap;
}
.acs-rows__row:last-child { border-bottom: 1px solid var(--acs-rule-dark); }
.acs-rows__n {
  flex: 0 0 40px;
  font-size: 13px;
  color: var(--acs-label-palm-dk);
  font-weight: var(--acs-w-label);
  letter-spacing: .1em;
}
.acs-rows__t {
  flex: 0 0 240px;
  margin: 0;
  font-size: 22px;
  font-weight: var(--acs-w-medium);
  color: var(--acs-on-dark);
}
.acs-rows__d {
  flex: 1 1 320px;
  margin: 0;
  font-size: 15px;
  font-weight: var(--acs-w-light);
  line-height: 1.6;
  color: var(--acs-on-dark-muted);
}

/* --- Funktionskort ------------------------------------------------------- */

.acs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.acs-card { padding: clamp(22px, 2.4vw, 30px); }
.acs-card__n {
  display: block;
  font-weight: var(--acs-w-light);
  font-size: 13px;
  letter-spacing: var(--acs-track-caps);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.acs-card h3 {
  margin: 0 0 8px;
  font-weight: var(--acs-w-medium);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.2;
  color: var(--acs-ink);
}
.acs-card p:not(.acs-eyebrow) {
  margin: 0;
  font-size: 15px;
  font-weight: var(--acs-w-body);
  line-height: 1.6;
}

/* --- Trust-grid ---------------------------------------------------------- */

.acs-trust {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--acs-gutter);
  border-top: 1px solid var(--acs-rule);
}
.acs-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
}
.acs-trust__item { border-top: 1px solid var(--acs-rule); padding-top: 22px; }
.acs-trust__item h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--acs-w-medium);
  color: var(--acs-ink);
}
.acs-trust__item p:not(.acs-eyebrow) {
  margin: 0;
  font-size: 15px;
  font-weight: var(--acs-w-body);
  line-height: 1.6;
}

/* --- Citat-karrusel ------------------------------------------------------ */

.acs-quote__head {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.acs-quote__body { max-width: 760px; }
.acs-quote blockquote {
  margin: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.acs-quote__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 56px;
  line-height: .5;
  color: #4d6242;
}
.acs-quote__text {
  margin: 0;
  font-weight: var(--acs-w-body);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--acs-ink);
  text-wrap: pretty;
}
.acs-quote__person {
  display: block;
  font-size: 15px;
  font-weight: var(--acs-w-medium);
  color: var(--acs-ink);
}
.acs-quote__role {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: var(--acs-w-body);
  color: #4d6242;
}
.acs-quote__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 3.5vw, 48px);
  flex-wrap: wrap;
}
.acs-quote__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #c7d0ba;
  transition: width .35s ease, background .35s ease;
}
.acs-quote__dot[aria-current="true"] {
  width: 28px;
  background: var(--acs-evergreen);
}
.acs-quote__dot:focus-visible {
  outline: 2px solid #4d6242;
  outline-offset: 3px;
}
.acs-quote__controls .acs-pause { margin-left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .acs-quote__dot { transition: none; }
}

/* --- "Kom i gang": billedbaggrund med mørkt slør ------------------------- */

.acs-start { position: relative; overflow: hidden; background: var(--acs-evergreen); }
.acs-start__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .4;
  filter: saturate(.75);
  display: block;
}
.acs-start__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 18, 16, .55) 0%,
    rgba(12, 18, 16, .75) 25%,
    rgba(12, 18, 16, .9) 100%);
}
.acs-start__section { position: relative; color: var(--acs-cream); }
.acs-start__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.acs-start__head h2 {
  margin: 0 0 20px;
  max-width: 20ch;
  font-weight: var(--acs-w-light);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--acs-track-tight-2);
  color: var(--acs-cream);
}
.acs-start__head p:not(.acs-eyebrow) {
  margin: 0;
  font-size: 16px;
  font-weight: var(--acs-w-body);
  line-height: 1.65;
  color: rgba(226, 212, 186, .78);
  max-width: 60ch;
}
.acs-start__line {
  position: relative;
  height: 26px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.acs-start__line svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Samme grund som på forsiden: trinnene stables på mobil, så stregen
   forbinder ikke længere noget. Hovedets bundmargin holder luften. */
@media (max-width: 700px) {
  .acs-start__line { display: none; }
}
.acs-start__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}
.acs-start__n {
  display: block;
  font-weight: var(--acs-w-light);
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: .9;
  color: rgba(127, 147, 113, .85);
}
.acs-start__steps h3 {
  margin: 16px 0 8px;
  font-size: 19px;
  font-weight: var(--acs-w-medium);
  line-height: 1.25;
  color: var(--acs-on-dark);
}
.acs-start__steps p:not(.acs-eyebrow) {
  margin: 0;
  font-size: 15px;
  font-weight: var(--acs-w-body);
  line-height: 1.6;
  color: rgba(226, 212, 186, .75);
}

/* --- Afsluttende CTA-bånd ------------------------------------------------ */

.acs-cta { background: var(--acs-evergreen); }
.acs-cta__inner {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) var(--acs-gutter);
}
.acs-cta h2 {
  margin: 0 0 16px;
  font-weight: var(--acs-w-light);
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.15;
  letter-spacing: var(--acs-track-tight-2);
  color: var(--acs-on-dark);
}
.acs-cta p:not(.acs-eyebrow) {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: var(--acs-w-body);
  line-height: 1.6;
  color: var(--acs-on-dark);
}
/* Hele sætningen er linket, men kun "Kontakt os" står fed. Uden understregning
   er det den fede vægt, der markerer, at her er noget at klikke på — farven
   alene ville ikke være nok. */
.acs-cta a {
  color: var(--acs-on-dark);
  text-decoration: none;
  font-weight: var(--acs-w-body);
}
.acs-cta a strong { font-weight: var(--acs-w-bold); }
.acs-cta a:hover { color: var(--acs-label-palm-dk); }
.acs-cta a:focus-visible {
  outline: 2px solid var(--acs-label-blue-dk);
  outline-offset: 3px;
}

/* --- Sektionsoverskrifter på lys flade ----------------------------------- */

.acs-h2 {
  margin: 0 0 14px;
  font-weight: var(--acs-w-light);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--acs-track-tight-2);
  color: var(--acs-ink);
}
.acs-h2--dark { color: var(--acs-on-dark); }
.acs-h2--trust {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-size: clamp(24px, 3.1vw, 42px);
}
.acs-h2--roles {
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  font-size: clamp(22px, 2.9vw, 44px);
}
.acs-lead-dark {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  max-width: 60ch;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: var(--acs-w-body);
  line-height: 1.6;
  color: rgba(246, 241, 231, .82);
}
.acs-intro { max-width: 52ch; margin-bottom: clamp(32px, 4vw, 52px); }
.acs-intro p:last-child {
  margin: 0;
  font-size: 17px;
  font-weight: var(--acs-w-body);
  line-height: 1.65;
  color: var(--acs-ink-muted-2);
}