/* ==========================================================================
   Mobil — samlet tilpasning af alle sider under 700px.
   Indlæses sidst, så den vinder over sidernes egne stilark. Designet er det
   samme; her strammes mål, luft og skriftstørrelser, så alt står på samme
   lodrette linje og fylder lidt mindre.
   ========================================================================== */

/* Linjeskift, der kun gælder på mobil (se mobilskift i indholdsfilerne). */
.acs-mobilskift { display: none; }

@media (max-width: 700px) {

  :root {
    --acs-gutter: 20px;
    /* Højden af klokke- og batterilinjen på iPhone (0 andre steder). Siden
       ligger op bag den, så heroens farve eller billede går helt til top. */
    --acs-safe-top: env(safe-area-inset-top, 0px);
    --acs-header-h: calc(56px + var(--acs-safe-top));
    --acs-section-y: 48px;
  }

  /* Ankerlinks må ikke lande under den faste header. */
  html { scroll-padding-top: calc(var(--acs-header-h) + 12px); }

  /* overflow-x: hidden på skallen gør den til en rullecontainer, og så
     virker position: sticky ikke. clip skjuler det samme uden at gøre det. */
  .acs-shell { overflow-x: clip; }

  /* --- Header: altid synlig --------------------------------------------- */

  .acs-header-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--acs-sand);
    padding-top: var(--acs-safe-top);
  }
  .acs-header-wrap--dark { background: var(--acs-evergreen); }

  /* Den gennemsigtige header ligger fast oven på heroen og får sin
     mørkegrønne flade, så snart man ruller (header.js sætter klassen). */
  .acs-header-wrap--overlay {
    position: fixed;
    background: transparent;
    transition: background-color .25s ease;
  }
  .acs-header-wrap--overlay.is-rullet,
  .acs-header-wrap--overlay:has(.acs-menu-toggle:checked) {
    background: var(--acs-evergreen);
  }
  .acs-header-wrap--overlay.is-rullet .acs-header { border-bottom-color: var(--acs-rule-dark); }

  /* Stregen under headeren står inden for margenen, som på desktop, i
     stedet for at gå helt ud til skærmkanten. Den tegnes som et
     pseudo-element, så farven fortsat følger headerens variant. */
  .acs-header {
    position: relative;
    border-bottom-width: 0;
  }
  .acs-header::after {
    content: "";
    position: absolute;
    left: var(--acs-gutter);
    right: var(--acs-gutter);
    bottom: 0;
    border-bottom: 1px solid;
    border-bottom-color: inherit;
  }
  .acs-header {
    padding: 14px var(--acs-gutter);
    min-height: 56px;
  }
  .acs-header__logo img { height: 10px; }
  /* Kun de tre streger — ordet MENU skjules. Skærmlæsere får stadig
     checkboxens aria-label ("Åbn menu"). Trykfladen er gjort større, så
     ikonet er nemt at ramme uden teksten ved siden af. */
  .acs-burger { font-size: 0; gap: 0; padding: 10px 0 10px 14px; }
  .acs-burger__bars { width: 20px; }
  /* Cremefarven forsvandt oven på lyse billeder — hvid står tydeligt. */
  .acs-header-wrap--overlay .acs-burger,
  .acs-header-wrap--dark .acs-burger { color: #ffffff; }
  .acs-header-wrap--overlay .acs-burger__bars span,
  .acs-header-wrap--dark .acs-burger__bars span { background: #ffffff; }
  /* Oven på billedet: en anelse kraftigere streger og en svag skygge, så
     menuen også kan læses foran det lyse gardin. */
  .acs-header-wrap--overlay:not(.is-rullet) .acs-burger {
    font-weight: var(--acs-w-medium);
    text-shadow: 0 1px 6px rgba(4, 27, 21, .45);
  }
  .acs-header-wrap--overlay:not(.is-rullet) .acs-burger__bars span {
    height: 1.5px;
    box-shadow: 0 1px 4px rgba(4, 27, 21, .4);
  }

  /* Udfoldet menu: rulles indeni, hvis den er højere end skærmen. */
  .acs-menu-toggle:checked ~ .acs-nav {
    max-height: calc(100dvh - var(--acs-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 4px;
  }
  .acs-menu-toggle:checked ~ .acs-nav a {
    padding: 13px 0;
    font-size: 16px;
  }
  .acs-menu-toggle:checked ~ .acs-nav .acs-sprogvalg { padding: 13px 0 6px; }
  .acs-menu-toggle:checked ~ .acs-nav .acs-sprogvalg a {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  /* Sprogvælgeren i den udfoldede mobilmenu. I base.css mangler nogle
     krøllede parenteser i sprogvælger-blokken, så dens mobilregel og
     farverne til mørk bund aldrig slår igennem. Her sættes de for mobil;
     base.css er ikke rørt, så desktop er uændret. */
  .acs-nav .acs-sprogvalg {
    padding-left: 0;
    border-left: 0;
  }
  .acs-header-wrap--overlay .acs-nav .acs-sprogvalg__skille,
  .acs-header-wrap--dark .acs-nav .acs-sprogvalg__skille { color: rgba(255, 255, 255, .3); }
  .acs-header-wrap--overlay .acs-nav .acs-sprogvalg__valg,
  .acs-header-wrap--dark .acs-nav .acs-sprogvalg__valg {
    color: rgba(246, 241, 231, .5);
    font-weight: var(--acs-w-body);
  }
  .acs-header-wrap--overlay .acs-nav .acs-sprogvalg__valg.is-aktiv,
  .acs-header-wrap--dark .acs-nav .acs-sprogvalg__valg.is-aktiv {
    color: #F6F1E7;
    font-weight: var(--acs-w-bold);
  }

  /* Heroer under den faste overlay-header: plads til headeren, ikke mere. */
  .acs-pagehero__inner { padding-top: calc(var(--acs-header-h) + 40px); }
  .acs-fhero__inner { padding-top: calc(var(--acs-header-h) + 32px); }

  /* Forsiden: billedet fylder hele første skærm. Teksten står nederst, så
     personerne står frit i den øverste halvdel, og toningen kommer nedefra —
     mørk bag teksten, lys foroven. Logostriben kommer først frem, når man
     ruller. svh, så højden ikke hopper, når Safaris adresselinje folder sig
     ind og ud. */
  /* Fotoet og toningen dækker hele heroen inklusive logostriben, som på
     desktop — så striben ligger på billedet og ikke på sin egen flade. */
  .acs-fhero__photo,
  .acs-fhero__veil {
    inset: 0;
    height: 100%;
  }
  /* 42 % skar personen yderst til højre væk; ved 62 % står alle tre. */
  .acs-fhero__photo {
    object-position: 62% center;
    /* Billedet er næsten kvadratisk, så på en høj telefon blev der et stort
       stykke tomt gardin over personerne. Zoomet ind om dem fylder de den
       øverste halvdel i stedet. */
    transform: scale(1.07);
    /* Zoomet vokser opad fra bundkanten. Lå udgangspunktet højere, voksede
       billedet også ned under toningen, og en strimmel gulv stak frem
       mellem heroen og logostriben. */
    transform-origin: 50% 100%;
  }
  .acs-fhero__veil {
    background: linear-gradient(0deg,
      rgba(4, 27, 21, .94) 0%,
      rgba(4, 27, 21, .80) 35%,
      rgba(4, 27, 21, .35) 65%,
      rgba(4, 27, 21, .25) 100%);
  }
  .acs-fhero__section {
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .acs-fhero__inner { padding-bottom: 48px; }
  .acs-fhero h1 {
    font-size: clamp(46px, 14vw, 58px);
    line-height: 1.02;
    letter-spacing: -.02em;
  }
  .acs-fhero__lead {
    margin-top: 22px;
    max-width: none;
    font-size: 16.5px;
    line-height: 1.55;
  }

  /* Stregen under "ét sted" flugter med ordene, også når de brydes. */
  .acs-scribble--hero { display: inline-block; white-space: nowrap; }
  .acs-scribble--hero svg {
    left: 0;
    right: 0;
    width: 100%;
    bottom: -10px;
  }

  .acs-fhero .acs-logos {
    padding: 26px 0 30px;
  }
  .acs-fhero .acs-logos__track { gap: 34px; }
  /* Logoernes faste størrelse står inline; på mobil skaleres de ned. */
  .acs-fhero .acs-logos img {
    height: 20px !important;
    width: auto !important;
    opacity: .7;
  }

  /* --- Typografi: en tak roligere --------------------------------------- */

  .acs-eyebrow { font-size: 12px; margin-bottom: 12px; }

  .acs-hero h1,
  .acs-vhero h1,
  .acs-shero h1,
  .acs-pagehero h1,
  .acs-contact h1 { font-size: 26px; line-height: 1.12; }
  .acs-ahero h1,
  .acs-case__hero h1,
  .acs-vib__hero h1,
  .acs-tekst h1,
  .acs-wp h1 { font-size: 27px; line-height: 1.12; }

  .acs-h2,
  .acs-h2--trust,
  .acs-start__head h2,
  .acs-cta h2,
  .acs-why__head h2,
  .acs-product h2,
  .acs-help__head h2,
  .acs-serie h2,
  .acs-coop__head h2,
  .acs-svc__inner h2,
  .acs-proc__head h2,
  .acs-values h2,
  .acs-team__head h2,
  .acs-whyus__head h2,
  .acs-board__head h2,
  .acs-story__text h2,
  .acs-places h2,
  .acs-vib__text h2,
  .acs-vib__learn h2,
  .acs-vib__bridge-text h2,
  .acs-whistle h2,
  .acs-wp--cta h2 { font-size: 23px; line-height: 1.18; }
  .acs-news h2 { font-size: 26px; }

  .acs-hero__lead,
  .acs-vhero p:not(.acs-eyebrow),
  .acs-pagehero__lead,
  .acs-whistle__lead,
  .acs-team__head p:not(.acs-eyebrow),
  .acs-board__head p:not(.acs-eyebrow) {
    font-size: 16px;
    line-height: 1.6;
  }
  .acs-hero__lead,
  .acs-vhero p:not(.acs-eyebrow) { margin-top: 18px; }

  /* Store tal */
  .acs-svc__n { font-size: 40px; }
  .acs-start__n { font-size: 36px; }
  .acs-coop__n { font-size: 28px; }
  .acs-whyus__n { font-size: 26px; }

  .acs-values__grid h3,
  .acs-whyus__item h3,
  .acs-trust__item h3,
  .acs-places__item h3 { font-size: 17px; }
  .acs-rows__t { font-size: 19px; }

  /* --- Gitre i én kolonne, der aldrig er bredere end skærmen ------------ */

  .acs-values__grid,
  .acs-team__grid,
  .acs-places__grid,
  .acs-cards,
  .acs-vlist__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .acs-story__text,
  .acs-story__shot,
  .acs-whistle__box > div { min-width: 0; flex-basis: 100%; }
  /* Nummererede rækker (Academy): tal og titel på samme linje,
     beskrivelsen under titlen. */
  .acs-rows__row { gap: 10px 14px; padding: 22px 0; }
  .acs-rows__n { flex: 0 0 28px; }
  .acs-rows__t { flex: 1 1 0; min-width: 0; }
  .acs-rows__d { flex: 1 1 100%; padding-left: 42px; }

  /* "Derfor os": tallet i sin egen smalle kolonne, teksten fylder resten. */
  .acs-whyus__item { gap: 14px; padding-top: 20px; }
  .acs-whyus__item > div { min-width: 0; }
  .acs-whyus__n { width: 36px; }

  /* Holdet: to portrætter pr. række i stedet for ét stort. */
  .acs-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  /* Mail, telefon og titel står altid på én linje. Kolonnen er
     (skærm − 2 × 20px margen − 16px mellemrum) / 2 bred, og skriften
     skaleres efter den, så den længste mail ("anna.hollendsted@…", 211px
     ved 13px) lige netop passer — på enhver telefonbredde, aldrig over 13px. */
  .acs-team__kontakt,
  .acs-team__titel { white-space: nowrap; }
  .acs-team__kontakt { font-size: min(13px, calc((100vw - 56px) * .0298)); }
  .acs-team__titel { font-size: min(13px, calc((100vw - 56px) * .0314)); }
  .acs-team__kontakt a { word-break: normal; }

  /* Academy, funktionskortene: to og to, mindre luft og tekst indeni. */
  .acs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acs-card { padding: 16px 14px 18px; }
  .acs-card__n { font-size: 12px; margin-bottom: 14px; }
  .acs-card h3 { font-size: 16px; margin-bottom: 6px; overflow-wrap: anywhere; }
  .acs-card p:not(.acs-eyebrow) { font-size: 13px; line-height: 1.5; }

  /* Forsiden, Academy-blokken: punkterne to og to som på desktop, billedet
     under. Desktop er urørt — blokken er markeret som låst dér. */
  .acs-product__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin-top: 28px;
  }
  .acs-product__cell { padding: 14px 0; }
  .acs-product__cell h3 { font-size: 15px; }
  .acs-product__cell p:not(.acs-eyebrow) { font-size: 13px; line-height: 1.45; }
  .acs-product__more a { font-size: 15px; }
  .acs-product__shot { min-width: 0; flex-basis: 100%; }

  /* Forsiden, kundestemmen: portrættet i fuld bredde øverst og teksten
     under, som en artikel — i stedet for et lille billede alene i venstre
     side under teksten. */
  .acs-serie__inner { gap: 24px; }
  .acs-serie__portrait {
    order: -1;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .acs-serie__portrait img {
    aspect-ratio: 4 / 3;
    object-position: 50% 35%;
  }
  .acs-serie__text { min-width: 0; flex-basis: 100%; }
  .acs-serie h2 { margin-bottom: 12px; }
  .acs-serie p:not(.acs-eyebrow) { font-size: 15px; margin-bottom: 18px; }
  .acs-serie a { font-size: 15px; }

  /* "Drift og sikkerhed" (Academy): punkterne to og to. */
  .acs-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .acs-trust__item { padding-top: 16px; }
  .acs-trust__item h3 { font-size: 15px; line-height: 1.25; margin-bottom: 6px; }
  .acs-trust__item p:not(.acs-eyebrow) { font-size: 12px; line-height: 1.5; letter-spacing: -.01em; }
  .acs-mobilskift { display: inline; }
  /* Overskriften brydes før "over tid", så de to ord står samlet. */
  .acs-h2--trust { max-width: 310px; }
  /* "Løbende udvikling" på to linjer som titlen ved siden af. */
  .acs-trust__item:nth-child(4) h3 { max-width: 9ch; }

  /* Academy, "Sådan kommer I i gang": de fire trin to og to. */
  .acs-start__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .acs-start__n { font-size: 30px; }
  .acs-start__steps h3 { font-size: 15px; line-height: 1.25; }
  .acs-start__steps p:not(.acs-eyebrow) { font-size: 13px; line-height: 1.5; }

  /* Sådan hjælper vi, Whistle Advisor: de tre punkter på én linje. */
  .acs-whistle__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .acs-whistle__grid > div { padding-top: 14px; }
  .acs-whistle__grid h3 { font-size: 14px; line-height: 1.25; margin-bottom: 6px; }
  .acs-whistle__grid p:not(.acs-eyebrow) { font-size: 12px; line-height: 1.45; }
  /* "Hjælp hele / vejen" på to linjer som de to andre titler. */
  html[lang="da"] .acs-whistle__grid > div:nth-child(3) h3 { max-width: 80px; }
  /* "Sikker adgang / for de / ansvarlige." på tre linjer som naboerne. */
  html[lang="da"] .acs-whistle__grid > div:nth-child(2) p { max-width: 85px; }

  /* Cases: mindre luft mellem heroens tekst og logostriben. */
  .acs-pagehero--cases .acs-pagehero__inner { padding-bottom: 28px; }
  .acs-pagehero--cases .acs-logos { padding-top: 14px; }

  /* Om os, "Derfor os": to og to. Kolonnerne er for smalle til tallet ved
     siden af titlen, så tallet står over den i hver kolonne. */
  .acs-whyus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .acs-whyus__item { flex-direction: column; gap: 10px; padding-top: 16px; }
  .acs-whyus__n { width: auto; font-size: 26px; }
  .acs-whyus__item h3 { font-size: 15px; line-height: 1.25; margin-bottom: 6px; }
  .acs-whyus__item p:not(.acs-eyebrow) { font-size: 12.5px; line-height: 1.5; }
  /* "med jer." står på sin egen linje (mobilskift i da.json). */
  /* Alle fire titler på to linjer, så teksterne under starter i samme højde:
     "Vi svarer / hurtigt" og "Vi tør prøve / noget nyt". */
  /* Bredderne passer til de danske ord; den engelske tekst brydes selv. */
  html[lang="da"] .acs-whyus__item:nth-child(2) h3 { max-width: 90px; }
  html[lang="da"] .acs-whyus__item:nth-child(3) h3 { max-width: 110px; }
  /* Linket ligger i punkt 04, men står under begge kolonner ude til venstre. */
  .acs-whyus__grid { position: relative; padding-bottom: 40px; }
  .acs-whyus__item a {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
    font-size: 14px;
  }

  /* Om os, advisory board: to og to. */
  .acs-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  /* Hvert punkt er en kolonne, og LinkedIn-linket skubbes til bunden, så
     linkene i samme række står på linje uanset titlens længde. */
  .acs-board__item { padding-top: 16px; display: flex; flex-direction: column; }
  .acs-board__n { font-size: 11px; margin-bottom: 8px; }
  .acs-board__item h3 { font-size: 15px; line-height: 1.25; }
  .acs-board__rolle { font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
  .acs-board__item a { font-size: 13px; margin-top: auto; align-self: flex-start; }

  /* Cases: billedet over teksten i hver case, som et kort. */
  .acs-caselist__shot { order: -1; flex-basis: 100%; min-width: 0; }
  .acs-caselist__text { flex-basis: 100%; min-width: 0; }
  .acs-caselist__row { gap: 18px; }

  /* Viden i bevægelse: portrættet i fuld bredde over teksten, med navn og
     titel lige under — som kundestemmen på forsiden. */
  .acs-vib__row { gap: 28px; }
  .acs-vib__fig { order: -1; flex: 1 1 100%; min-width: 0; }
  .acs-vib__fig img { aspect-ratio: 4 / 3; object-position: 50% 35%; }
  .acs-vib__fig figcaption { margin-top: 12px; font-size: 14px; }
  .acs-vib__fig figcaption span { font-size: 13px; }
  .acs-vib__text { flex-basis: 100%; min-width: 0; }

  /* Procesoverskriften klæber ved siden af trinene på desktop. Her står den
     over dem, og så skal den rulle med — ellers lægger den sig oven i dem. */
  .acs-proc__head { position: static; min-width: 0; }
  .acs-proc__head h2 { max-width: 20ch; }
  /* Tidslinjen: prikkernes venstre kant flugter med teksten over, i stedet
     for at prikkerne stikker 8px ud i margenen. */
  .acs-proc__dot { left: 0; }
  .acs-proc__thread { left: 1px; }
  .acs-proc__step { padding-left: 50px; }

  /* Kassen på Sådan hjælper vi: samme indryk som kortene omkring den. */
  .acs-whistle__box { padding: 24px 20px; }
  .acs-whistle__mark { white-space: normal; }

  /* --- Viden: alle faner på én række ------------------------------------ */

  .acs-filter__bar {
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .acs-filter__bar::-webkit-scrollbar { display: none; }
  .acs-filter__tab {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
    padding-bottom: 10px;
  }
  .acs-vcard h2 { font-size: 18px; margin-top: 14px; }

  /* --- Footer ----------------------------------------------------------- */

  /* Kanten mellem sidste sektion og footeren falder på en halv pixel, og
     på iPhone tegnes den som en tynd streg over footerens egen streg.
     Footeren lægges én pixel ind over sektionen, så kanten forsvinder. */
  .acs-footer:not(.acs-footer--bare) { margin-top: -1px; }

  .acs-footer__inner { padding: 24px var(--acs-gutter) 32px; }
  .acs-footer__row { flex-direction: column; gap: 22px; }
  .acs-footer__logo img { height: 10px; }
  /* De fire små links på én række; luften og skriften skrumper en anelse
     på smalle telefoner, så Privatlivspolitik ikke ryger ned. */
  .acs-footer__links {
    gap: 14px clamp(10px, 4vw, 18px);
    font-size: clamp(12px, 3.6vw, 14px);
  }
  .acs-footer__links a { white-space: nowrap; }
  .acs-footer__links .acs-footer__cta { flex-basis: 100%; }
  /* Sider med footerUdenCtaMobil (Academy) viser ikke opfordringen på mobil. */
  .acs-footer--uden-cta-mobil .acs-footer__cta { display: none; }
}