:root {
    --s8-sort: #0A0A0A;
    --s8-hvid: #FFFFFF;
    --s8-roed: #E3241B;
    --s8-graa: #8A8A8A;
    --s8-graa-dyb: #1E1E1E;
    --s8-graa-linje: #262626;
    --s8-font-display: 'Archivo', sans-serif;
    --s8-font-mono: 'IBM Plex Mono', monospace;

    --s8-type-display-xl-size: clamp(44px, 8vw, 96px);
    --s8-type-display-size: clamp(32px, 5vw, 56px);
    --s8-type-subhead-size: clamp(20px, 2.5vw, 28px);
    --s8-type-body-size: 17px;
    --s8-type-mono-label-size: 11px;
    --s8-type-mono-data-size: 13px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--s8-sort);
    color: var(--s8-hvid);
    font-family: var(--s8-font-display);
    font-size: var(--s8-type-body-size);
    line-height: 1.6;
  }

  main { display: block; }

  h1, h2, h3, p { margin: 0; }

  a { color: inherit; }

  img, svg { max-width: 100%; display: block; }

  :focus-visible {
    outline: 2px solid var(--s8-hvid);
    outline-offset: 3px;
  }

  /* Skip link: hidden until keyboard focus */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--s8-hvid);
    color: var(--s8-sort);
    padding: 0.75em 1em;
    font-family: var(--s8-font-mono);
    font-size: var(--s8-type-mono-label-size);
    z-index: 100;
  }
  .skip-link:focus {
    left: 1rem;
    top: 1rem;
  }

  /* Visually hidden, available to screen readers */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Mono document layer */
  .mono-label {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: var(--s8-graa);
  }
  .mono-data {
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.7;
    color: var(--s8-graa);
  }
  .kilde a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
  }
  .kilde a:hover,
  .kilde a:focus-visible {
    color: var(--s8-hvid);
  }

  /* Display punctuation: the locked red full stop, static. Allowed red use. */
  .punktum { color: var(--s8-roed); }

  /* Site header: sticky, gennemsigtig over hero; baggrund + hårstreg efter ~8px scroll.
     Genbrugt fra udkast B inkl. specificitets-fixet for header-CTA'en <= 480px. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
    /* Eget view-transition-navn: headeren fanges som sin egen VT-gruppe og bliver
       STAAENDE (translaterer ikke) under sideskift, mens indholdet/roden glider
       under den. Logo-punktets morph (logo-period) er sit eget navn og virker
       fortsat paa tvaers af sider. */
    view-transition-name: site-header;
  }
  .site-header.is-scrolled {
    background: rgba(10, 10, 10, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom-color: var(--s8-graa-linje);
  }
  .header-inner {
    /* Aligned to the same ~1200px content container as the sections below. */
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 4rem);
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .brand {
    font-family: var(--s8-font-display);
    font-weight: 900;
    /* Logoet ~1.5x større (17px -> 26px). line-height: 1 holder baseline'en
       centreret via header-inner'ens align-items: center, så headerens højde
       (4rem) er uændret; teksten fylder mere uden at vokse baren. */
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--s8-hvid);
    text-decoration: none;
    white-space: nowrap;
  }
  .brand-dot { color: var(--s8-roed); }
  /* Logoets roede punktum som eget element. Slotten reserverer ALTID punktummets
     bredde (display: inline-block), saa "SOLUTION8" og "ai" staar helt fast, uanset
     om punktummet hviler i logoet eller er hoppet hen til et menupunkt. Default:
     usynlig (visibility: hidden) = punktummet er "vaek" (paa en underside ligger det
     ved det aktive menupunkt), men slotten holder bredden. .logo-period-here: synligt
     + view-transition-name, saa punktummet hviler i logoet (forside + kontakt) og
     morpher paa tvaers af sider. */
  /* Logo-punktet er nu en lille ROED FIRKANT (ikke et "."-glyf), saa det matcher
     den firkantede aktiv-indikator ved menupunkterne: punktet ser dermed ud til at
     "flytte" fra logoet hen til det aktive menupunkt. Slotten reserverer ALTID
     firkantens bredde (display: inline-block), saa "SOLUTION8" og "ai" staar helt
     fast, uanset om punktet hviler i logoet eller er hoppet hen til et menupunkt. */
  .logo-period {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0.06em;
    vertical-align: baseline;
    background: var(--s8-roed);
    border-radius: 0;
    visibility: hidden;
  }
  .logo-period-here {
    visibility: visible;
  }
  .header-nav {
    display: none;
    align-items: center;
    gap: 1.4rem;
  }
  .nav-link {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: var(--s8-graa);
    text-decoration: none;
    transition: color 150ms ease-out;
    white-space: nowrap;
  }
  .nav-link:hover,
  .nav-link:focus-visible { color: var(--s8-hvid); }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .header-cta {
    padding: 0.55em 1.1em;
    font-size: 14px;
  }
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 36px;
    background: transparent;
    color: var(--s8-hvid);
    border: 1px solid var(--s8-graa-linje);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 150ms ease-out;
  }
  .burger:hover,
  .burger:focus-visible { border-color: var(--s8-hvid); }
  @media (min-width: 64rem) {
    .header-nav { display: flex; }
    .burger { display: none; }
  }
  @media (max-width: 30rem) {
    /* Higher specificity than .cta (which comes later in the sheet), so
       display: none wins on the smallest screens. */
    .header-actions .header-cta { display: none; }
  }

  /* === Nav-polish: logoets roede punktum som rejsende aktiv-indikator +
         cross-page slide (View Transitions). Findes 1:1 baade her og i
         forside-c.html's inline-shell (drift-arkitektur), saa alle sider opfoerer
         sig ens. === */
  @view-transition { navigation: auto; }

  /* Det aktive menupunkt baerer punktummet: en lille roed prik under punktet med
     samme view-transition-name som logoets punktum (logo-period). Der er praecis
     EN logo-period pr. side (enten i logoet ELLER under et menupunkt), saa den
     morpher paa tvaers af dokumenter: punktummet forlader logoet og hopper hen til
     det valgte menupunkt. Renderer statisk og korrekt ogsaa uden VT-stotte. */
  .nav-link { position: relative; }
  /* Aktiv-indikatoren er en lille ROED FIRKANT ved ORDETS ENDE paa baseline (der,
     hvor et punktum naturligt staar, fx "Ydelser" + firkant) - samme firkant som
     logoets punktum. Den er nu et AEGTE element (.nav-period), ikke et ::after-
     pseudo, saa den kan baere view-transition-name og morphe rent paa tvaers af
     sider (pseudo-elementer er upaalidelige som VT-deltagere). .nav-period ligger
     paa ALLE menupunkter og reserverer bredden (transparent), saa intet menupunkt
     flytter sig; kun det aktive faar .nav-period-here (rod + navngivet paa desktop). */
  .nav-period {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 3px;
    vertical-align: baseline;
    border-radius: 0;
    background: transparent;
  }
  .nav-period-here {
    background: var(--s8-roed);
  }

  /* Slide-retning ud fra nav-raekkefolgen: frem (hoejere index) glider ind fra
     hoejre, tilbage glider ind fra venstre. .vt-forward/.vt-back saettes paa
     :root af JS (pageswap + pagereveal); --vt-dur skaleres med spring-afstanden,
     saa et stoerre hop laeser som et laengere sweep. */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes s8-vt-in-right { from { transform: translateX(100%); }  to { transform: translateX(0); } }
    @keyframes s8-vt-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    @keyframes s8-vt-out-left  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    @keyframes s8-vt-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }

    :root.vt-forward::view-transition-old(root) { animation: s8-vt-out-left  var(--vt-dur, 300ms) ease both; }
    :root.vt-forward::view-transition-new(root) { animation: s8-vt-in-right  var(--vt-dur, 300ms) ease both; }
    :root.vt-back::view-transition-old(root)    { animation: s8-vt-out-right var(--vt-dur, 300ms) ease both; }
    :root.vt-back::view-transition-new(root)    { animation: s8-vt-in-left   var(--vt-dur, 300ms) ease both; }
  }

  /* Punktets morph = DESKTOP-funktion (nav er skjult < 64rem). Kun paa desktop
     navngives det ENE synlige punkt - i logoet (forside/kontakt) ELLER ved det
     aktive menupunkt (undersider) - saa der er praecis EN logo-period pr. side.
     Punktet loeftes dermed ud af header-snapshot'et; da baade logoet og HVERT
     menupunkt altid har en reserveret (transparent) punkt-slot, er gammelt og nyt
     header-snapshot pixel-identiske -> header-cross-fade er usynlig, og KUN punktet
     bevaeger sig: det glider rent fra logo til menupunkt (og punkt-til-punkt).
     Derfor er der ingen 'to punktummer' og intet header-flimmer laengere. Paa mobil
     er nav skjult -> intet navn -> ingen foraeldreloes morph, kun root-sliden. */
  @media (min-width: 64rem) {
    .logo-period-here,
    .nav-period-here { view-transition-name: logo-period; }
    ::view-transition-group(logo-period) {
      animation-duration: 420ms;
      animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
    }
  }

  /* Reduced motion: ingen slide - navigation er instant. */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
  }

  /* Skuffemenu: højre-slide, 88vw / max 24rem, bagtæppe; Esc, bagtæppe-klik og
     link-tryk lukker; fokus flyttes ind ved åbning og tilbage ved lukning. */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-out, visibility 0s linear 200ms;
  }
  .drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-out;
  }
  .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: 88vw;
    max-width: 24rem;
    background: var(--s8-sort);
    border-left: 1px solid var(--s8-graa-linje);
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 250ms ease-out, visibility 0s linear 250ms;
  }
  .drawer.is-open {
    transform: none;
    visibility: visible;
    transition: transform 250ms ease-out;
  }
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }
  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--s8-hvid);
    border: 1px solid var(--s8-graa-linje);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 150ms ease-out;
  }
  .drawer-close:hover,
  .drawer-close:focus-visible { border-color: var(--s8-hvid); }
  .drawer-nav { display: flex; flex-direction: column; }
  .drawer-link {
    display: block;
    padding: 0.95rem 0;
    border-top: 1px solid var(--s8-graa-linje);
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--s8-hvid);
    text-decoration: none;
    transition: color 150ms ease-out;
  }
  .drawer-nav .drawer-link:last-of-type { border-bottom: 1px solid var(--s8-graa-linje); }
  .drawer-link:hover,
  .drawer-link:focus-visible { color: var(--s8-graa); }
  .drawer-cta { margin-top: 1.5rem; }

  /* Section rhythm */
  /* Delt indholdscontainer: normal marketing-sidebredde (~1200px / 75rem),
     centreret, med responsive sidemargener. Layoutet nedenfor bruger bredden
     til struktur (grids, hero, billeder, diagram) - ikke til linjelængde. */
  .beat {
    max-width: 75rem;
    margin: 0 auto;
    padding: 5rem clamp(1.25rem, 5vw, 4rem);
    border-top: 1px solid var(--s8-graa-linje);
    scroll-margin-top: 4.5rem;
  }
  .beat > * + * { margin-top: 1.25rem; }
  .beat h2 + * { margin-top: 1.75rem; }
  /* Læsbarhedsgaranti: løbende brødtekst (direkte i en sektion) må ikke strække
     sig til hele bredden - kap til et behageligt målemål (~68ch). */
  .beat > p.body { max-width: 68ch; }

  .beat-hero {
    border-top: none;
    min-height: calc(92vh - 4rem);
    display: flex;
    flex-direction: column;
    /* Top-forankret (ikke justify-content: center): en centreret hero re-centrerer
       hele blokken, hvis indholdshoejden aendrer sig bare en anelse under load
       (skrivning, terminal, foto/fontmaaling) - og flytter dermed eyebrow + H1
       synligt. Med flex-start + en stabil top-padding staar eyebrow/H1 fast fra
       foerste paint; hoejdeaendringer nedenfor skubber intet opad. Nul re-center-CLS.
       Top-paddingen (~14vh) placerer indholdet omtrent hvor den centrerede version
       laa. */
    justify-content: flex-start;
    padding-top: clamp(4rem, 14vh, 9rem);
    padding-bottom: 5rem;
  }

  .eyebrow { margin: 0 0 1.5rem; }

  /* Hero, genbrugt fra udkast B: H1 skrives med den delte skrivemaskine, det røde
     punktum lander med vægt; derefter afsløres underlinje, CTA'er og terminalvinduet,
     som selv skriver sine rækker ind. Uden .s8-motion er CSS-defaulten sluttilstanden.
     Rød kun til punktum, CTA og terminalens anbefalings-markering. */
  h1#hero-h1 {
    font-family: var(--s8-font-display);
    font-weight: 900;
    font-size: var(--s8-type-display-xl-size);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
    min-height: 1.05em;
    /* Nul-CLS: en usynlig "ghost" med den FULDE titel reserverer H1'ens endelige
       (fler-linjede) geometri fra foerste paint, mens det typede lag ligger
       absolut ovenpaa. Titlen vokser derfor ikke, mens den skrives - resten af
       heroen (underlinje, CTA'er, terminal) staar stille. Ghosten reflower
       desuden sammen med webfonten, saa font-load heller ikke flytter noget. */
    position: relative;
  }
  .hero-h1-ghost {
    visibility: hidden;
  }
  .hero-h1-live {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    /* Uden bevaegelse er der intet skrive-forloeb: vis blot det statiske lag i
       flow og drop ghosten (den ville ellers laegge dobbelt hoejde til). */
    .hero-h1-ghost { display: none; }
    .hero-h1-live { position: static; }
  }

  .cursor {
    display: none;
    width: 0.5ch;
    margin-left: 0.05em;
    background: var(--s8-hvid);
  }
  html.s8-motion .cursor:not(.is-done) {
    display: inline-block;
    animation: s8-blink 1s steps(1) infinite;
  }
  @keyframes s8-blink { 50% { opacity: 0; } }

  /* Det røde punktum er heroens skrivemarkør: det leder tekstens ende, mens H1
     skrives (solidt rødt), og blinker roligt (~1s) når hele heroen er renderet.
     Reduced motion: statisk rødt punktum (ingen skrivning, intet blink). */
  .tagline-dot {
    display: inline-block;
    color: var(--s8-roed);
  }
  html.s8-motion .tagline-dot.is-blinking {
    animation: s8-blink 1s steps(1) infinite;
  }

  @keyframes s8-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
  }
  h1.is-shaking { animation: s8-shake 150ms linear; }

  .hero-reveal { opacity: 1; }
  html.s8-motion .hero-reveal {
    opacity: 0;
    transition: opacity 220ms ease-out;
  }
  html.s8-motion .hero-reveal.is-visible { opacity: 1; }

  .subline {
    font-weight: 700;
    font-size: var(--s8-type-subhead-size);
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 42ch;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }

  .cta {
    display: inline-block;
    font-family: var(--s8-font-display);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: 0.9em 1.6em;
    border-radius: 2px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 200ms ease-out, color 200ms ease-out, filter 200ms ease-out;
  }
  .cta-primary {
    background: var(--s8-roed);
    color: var(--s8-hvid);
  }
  .cta-primary:hover,
  .cta-primary:focus-visible {
    filter: brightness(1.1);
  }
  .cta-secondary {
    background: transparent;
    color: var(--s8-hvid);
    border-color: var(--s8-hvid);
  }
  .cta-secondary:hover,
  .cta-secondary:focus-visible {
    background: var(--s8-hvid);
    color: var(--s8-sort);
  }

  h2.display,
  p.display {
    font-family: var(--s8-font-display);
    font-weight: 900;
    font-size: var(--s8-type-display-size);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .body { font-size: var(--s8-type-body-size); line-height: 1.6; }

  /* Fotografisk lag, variant C-revision: farvefotos (ingen gråtone), rammeløse,
     med en robust gradient-blødning til sidens sort (#0A0A0A), så billedet
     smelter ind i stedet for at sidde i en hård kasse. Ingen billedtekster.
     Fotos er stock (Unsplash), ikke SOLUTION8-kunder eller -medarbejdere -
     se img/c/CREDITS.md. */
  .photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--s8-sort);
  }
  .photo img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Gradient-blødning: en konsistent top- og bund-fade mod #0A0A0A, der virker
     for et hvilket som helst mørkere foto (ikke tunet til ét bestemt motiv).
     Rent dekorativt, uden for tekstflowet. */
  .photo-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, #0A0A0A 0%, rgba(10, 10, 10, 0) 22%),
      linear-gradient(to top, #0A0A0A 0%, rgba(10, 10, 10, 0) 20%);
  }
  /* align-items: start pinner venstre kolonne til rækkens top, så heroteksten
     ikke bevæger sig, når terminalen (højre) skriver sine rækker ind. Terminalen
     reserverer desuden sin fulde højde fra start (linjerne har min-height), så
     der ikke sker noget lodret hop under afsløringen. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  @media (min-width: 64rem) {
    .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  }
  /* Fuldbredde-landskabsfoto i sektionsflowet. */
  .photo-full { margin-top: 2.5rem; }
  /* Kontakt: portrætfoto side-om-side med brødteksten (den anbefalede
     portrætbehandling); stakker på mobil. */
  .kontakt-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(2rem, 5vw, 4rem);
    /* stretch (ikke center): landskabsfotoet fylder tekstkolonnens hoejde via
       object-fit: cover, saa der ikke staar et tomt hvidt felt ved siden af den
       kortere tekst. */
    align-items: stretch;
  }
  /* Brødteksten i venstre kolonne holdes på et læsbart målemål. */
  .kontakt-lead .body { max-width: 60ch; }
  /* Desktop (to kolonner): fotoet fylder raekkens fulde hoejde og beskaeres paent,
     saa billed- og teksthoejde balancerer. */
  @media (min-width: 48.0625rem) {
    .kontakt-lead .photo { height: 100%; }
    .kontakt-lead .photo img { height: 100%; object-fit: cover; }
  }
  @media (max-width: 48rem) {
    .kontakt-lead { grid-template-columns: minmax(0, 1fr); }
    .kontakt-lead .photo { max-width: 32rem; }
  }

  /* Terminalen (hero-devicet), variant C: STATISK og ikke-interaktiv. Mono-kort
     med vindueskrom (tre prikker + filnavn modelvalg.sh), promptlinje og
     modelrækker med positionerings-tags. Ingen klik, ingen tilstand, ingen
     udlæsning: den printer sin udskrift én gang og bliver stående. Én sparsom
     rød brug: den anbefalede række (Anthropic Claude) får en rød inset-kant som
     beslutningsmarkering. Ved load skrives rækkerne ind sekventielt; reduced
     motion = opmærkningen ER sluttilstanden. */
  .terminal {
    border: 1px solid var(--s8-graa-linje);
    background: var(--s8-sort);
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.7;
  }
  .terminal-chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--s8-graa-linje);
  }
  .terminal-dot-chrome {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s8-graa-dyb);
    border: 1px solid var(--s8-graa-linje);
  }
  .terminal-file {
    margin: 0 0 0 0.6rem;
  }
  .terminal-body { padding: 1.1rem 1.1rem 1.25rem; }
  .terminal-prompt {
    margin: 0 0 0.6em;
    color: var(--s8-hvid);
    min-height: 1.7em;
  }
  .terminal-prompt .prompt-sigil { color: var(--s8-graa); }
  .term-rows { display: block; }
  .term-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    line-height: 1.7;
    color: var(--s8-graa);
    padding: 0.3em 0.45em;
    box-shadow: inset 0 0 0 1px transparent;
  }
  /* Ingen fremhaevet raekke: Claude-raekken laeser praecis som de oevrige model-
     raekker (samme graa tekst, samme vaegt, ingen hvid, ingen ramme/box). Tag-
     teksten "Den bedste" staar stadig, men uden visuel emphase - raekkerne er nu
     ensartede. (.is-recommended har derfor ingen visuel effekt laengere.) */
  .term-name { min-height: 1.7em; }
  .term-tag { white-space: nowrap; color: var(--s8-graa); }
  html.s8-motion .term-tag {
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  html.s8-motion .term-tag.is-shown { opacity: 1; }
  .term-final {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-top: 0.55em;
    padding: 0.55em 0.45em 0;
    border-top: 1px solid var(--s8-graa-linje);
    color: var(--s8-hvid);
  }
  .terminal-punchline { margin: 1rem 0 0; }

  /* Kundelogobaand: horisontalt glidende marquee (reduced motion = statisk).
     RIGTIGE kundelogoer paa hvide "chips": hvert logo ligger paa sin egen afrundede
     HVIDE plade med ens polstring, mens selve baandet forbliver moerkt. Det haandterer
     blandingen af filer: hvide JPEG'er (broen, el-service, dit) smelter ind i den
     hvide chip (ingen synlig firkant), mens de transparente farvelogoer laeser rent
     paa hvid. Hvert logo normaliseres til samme visnings-hoejde (object-fit: contain),
     saa alle ni baerer samme optiske vaegt uanset filens dimensioner. Sporet er
     duplikeret for soemloes loop; kopien er skjult for skaermlaesere. Hvid (#FFFFFF)
     er tilladt her: det er logo-pladerne, ikke brand-flader. */
  .logo-band {
    border-top: 1px solid var(--s8-graa-linje);
    border-bottom: 1px solid var(--s8-graa-linje);
    overflow: hidden;
  }
  .logo-track {
    display: flex;
    width: max-content;
    padding: 1.35rem 0;
  }
  html.s8-motion .logo-track {
    animation: s8-drift 42s linear infinite;
  }
  @keyframes s8-drift {
    to { transform: translateX(-50%); }
  }
  .logo-half {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  /* Hvid chip: ens hoejde + polstring; vandret margen giver mellemrummet mellem
     chips (og ved sporets soem), saa marquee'en looper uden spring. */
  .logo-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 20px;
    margin: 0 11px;
    background: #FFFFFF;
    border-radius: 8px;
    box-sizing: border-box;
  }
  /* Normaliseret visnings-hoejde; max-width holder de meget brede logoer i skak,
     object-fit: contain bevarer proportionerne (ingen forvraengning). */
  .logo-chip img {
    height: 30px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
    display: block;
  }

  /* Om os / inspiration: pull-quote (hårstregsbjælke, ikke rød), rammeafsnit og
     tre værdibokse. */
  .pullquote {
    margin: 2rem 0 0;
    font-weight: 700;
    font-size: var(--s8-type-subhead-size);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 48ch;
    border-left: 2px solid var(--s8-graa-linje);
    padding-left: 1.25rem;
  }
  .value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    container-type: inline-size; /* saa .flip-logo kan maales i cqw = raekkebredden */
  }
  @media (max-width: 48rem) {
    .value-grid { grid-template-columns: minmax(0, 1fr); }
    /* Enkelt-kolonne: ingen raekke at stave hen over -> vis forsiderne fladt, skjul bagsider. */
    html.s8-motion .flip-inner { transform: none; }
    .flip-back { display: none; }
  }
  .value-box {
    border: 1px solid var(--s8-graa-linje);
    padding: 1.5rem 1.4rem;
  }
  .value-box > * + * { margin-top: 0.75rem; }
  .value-box h3 {
    font-family: var(--s8-font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .value-box p { font-size: 15px; line-height: 1.55; color: var(--s8-graa); }

  /* Vaerdibokse som tosidede 3D-kort, der vipper paa den vandrette akse (rotateX:
     toppen tipper bagover). Standard/uden JS/reduced motion: forsiden vises fladt og
     laesbar, bagsiden skjult (backface-visibility). Med .s8-motion (JS + motion
     tilladt) starter kortet paa bagsiden (rotateX 180), og scroll-scriptet driver
     rotationen mod 0 (forside). Bagsiderne staver tilsammen SOLUTION8.ai hen over
     raekken; hver bagside viser sin trediedel, og mellemrummene afbryder ordet. */
  .flip { perspective: 2600px; }
  .flip-inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(0deg);
    will-change: transform;
  }
  html.s8-motion .flip-inner { transform: rotateX(180deg); }
  .flip-front,
  .flip-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .flip-front {
    position: relative; /* i floej -> saetter kortets hoejde; bagsiden ligger ovenpaa */
    height: 100%;
  }
  .flip-back {
    position: absolute;
    inset: 0;
    overflow: hidden; /* klipper til denne trediedel af ordmaerket */
    transform: rotateX(180deg);
    border: 1px solid var(--s8-graa-linje);
    background: var(--s8-sort);
  }
  .flip-logo {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(300% + 2.5rem); /* 3 kort + 2 mellemrum = hele raekken */
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-family: var(--s8-font-display);
    font-weight: 900;
    font-size: 13cqw;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--s8-hvid);
    pointer-events: none;
    user-select: none;
  }
  .flip-logo-ai { color: var(--s8-roed); }
  /* Skub ordmaerket mod venstre i kort 2 og 3, saa de tre udsnit staar paa linje. */
  .flip:nth-child(2) .flip-logo { left: calc(-100% - 1.25rem); }
  .flip:nth-child(3) .flip-logo { left: calc(-200% - 2.5rem); }

  /* Overdragelsen: fire mono-noder, forbindelser tegnes venstre mod højre via
     stroke-dashoffset; sidste node er beslutningsnoden (rød kant + rød prik) og
     "mærket: jeres" skrives under med den delte skrivemaskine. Genbrugt 1:1 fra B. */
  .legs { margin-top: 3rem; }
  .legs > * + * { margin-top: 1.25rem; }
  .legs-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .legs-node {
    position: relative;
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.4;
    color: var(--s8-graa);
    border: 1.5px solid var(--s8-graa-linje);
    padding: 0.7em 1em;
    white-space: nowrap;
    transition: color 150ms ease-out, border-color 150ms ease-out;
  }
  .legs-node.is-active {
    color: var(--s8-hvid);
    border-color: var(--s8-hvid);
  }
  .legs-node.is-final { border-color: var(--s8-roed); }
  .legs-node.is-final::after {
    content: "";
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--s8-roed);
  }
  .legs-connector {
    flex: 1 1 1.5rem;
    min-width: 0.75rem;
    height: 10px;
  }
  .legs-line {
    stroke: var(--s8-graa);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  html.s8-motion .legs-line {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 300ms ease-out;
  }
  html.s8-motion .legs-line.is-drawn { stroke-dashoffset: 0; }
  .legs-mark {
    margin: 0;
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.7;
    color: var(--s8-hvid);
    text-align: right;
    min-height: 1.7em;
  }
  .legs-device { margin-top: 3rem; }
  @media (max-width: 40rem) {
    .legs-row { flex-direction: column; align-items: center; gap: 0.4rem; }
    .legs-node { white-space: normal; text-align: center; }
    .legs-connector {
      flex: 0 0 auto;
      width: 1.5rem;
      height: 1.5rem;
      transform: rotate(90deg);
    }
    .legs-line { stroke-width: 0.625; }
    .legs-mark { text-align: center; }
  }

  /* Ydelser: seks kvadratiske kort. Kortene 01-05 er knapper, der åbner en
     dialog; kort 06 er det fremhævede (RØDE) CTA-kort, der fører til kontakt. */
  /* Ydelser: braid-inspireret "en del bliver, mens en anden ruller". Paa desktop
     splittes sektionen i to spor: venstre overskrift/eyebrow PINNES (position:
     sticky under den 64px header), mens de seks kort ruller forbi til hoejre.
     Ren CSS - ingen JS, ingen scroll-hijack; sticky laeser den aegte scroll og
     kolliderer derfor hverken med den bloede scroll, observers eller prikken.
     Under det tokolonnede layout stakker det til én kolonne (ingen pin). */
  .ydelser-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  @media (min-width: 64rem) {
    .ydelser-layout {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: clamp(2rem, 4vw, 3.5rem);
    }
    .ydelser-head {
      position: sticky;
      /* 64px header + luft; matcher sektionens scroll-margin-top-rytme. */
      top: 5.5rem;
      align-self: start;
    }
  }
  .ydelser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 0;
  }
  /* I det smalle hoejrespor (desktop) laeser to kort pr. raekke bedst. */
  @media (min-width: 64rem) {
    .ydelser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 48rem) {
    .ydelser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 30rem) {
    .ydelser-grid { grid-template-columns: minmax(0, 1fr); }
  }
  .ydelse-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
    background: transparent;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 0;
    padding: 1.4rem 1.35rem;
    min-height: 13.5rem;
    cursor: pointer;
    color: var(--s8-hvid);
    font: inherit;
    text-decoration: none;
    transition: border-color 150ms ease-out, background-color 150ms ease-out;
  }
  .ydelse-card:hover,
  .ydelse-card:focus-visible { border-color: var(--s8-hvid); }
  .ydelse-num {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.12em;
    color: var(--s8-graa);
  }
  .ydelse-title {
    font-family: var(--s8-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .ydelse-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--s8-graa);
    flex: 1 1 auto;
  }
  .ydelse-more {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.1em;
    color: var(--s8-graa);
    margin-top: 0.4rem;
  }
  .ydelse-card:hover .ydelse-more,
  .ydelse-card:focus-visible .ydelse-more { color: var(--s8-hvid); }
  .ydelse-card-cta {
    background: var(--s8-roed);
    border-color: var(--s8-roed);
    color: var(--s8-hvid);
  }
  .ydelse-card-cta:hover,
  .ydelse-card-cta:focus-visible {
    border-color: var(--s8-roed);
    filter: brightness(1.1);
  }
  .ydelse-card-cta .ydelse-num,
  .ydelse-card-cta .ydelse-desc,
  .ydelse-card-cta .ydelse-more { color: rgba(255, 255, 255, 0.88); }

  /* Dialoger: native <dialog> med showModal (fokusfælde, Esc og fokus-retur er
     indbygget); bagtæppe-klik lukker via script. Mørk flade, hårstreg, mono. */
  dialog.modal {
    border: 1px solid var(--s8-hvid);
    background: var(--s8-sort);
    color: var(--s8-hvid);
    width: min(94vw, 50rem);
    max-width: 50rem;
    max-height: 85vh;
    padding: 0;
    margin: auto;
  }
  dialog.modal::backdrop { background: rgba(0, 0, 0, 0.66); }
  /* Lås baggrundsscroll når en dialog er åben - fuld paritet med skuffemenuen,
     der låser body-scroll via JS. Ren CSS, ingen JS. Både html og body låses:
     html alene lækker et lille wheel-scroll i Chromium. */
  html:has(dialog.modal[open]),
  html:has(dialog.modal[open]) body { overflow: hidden; }
  .modal-inner {
    padding: 2.2rem 2.4rem 2.4rem;
    max-height: 85vh;
    overflow: auto;
  }
  .modal-inner > * + * { margin-top: 1.1rem; }
  .modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  .modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--s8-hvid);
    border: 1px solid var(--s8-graa-linje);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 150ms ease-out;
  }
  .modal-close:hover,
  .modal-close:focus-visible { border-color: var(--s8-hvid); }
  .modal-lead {
    font-weight: 700;
    font-size: var(--s8-type-subhead-size);
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 32ch;
  }
  .modal-bullets {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
  }
  .modal-bullets li { margin-top: 0.45rem; }
  .modal-list-label {
    margin-top: 1.35rem;
    color: var(--s8-hvid);
  }
  .modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--s8-graa-linje);
  }
  .modal-cta { flex: 0 0 auto; }
  .modal-related {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .modal-related-label { color: var(--s8-graa); }
  .modal-chip {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.04em;
    color: var(--s8-hvid);
    background: transparent;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 2px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: border-color 150ms ease-out;
  }
  .modal-chip:hover,
  .modal-chip:focus-visible { border-color: var(--s8-hvid); }
  .modal-open {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.12em;
    color: var(--s8-graa);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .modal-open:hover,
  .modal-open:focus-visible { color: var(--s8-hvid); }

  /* Produkter: to produktkort på et skævt split (asymmetrisk redaktionelt grid). */
  .product-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 2.5rem;
  }
  .product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 0;
    padding: 1.75rem 1.5rem;
    transition: border-color 150ms ease-out;
  }
  .product-card > * + * { margin-top: 1rem; }
  .product-card > :last-child { margin-top: auto; }
  .product-card:hover,
  .product-card:focus-within { border-color: var(--s8-hvid); }
  @media (max-width: 48rem) {
    .product-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Cases: dossier-kort i mono-dokumentlaget, hårstreger; ingen opdigtede tal. */
  /* Cases: tre dossier-kort på tværs af bredden (2 på tablet, 1 på mobil). */
  /* Effect 3: Cases-overskriften glider ind fra venstre, gennem sin plads og ud
     til hoejre paa scroll (scroll-drevet translateX i site-c.js). Wrapper'en
     klipper vandret (overflow-x: clip) -> ingen vandret dokument-scroll. Reduced
     motion / no-JS: ingen transform - overskriften staar paa plads, fuldt laesbar. */
  .cases-slide { overflow-x: clip; }
  /* Overskrift-gruppen (eyebrow + heading) shrink-wrappes, saa dens maalte bredde
     = tekstbredden. Scriptet glider hele gruppen ind fra den VENSTRE viewport-kant
     og ud til hoejre; .cases-slide klipper vandret, saa der aldrig opstaar
     dokument-scroll. */
  .cases-h2-group { width: max-content; max-width: 100%; }
  html.s8-motion .cases-slide .cases-h2-group { will-change: transform; }
  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }
  @media (max-width: 64rem) {
    .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 40rem) {
    .case-grid { grid-template-columns: minmax(0, 1fr); }
  }
  .case-card {
    border: 1px solid var(--s8-graa-linje);
    padding: 1.5rem 1.4rem;
    transition: border-color 150ms ease-out;
  }
  .case-card > * + * { margin-top: 1rem; }
  .case-card:hover,
  .case-card:focus-within { border-color: var(--s8-hvid); }
  .case-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .case-fields { margin: 1rem 0 0; }
  .case-fields > div + div { margin-top: 0.9rem; }
  .case-fields dt { margin: 0; }
  .case-fields dd { margin: 0.3rem 0 0; }
  .case-client {
    font-family: var(--s8-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--s8-hvid);
  }

  /* Founder slots: uafklaret [FOUNDER: ...] kopi vist synligt som slots, mono med
     stiplet kant; aldrig stiltiende udfyldt, aldrig opdigtet. */
  .founder-slot {
    display: inline-block;
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--s8-graa);
    border: 1px dashed var(--s8-graa);
    padding: 0.45em 0.7em;
  }

  /* Modenhedstesten: mono-form vurdering (genbrugt 1:1 fra B, porteret fra
     ai-raadgivning.dk). Ingen leadformular: testen gemmer intet og sender intet.
     Rød kun på primært fokus-markøren i radaren og CTA. */
  /* Modenhedstesten: venstrestillet under sektionens overskrift (som de øvrige
     sektioner). Selve spørgsmål/svar-kolonnen holdes på behagelig bredde
     (#mt-intro/#mt-quiz), mens radar-resultatet må gå to-kolonne på tværs af
     testens bredde. */
  .test {
    max-width: 62rem;
    border: 1px solid var(--s8-graa-linje);
    padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
  }
  #mt-intro, #mt-quiz { max-width: 44rem; }
  .test > * + * { margin-top: 1.5rem; }
  .test-question {
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-body-size);
    line-height: 1.6;
    color: var(--s8-hvid);
    min-height: 3.2em;
    margin: 1.25rem 0 0;
  }
  .test-note { margin-top: 1rem; }
  .mt-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.6rem;
  }
  .mt-bars { display: flex; gap: 6px; }
  .mt-bar {
    flex: 1 1 0;
    height: 2px;
    background: var(--s8-graa-linje);
    overflow: hidden;
  }
  .mt-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--s8-hvid);
    transition: width 200ms ease-out;
  }
  .mt-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
  }
  .mt-option {
    font-family: var(--s8-font-mono);
    font-weight: 400;
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.55;
    color: var(--s8-graa);
    text-align: left;
    background: transparent;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 0;
    padding: 0.75em 1em;
    cursor: pointer;
    transition: color 150ms ease-out, border-color 150ms ease-out;
  }
  .mt-option:hover,
  .mt-option:focus-visible {
    color: var(--s8-hvid);
    border-color: var(--s8-hvid);
  }
  .mt-option[aria-pressed="true"] {
    color: var(--s8-hvid);
    border-color: var(--s8-hvid);
  }
  .mt-back {
    margin-top: 1.25rem;
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: var(--s8-graa);
    background: transparent;
    border: none;
    padding: 0.4em 0;
    cursor: pointer;
    transition: color 150ms ease-out;
  }
  .mt-back:hover,
  .mt-back:focus-visible { color: var(--s8-hvid); }
  .mt-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 1.25rem;
  }
  @media (min-width: 48rem) {
    .mt-result-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  .mt-radar svg { width: 100%; height: auto; }
  .mt-reading > * + * { margin-top: 0.9rem; }
  .mt-warn {
    border: 1px solid var(--s8-graa);
    padding: 0.9rem 1rem;
  }

  /* Kontakt: bookingblok + kontaktformular-stub (gemmer intet, sender intet). */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-top: 2rem;
  }
  @media (max-width: 48rem) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
  }
  .contact-form {
    border: 1px solid var(--s8-graa-linje);
    padding: 1.75rem 1.5rem;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
  }
  .field:first-of-type { margin-top: 0; }
  .field label {
    font-family: var(--s8-font-mono);
    font-weight: 500;
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.1em;
    color: var(--s8-graa);
  }
  .field input,
  .field textarea {
    background: transparent;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 0;
    color: var(--s8-hvid);
    font-family: var(--s8-font-mono);
    font-size: 14px;
    line-height: 1.5;
    padding: 0.7em 0.8em;
  }
  .field input:focus-visible,
  .field textarea:focus-visible {
    outline: none;
    border-color: var(--s8-hvid);
  }
  .contact-details > * + * { margin-top: 1rem; }
  .contact-details dt { margin: 0; }
  .contact-details dd { margin: 0.35rem 0 0; }

  /* Booking: nyhedsbrev-tilvalg + slot-picker (info-first -> vaelg tid). Roed er
     beslutningsaccenten: afkrydsning, hover paa en ledig tid, bekraeftelseslinjen. */
  .field-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.25rem;
    cursor: pointer;
  }
  .field-check input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    border: 1px solid var(--s8-graa-linje);
    background: transparent;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
  }
  .field-check input:checked { background: var(--s8-roed); border-color: var(--s8-roed); }
  .field-check input:focus-visible { outline: none; border-color: var(--s8-hvid); }
  .field-check span {
    font-family: var(--s8-font-mono);
    font-size: var(--s8-type-mono-data-size);
    line-height: 1.5;
    color: var(--s8-graa);
  }

  .booking-slots-head { color: var(--s8-hvid); margin: 0 0 1.25rem; }
  .slot-day { margin-top: 1.5rem; }
  .slot-day:first-of-type { margin-top: 0; }
  .slot-day-label { margin: 0 0 0.75rem; }
  .slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .slot {
    font-family: var(--s8-font-mono);
    font-size: var(--s8-type-mono-data-size);
    color: var(--s8-hvid);
    background: transparent;
    border: 1px solid var(--s8-graa-linje);
    border-radius: 0;
    padding: 0.55em 0.9em;
    cursor: pointer;
    transition: border-color 150ms ease-out, color 150ms ease-out;
  }
  .slot:hover,
  .slot:focus-visible { outline: none; border-color: var(--s8-roed); }
  .slot[disabled] { opacity: 0.45; pointer-events: none; }
  .slot-back {
    margin-top: 1.75rem;
    font-family: var(--s8-font-mono);
    font-size: var(--s8-type-mono-label-size);
    letter-spacing: 0.1em;
    color: var(--s8-graa);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .slot-back:hover,
  .slot-back:focus-visible { color: var(--s8-hvid); outline: none; }
  .booking-confirm { border: 1px solid var(--s8-roed); padding: 1.5rem; background: rgba(227, 36, 27, 0.06); }
  .booking-confirm-head { color: var(--s8-roed); margin: 0 0 0.6rem; font-family: var(--s8-font-display); font-weight: 700; font-size: var(--s8-type-subhead-size); }
  .booking-review { border: 1px solid var(--s8-graa-linje); padding: 1.5rem; }
  .booking-review-when { font-family: var(--s8-font-display); font-weight: 700; font-size: var(--s8-type-subhead-size); line-height: 1.2; margin: 0.4rem 0 0.5rem; }
  .booking-status { margin-top: 1rem; min-height: 1.2em; }
  .booking-status.is-error { color: var(--s8-roed); }

  /* Legal-sider (privatliv, handelsbetingelser): laesbar prosa i site-idiomet. */
  .legal-prose { max-width: 70ch; }
  .legal-prose > * + * { margin-top: 1rem; }
  .legal-prose h2 { font-family: var(--s8-font-display); font-weight: 700; font-size: var(--s8-type-subhead-size); line-height: 1.2; margin-top: 2.5rem; }
  .legal-prose h3 { font-family: var(--s8-font-mono); font-weight: 500; font-size: var(--s8-type-mono-label-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s8-graa); margin-top: 2rem; }
  .legal-prose h4, .legal-prose h5 { font-family: var(--s8-font-display); font-weight: 700; font-size: var(--s8-type-body-size); margin-top: 1.5rem; }
  .legal-prose p { font-size: var(--s8-type-body-size); line-height: 1.6; }
  .legal-prose ul { padding-left: 1.2rem; }
  .legal-prose li { font-family: var(--s8-font-mono); font-size: var(--s8-type-mono-data-size); line-height: 1.7; color: var(--s8-graa); }
  .founder-slot { background: rgba(227, 36, 27, 0.16); border-bottom: 1px solid var(--s8-roed); padding: 0 0.25em; }

  .footer-links a { color: var(--s8-graa); text-decoration: none; }
  .footer-links a:hover, .footer-links a:focus-visible { color: var(--s8-hvid); }

  .site-footer {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 3rem;
    border-top: 1px solid var(--s8-graa-linje);
  }
  .site-footer > * + * { margin-top: 1.25rem; }
  .footer-dict { max-width: 62ch; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  /* ============================================================
     Delte undersides-tilføjelser (multi-side-shell).
     Kun loadet af undersiderne (ikke forsiden). Kun tokens.
     ============================================================ */
  /* Aktiv side: fremhæv den aktuelle sides nav- + skuffe-link. */
  .nav-link[aria-current="page"],
  .drawer-link[aria-current="page"] { color: var(--s8-hvid); }

  /* Side-hero: første beat bærer ingen tophårstreg, og et <h1> får samme
     display-behandling som forsidens store titel (XL-trin). */
  .beat-page-hero {
    border-top: none;
    padding-top: clamp(5.5rem, 12vh, 8rem);
  }
  h1.display {
    font-family: var(--s8-font-display);
    font-weight: 900;
    font-size: var(--s8-type-display-xl-size);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* Ydelses-gridet står her på egen side (uden forsidens pinnede tokolonne-
     layout): giv det luft under titlen, og lad det gå tre kort bredt på store
     skærme (forsiden holdt det på to i det smalle højrespor). */
  .beat > .ydelser-grid { margin-top: 2rem; }
  @media (min-width: 64rem) {
    .beat > .ydelser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }