/* =============================================================
   Anne Waagstein Advisory: layout og komponenter
   Bygget paa M3-tokens i tokens.css
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  padding: .75rem 1.25rem; border-radius: var(--md-sys-shape-corner-small);
  font-weight: 600; text-decoration: none;
  transition: top var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.skip-link:focus { top: 1rem; }

/* ---------------- Typografi (M3 type scale) ---------------- */
h1, h2, h3, h4, .display, .headline {
  font-family: var(--md-sys-typescale-brand-font);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.display-large  { font-size: var(--md-sys-typescale-display-large-size);  line-height: 1.06; letter-spacing: -0.025em; }
.display-medium { font-size: var(--md-sys-typescale-display-medium-size); line-height: 1.12; letter-spacing: -0.02em; }
.display-small  { font-size: var(--md-sys-typescale-display-small-size);  line-height: 1.16; }
.headline-large { font-size: var(--md-sys-typescale-headline-large-size); line-height: 1.22; }
.headline-medium{ font-size: var(--md-sys-typescale-headline-medium-size);line-height: 1.28; }
.headline-small { font-size: var(--md-sys-typescale-headline-small-size); line-height: 1.34; }

.body-large  { font-size: var(--md-sys-typescale-body-large-size); line-height: 1.62; }
.body-small  { font-size: var(--md-sys-typescale-body-small-size); line-height: 1.55; }

.label-large {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  line-height: 1.3; margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }
.muted { color: var(--md-sys-color-on-surface-variant); }

/* ---------------- Layout ---------------- */
.container {
  width: 100%; max-width: var(--mw-container);
  margin-inline: auto; padding-inline: var(--mw-gutter);
}
.section { padding-block: var(--mw-section-y); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Sekundaere sektioner laeses som en pause frem for endnu et modul */
.section--quiet { padding-block: clamp(4rem, 8vw, 8rem); }
.section-head .label-large { color: var(--md-sys-color-primary); margin-bottom: .9rem; }
.section-head p { margin-top: 1rem; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Mørke bånd */
.band-ink   { background: var(--mw-ink);      color: #fdf6f8; }
.band-deep  { background: var(--mw-ink-deep); color: #fdf6f8; }
.band-ink .muted, .band-deep .muted,
.band-ink .body-small, .band-deep .body-small,
.cta-band .muted { color: rgba(253,246,248,.72); }
.band-ink .section-head .label-large,
.band-deep .section-head .label-large { color: var(--mw-accent); }
.band-cream { background: var(--mw-band-cream); }

/* ---------------- Knapper (M3) ---------------- */
.btn {
  --btn-bg: var(--md-sys-color-primary);
  --btn-fg: var(--md-sys-color-on-primary);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; min-height: 48px; padding: .75rem 1.6rem;
  border: none; border-radius: var(--md-sys-shape-corner-full);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn::after {  /* M3 state layer */
  content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn:hover::after  { opacity: var(--md-sys-state-hover-opacity); }
.btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.btn:hover { box-shadow: var(--md-sys-elevation-level1); }
.btn > * { position: relative; z-index: 1; }

.btn--outlined {
  --btn-bg: transparent; --btn-fg: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn--outlined:hover { box-shadow: none; }
.btn--text { --btn-bg: transparent; --btn-fg: var(--md-sys-color-primary); padding-inline: .75rem; }
.btn--text:hover { box-shadow: none; }

.band-ink .btn, .band-deep .btn { --btn-bg: var(--mw-accent-strong); --btn-fg: #330c1c; }
.band-ink .btn--outlined, .band-deep .btn--outlined {
  --btn-bg: transparent; --btn-fg: #fdf6f8; border-color: rgba(253,246,248,.45);
}

/* Tekstlink med understregning der vokser */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  color: var(--md-sys-color-primary);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); }
.link-arrow:hover svg { transform: translateX(4px); }
.band-ink .link-arrow, .band-deep .link-arrow { color: var(--mw-accent); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--mw-butter);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--mw-header-h);
}
/* Ordmaerke: ren typografi. Navnet i Lora, ydelsen i Inter med
   bred spatiering under en hairline. Sat i sidens egne skrifter,
   saa det er skarpt i enhver stoerrelse og folger farvetemaet. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0; color: var(--md-sys-color-on-surface);
}
.brand__lockup { display: block; }
.brand__name {
  display: block; font-family: var(--md-sys-typescale-brand-font);
  font-weight: 600; font-size: 1.1875rem; line-height: 1.05; letter-spacing: -.022em;
}
.brand__sub {
  display: block; margin-top: .42em; padding-top: .42em;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: .5625rem; font-weight: 600; line-height: 1;
  letter-spacing: .42em; text-transform: uppercase;
  text-align: center; text-indent: .42em; /* indent opvejer sidste bogstavs spatiering */
  color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 420px) { .brand__name { font-size: 1.0625rem; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .5rem 0; text-decoration: none; font-size: .9375rem; font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 2px solid transparent;
  transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.nav__link:hover { color: var(--md-sys-color-on-surface); }
.nav__link[aria-current="page"] { color: var(--md-sys-color-on-surface); border-bottom-color: var(--md-sys-color-primary); }
.header-cta { flex-shrink: 0; min-height: 42px; padding: .55rem 1.15rem; font-size: .875rem; }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: none; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: inherit; cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  /* Menuen daekker skaermen fra sidehovedets underkant og ned.
     --mw-header-h er hovedets fulde maal og er for stort paa en telefon,
     hvor hovedet er lavere. Forskellen stod tilbage som en stribe af siden
     lige over menuen, saa site.js maaler hovedet og skriver
     --mw-header-maalt; tokenet er kun en bagstopper. */
  .nav {
    position: fixed; inset: var(--mw-header-maalt, var(--mw-header-h)) 0 0 0; margin: 0;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-level2);
    overflow-y: auto; overscroll-behavior: contain;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--mw-gutter) 1.5rem; }
  .nav__link { padding: .95rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--md-sys-color-primary); }
  .nav__list .btn { margin-top: 1.25rem; }
  .header-cta--desktop { display: none; }
}
@media (min-width: 960px) { .nav__list .btn { display: none; } }

/* ---------------- Hero ---------------- */
.hero { background: var(--mw-butter); color: var(--md-sys-color-on-surface); position: relative; overflow: hidden; isolation: isolate; }

/* Varmt glød bag panelet, som binder motivets ravtoner til fladen */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 76% 24%, rgba(231,188,202,.34), transparent 68%);
}

.hero__inner {
  position: relative; display: grid; align-items: center;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.02fr .98fr; }
}
.hero__copy { max-width: 34rem; }

/* Afrundet panel frem for fuldbredde-beskaering */
.hero__media {
  position: relative; overflow: hidden;
  border-radius: var(--md-sys-shape-corner-extra-large);
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px -22px rgba(73,18,40,.42);
}
.hero__media::after {           /* fin kant, saa panelet ikke flyder ud i det sorte */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(73,18,40,.10);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.hero__kicker { color: var(--md-sys-color-on-surface-variant); margin-bottom: 1.25rem; }
.hero h1 { color: var(--md-sys-color-on-surface); margin-bottom: 1.5rem; }
.hero__sub {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); line-height: 1.55;
  color: var(--md-sys-color-on-surface-variant); max-width: 46ch; margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem 1rem; align-items: center; }

@media (max-width: 899px) {
  .hero__inner { padding-block: clamp(2.5rem, 7vw, 3.5rem); }
  .hero__media { aspect-ratio: 4 / 3; order: 2; }
  .hero__media img { object-position: 50% 16%; }
  .hero__copy { order: 1; }
}

/* ---------------- Troværdighedsstribe ---------------- */
.proof-strip.band-ink { border-bottom: 0; }
.proof-strip { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.proof-strip__label { color: var(--md-sys-color-on-surface-variant); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.band-ink .proof-strip__label, .band-deep .proof-strip__label { color: var(--mw-accent); }

/* ---------------- Kort ---------------- */
/* Linjebaseret frem for indrammet, samme logik som .recognition og
   .principles, og det der skiller nordisk redaktionelt fra produkt-UI. */
.card {
  display: flex; flex-direction: column;
  background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  transition: border-top-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
a.card, .card--link { text-decoration: none; }
a.card:hover, .card--link:hover { border-top-color: var(--md-sys-color-primary); }
a.card:hover h2, a.card:hover h3 { color: var(--md-sys-color-primary); }
a.card h2, a.card h3 { transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
.card__eyebrow { color: var(--md-sys-color-primary); margin-bottom: .85rem; }
.card h3 { margin-bottom: .75rem; }
.card__foot { margin-top: auto; padding-top: 1.5rem; }

.band-ink .card, .band-deep .card {
  background: transparent; border-top-color: rgba(253,246,248,.24); color: #fdf6f8;
}
.band-ink a.card:hover, .band-deep a.card:hover { border-top-color: var(--mw-accent); }
.band-ink a.card:hover h2, .band-ink a.card:hover h3,
.band-deep a.card:hover h2, .band-deep a.card:hover h3 { color: var(--mw-accent); }
.band-ink .card__eyebrow, .band-deep .card__eyebrow { color: var(--mw-accent); }

/* Ydelseskort: ikon, navn, resultat, varighed */
.card__icon {
  width: 2.5rem; height: 2.5rem; margin-bottom: 1.5rem;
  color: var(--md-sys-color-primary);
}
.band-ink .card__icon, .band-deep .card__icon { color: var(--mw-accent); }
.offer__result { font-size: 1.0625rem; line-height: 1.55; margin-bottom: 1.25rem; }
.card__foot--row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.link-arrow--bare { border-bottom: 0; padding-bottom: 0; }
a.card:hover .link-arrow--bare svg { transform: translateX(4px); }
/* Fakta som sporet label frem for farvet pille. Mindre produkt-UI. */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.band-ink .chip, .band-deep .chip { color: rgba(253,246,248,.66); }

/* ---------------- "Er det jer?" ---------------- */
.recognition { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.recognition li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-family: var(--md-sys-typescale-brand-font);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.625rem);
  line-height: 1.35; letter-spacing: -0.01em;
}
.recognition li:last-child { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.recognition__num {
  font-family: var(--md-sys-typescale-plain-font);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
  color: var(--md-sys-color-primary); padding-top: .55em;
}
.band-ink .recognition li  { border-color: rgba(253,246,248,.2); }
.band-ink .recognition__num { color: var(--mw-accent); }

/* ---------------- Citater ---------------- */
.quote {
  display: flex; flex-direction: column;
  border-left: 3px solid var(--md-sys-color-primary);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.quote blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--md-sys-typescale-brand-font);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  line-height: 1.4; letter-spacing: -0.012em;
}
.quote figcaption { font-size: .9375rem; color: var(--md-sys-color-on-surface-variant); margin-top: auto; }
.quote figcaption strong { display: block; color: var(--md-sys-color-on-surface); font-weight: 600; }
.band-ink .quote, .band-deep .quote { border-left-color: var(--mw-accent); }
.band-ink .quote figcaption, .band-deep .quote figcaption { color: rgba(253,246,248,.72); }
.band-ink .quote figcaption strong, .band-deep .quote figcaption strong { color: #fff; }

/* ---------------- Tal / nøgletal ---------------- */
.stat__value {
  font-family: var(--md-sys-typescale-brand-font);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1; font-weight: 500;
  color: var(--md-sys-color-primary); margin-bottom: .6rem;
}
.band-ink .stat__value, .band-deep .stat__value { color: var(--mw-accent); }
.stat__label { font-size: .9375rem; color: var(--md-sys-color-on-surface-variant); max-width: 26ch; }

/* ---------------- Split / om ---------------- */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: .85fr 1.15fr; } .split--rev { grid-template-columns: 1.15fr .85fr; } }
/* Til to sidestillede tekstspalter: samme bredde og samme overkant, saa
   rubrikkerne flugter i stedet for at blive centreret hver for sig. */
.split--top { align-items: start; }
@media (min-width: 900px) { .split--top { grid-template-columns: 1fr 1fr; } }
.split__media { border-radius: var(--md-sys-shape-corner-large); overflow: hidden; aspect-ratio: 4/5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Principper ---------------- */
.principles { display: grid; gap: 0; counter-reset: p; }
.principles > div {
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: grid; gap: .5rem 2rem;
}
@media (min-width: 800px) { .principles > div { grid-template-columns: 1fr 1.4fr; } }
.principles > div:last-child { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.principles p + p { margin-top: 1rem; }

/* ---------------- CTA-bånd ---------------- */
.cta-band { background: var(--mw-ink-deep); color: #fdf6f8; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(253,246,248,.85); max-width: 44ch; }
.cta-band__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) { .cta-band__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.cta-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cta-facts li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; font-size: 1rem; }
.cta-facts svg { width: 20px; height: 20px; margin-top: .28em; color: var(--mw-accent); flex-shrink: 0; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--mw-ink); color: rgba(253,246,248,.78); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.site-footer a { color: rgba(253,246,248,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__brand .brand { color: #fdf6f8; margin-bottom: 1.5rem; }
.footer__brand .brand__name { font-size: 1.5rem; }
.footer__brand .brand__sub { color: rgba(253,246,248,.62); border-top-color: rgba(253,246,248,.28); }
.footer__tagline { font-family: var(--md-sys-typescale-brand-font); font-size: 1.125rem; color: #fdf6f8; max-width: 24ch; line-height: 1.4; }
.footer__title { color: #fff; margin-bottom: 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9375rem; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid rgba(253,246,248,.18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: rgba(253,246,248,.6);
}

/* ---------------- Artikel / undersider ---------------- */
.page-hero { background: var(--mw-butter); }
.page-hero__inner { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.75rem, 6vw, 5rem); max-width: 62ch; }
.page-hero__icon { width: 3rem; height: 3rem; color: var(--md-sys-color-primary); margin-bottom: 1.5rem; }
.page-hero .label-large { color: var(--md-sys-color-primary); margin-bottom: 1rem; }
.page-hero h1 { margin-bottom: 1.25rem; }

.prose { max-width: var(--mw-container-text); }
.prose h2 { font-size: var(--md-sys-typescale-headline-large-size); line-height: 1.22; margin: 2.5em 0 .7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--md-sys-typescale-headline-small-size); line-height: 1.35; margin: 2em 0 .6em; }
.prose p, .prose li { font-size: var(--md-sys-typescale-body-large-size); line-height: 1.68; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.5em; display: grid; gap: .5rem; }
.prose blockquote {
  margin: 2em 0; padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 3px solid var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-brand-font); font-size: 1.375rem; line-height: 1.42;
}
.prose a { color: var(--md-sys-color-primary); text-underline-offset: 3px; }

/* Definitionstabel til ydelsessider */
.spec { border-top: 1px solid var(--md-sys-color-outline-variant); margin: 0; }
.spec > div {
  display: grid; gap: .35rem 2rem; padding: 1.25rem 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
@media (min-width: 700px) { .spec > div { grid-template-columns: 12rem 1fr; } }
.spec dt { font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.spec dd { margin: 0; font-size: 1.0625rem; }

/* Redaktionel note: synlig markering af, hvad der mangler bevis */
.note {
  border-left: 3px solid var(--md-sys-color-tertiary);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  padding: 1rem 1.25rem; border-radius: 0 var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0;
  font-size: .9375rem; line-height: 1.55;
}
.note strong { font-weight: 600; }

/* Formular */
.form { display: grid; gap: 1.25rem; max-width: 30rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--md-sys-color-primary); }

/* Diverse */
.flow > * + * { margin-top: 1.25rem; }
.divider { border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------- Logostribe ----------------
   Én raekke pr. gruppe paa faelles grundlinje. Et fast kolonnegrid gav
   loesgaengere, naar gruppen ikke gik op i kolonneantallet, og maerker over
   nogle af ordene broed grundlinjen. Derfor: ren typografi, fri ombrydning. */
.logogrid {
  display: grid; grid-template-columns: repeat(2, auto);
  justify-content: space-between; align-items: baseline;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}
/* Otte logoer i fire kolonner giver to komplette linjer */
@media (min-width: 700px) { .logogrid { grid-template-columns: repeat(4, auto); } }
.logo {
  display: inline-block;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.logo:hover { color: var(--md-sys-color-on-surface); }
.logo__word {
  font-family: var(--md-sys-typescale-plain-font);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.05; white-space: nowrap;
}
.logo__word small {
  display: block; font-size: .46em; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; margin-top: .5em; opacity: .78;
  white-space: nowrap;
}
.band-ink .logo, .band-deep .logo { color: rgba(253,246,248,.72); }
.band-ink .logo:hover, .band-deep .logo:hover { color: #fdf6f8; }

/* Individuelle ordmaerker: variation, saa de laeses som selvstaendige maerker */
.logo--forenet .logo__word { font-family: var(--md-sys-typescale-brand-font); font-weight: 600; letter-spacing: -.02em; }
.logo--schmith .logo__word { font-family: var(--md-sys-typescale-brand-font); font-weight: 500; letter-spacing: -.005em; }
.logo--saxo    .logo__word { font-weight: 800; letter-spacing: -.055em; }
.logo--djoef   .logo__word { font-weight: 800; letter-spacing: .2em; }
.logo--panel   .logo__word { font-weight: 300; letter-spacing: .04em; }
.logo--abzu    .logo__word { font-weight: 200; letter-spacing: .42em; }
.logo--domea   .logo__word { font-weight: 800; letter-spacing: -.04em; }
.logo--faelled .logo__word { font-family: var(--md-sys-typescale-brand-font); font-weight: 500; letter-spacing: .01em; }

/* Paa lyse flader (fx undersider) */
/* Casekort: tallet og saetningen under det er ét udsagn, ikke to niveauer.
   Derfor er kategorien og den separate historie-rubrik taget ud. */
.card--case .stat__value {
  font-size: clamp(2.75rem, 1.9rem + 2.6vw, 4rem);
  margin: 0 0 .5rem;
}
.card__lede {
  font-family: var(--md-sys-typescale-brand-font);
  font-weight: 500; font-size: 1.125rem; line-height: 1.42;
  letter-spacing: -.008em; margin: 0 0 1.25rem;
}
/* Firmalogo som kundeangivelse. Samme ordmaerker som i logostriben, saa
   der kun er ét system for firmanavne paa sitet. */
.case-logo { display: block; margin: 0; color: var(--md-sys-color-on-surface); }
.card--case .case-logo { margin-top: auto; }
.spec .case-logo { margin-bottom: .35rem; }
a.card:hover .case-logo { color: var(--md-sys-color-primary); }
.card--case .card__foot { padding-top: 1.75rem; }

/* Nøgletal i rækker */
.stats { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- "Ogsaa"-blok under ydelseskortene ----------------
   Spoergsmaal og link i hver sin linje. Et inline link midt i en stor
   saetning kolliderer med grundlinjen og braekker daarligt. */
.more {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 860px) { .more { grid-template-columns: repeat(2, 1fr); } }
.more__q {
  font-family: var(--md-sys-typescale-brand-font);
  font-weight: 500; letter-spacing: -.012em;
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.35;
  margin: 0 0 .9rem; max-width: 26ch;
}
.more p.muted { margin-bottom: 1.25rem; max-width: 46ch; }
.more .link-arrow { display: inline-flex; }

/* ---------------- Washing/hushing-figuren ----------------
   Annes signaturpointe som diagram frem for broedtekst. Tegnet i
   currentColor og tokens, saa den folger farvetemaet. */
.figure-matrix { margin: 2.5rem 0; max-width: 40rem; }
.figure-matrix svg { width: 100%; height: auto; display: block; }
.figure-matrix figcaption {
  margin-top: 1.25rem; font-size: .875rem; line-height: 1.55;
  color: var(--md-sys-color-on-surface-variant); max-width: 52ch;
}
.mx-axis   { stroke: var(--md-sys-color-outline); stroke-width: 1; }
.mx-grid   { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; }
.mx-band   { fill: var(--md-sys-color-surface-container); }
.mx-diag   { stroke: var(--md-sys-color-primary); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mx-label  { fill: var(--md-sys-color-on-surface-variant); font-family: var(--md-sys-typescale-plain-font);
             font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mx-word   { fill: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-brand-font);
             font-size: 25px; font-weight: 600; }
.mx-note   { fill: var(--md-sys-color-on-surface-variant); font-family: var(--md-sys-typescale-plain-font);
             font-size: 13.5px; }
.mx-knockout { fill: var(--md-sys-color-surface); }
.mx-ok     { fill: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-plain-font);
             font-size: 13px; font-weight: 600; letter-spacing: .01em; }

/* ---------------- Ikon i principperne ---------------- */
.principles__icon {
  width: 1.75rem; height: 1.75rem; color: var(--md-sys-color-primary);
  margin-bottom: .75rem;
}

/* ---------------- Fuldbredde-billedbaand ----------------
   En stor, rolig flade der bryder tekstrytmen. */
.photoband { margin: 0; position: relative; }
.photoband img {
  width: 100%; height: clamp(16rem, 42vw, 32rem);
  object-fit: cover; object-position: 50% 32%; display: block;
}

/* =============================================================
   Bevaegelse
   Alt hviler paa M3's motion-tokens. Hele laget er pakket i
   prefers-reduced-motion: no-preference, saa en bruger der har fravalgt
   animation faar et helt statisk site uden nogen undtagelser.
   ============================================================= */

/* ---- Sideindlaesning ---- */
/* Skjuler kun indhold, naar JS er i stand til at vise det igen. */
.js-anim .page-enter > * { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {

  /* Sidehoved og foerste skaermfuld toner ind i stedet for at poppe */
  .js-anim .page-enter > * {
    animation: enter var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized) forwards;
  }
  .js-anim .page-enter > *:nth-child(1) { animation-delay: 60ms; }
  .js-anim .page-enter > *:nth-child(2) { animation-delay: 140ms; }
  .js-anim .page-enter > *:nth-child(3) { animation-delay: 220ms; }
  .js-anim .page-enter > *:nth-child(4) { animation-delay: 300ms; }

  @keyframes enter {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* Hero-billedet skalerer ganske let ned paa plads */
  .js-anim .hero__media img {
    animation: heroSettle 1200ms var(--md-sys-motion-easing-emphasized) forwards;
  }
  @keyframes heroSettle {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  /* ---- Indtoning ved scroll ---- */
  .js-anim .reveal { opacity: 0; transform: translate3d(0, 20px, 0); }
  .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  }
  /* Kort i samme grid kommer i raekkefoelge, ikke paa én gang */
  .reveal.is-visible > .card:nth-child(2),
  .reveal.is-visible > .logo:nth-child(2)  { transition-delay: 70ms; }
  .reveal.is-visible > .card:nth-child(3),
  .reveal.is-visible > .logo:nth-child(3)  { transition-delay: 140ms; }
  .reveal.is-visible > .card:nth-child(4)  { transition-delay: 210ms; }
  .reveal.is-visible > .card:nth-child(5)  { transition-delay: 280ms; }
  .reveal > .card, .reveal > .logo {
    transition: opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  }
  .js-anim .reveal:not(.is-visible) > .card,
  .js-anim .reveal:not(.is-visible) > .logo { opacity: 0; transform: translate3d(0, 12px, 0); }

  /* ---- Mikroanimationer ---- */

  /* Knapper: et let loeft, som forsvinder ved tryk */
  .btn { transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                     transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); }
  .btn:hover  { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  /* Kortets ikon reagerer sammen med kortet */
  .card__icon { transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); }
  a.card:hover .card__icon { transform: translateY(-3px); }

  /* Hairlinen ovenover kortet tegnes ind fra venstre ved hover */
  .card { position: relative; }
  .card::before {
    content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px;
    background: var(--md-sys-color-primary); transform: scaleX(0); transform-origin: left;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }
  a.card:hover::before { transform: scaleX(1); }
  .band-ink .card::before, .band-deep .card::before { background: var(--mw-accent); }

  /* Navigationen faar en streg der vokser frem */
  .nav__link { position: relative; }
  .nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
  }
  .nav__link:hover::after { transform: scaleX(1); }
  .nav__link[aria-current="page"]::after { display: none; }

  /* Logostriben loefter det enkelte maerke frem */
  .logo { transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                      transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); }
  .logo:hover { transform: translateY(-2px); }

  /* Billeder aander ganske let, naar man er paa dem */
  .split__media, .photoband { overflow: hidden; }
  .split__media img, .photoband img {
    transition: transform 900ms var(--md-sys-motion-easing-emphasized);
  }
  .split__media:hover img, .photoband:hover img { transform: scale(1.03); }

  /* Citatets streg vokser, naar sektionen kommer i syne */
  .quote { position: relative; }
  .quote::after {
    content: ''; position: absolute; left: -3px; top: 0; width: 3px; height: 100%;
    background: var(--md-sys-color-primary); transform: scaleY(0); transform-origin: top;
    transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized) 120ms;
  }
  .reveal.is-visible .quote::after, .is-visible.quote::after { transform: scaleY(1); }
  .band-ink .quote::after, .band-deep .quote::after { background: var(--mw-accent); }

  /* Noegletallene taeller visuelt op ved at rulle ind nedefra */
  .stat__value { transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized); }
  .reveal:not(.is-visible) .stat__value { transform: translate3d(0, 8px, 0); }

  /* Mobilmenuen toner frem, og punkterne kommer ét ad gangen bagefter.
     Ved lukningen toner den ud igen -- site.js holder feltet fremme, saa
     laenge det varer, og skjuler det foerst, naar animationen er ovre.
     :not([data-lukker]) skal staa paa dem alle. Feltet baerer data-open hele
     vejen igennem lukningen, saa uden den blev punkternes forsinkelser ved
     med at gaelde: udtoningen begyndte foerst 90, 150 og 210 ms inde i
     lukningen, og det sidste punkt naaede knap at tone, foer feltet var vaek.
     Ud gaar de under ét. */
  .nav[data-open="true"]:not([data-lukker]) {
    animation: navSloer var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  }
  .nav[data-open="true"]:not([data-lukker]) .nav__list > * {
    animation: navPunkt var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized) backwards;
  }
  .nav[data-open="true"]:not([data-lukker]) .nav__list > *:nth-child(1) { animation-delay: 90ms; }
  .nav[data-open="true"]:not([data-lukker]) .nav__list > *:nth-child(2) { animation-delay: 150ms; }
  .nav[data-open="true"]:not([data-lukker]) .nav__list > *:nth-child(3) { animation-delay: 210ms; }
  .nav[data-open="true"]:not([data-lukker]) .nav__list > *:nth-child(4) { animation-delay: 270ms; }
  /* Udtoningen har sit eget navn. Med samme navn som indtoningen ville
     browseren regne det for én og samme animation -- den var allerede
     faerdig, og feltet ville springe væk i stedet for at tone ud.

     Kurven var lige saa vigtig som navnet. Med indgangskurven, der bremser
     op, var feltet under en femtedel synligt efter 80 ms og lignede stadig
     et klip. Selve sloeret gaar linjaert -- en flade, der kun skifter
     gennemsigtighed, laeses bedst med jaevn fart -- mens punkterne, der ogsaa
     flytter sig, tager udgangskurven. De gaar foerst, feltet bagefter. */
  .nav[data-lukker] {
    animation: navUd var(--md-sys-motion-duration-medium2) linear forwards;
  }
  .nav[data-lukker] .nav__list > * {
    animation: navPunktUd var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-accelerate) forwards;
  }
  @keyframes navSloer {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes navUd {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes navPunkt {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes navPunktUd {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translate3d(0, 8px, 0); }
  }

  /* Feltfokus paa formularen */
  .field input, .field textarea, .field select {
    transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
}

/* Uden JS eller med fravalgt animation vises alt med det samme */
.no-js .reveal, .no-js .reveal > .card, .no-js .reveal > .logo,
.no-js .page-enter > * { opacity: 1 !important; transform: none !important; }

/* ---------------- Kontaktopfordring i foden ----------------
   Opfordringen laa foer som et lyst baand over foden paa hver side. Den er
   flyttet ind i det moerke felt, saa siderne slutter ét sted. */
.footer-cta {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(253,246,248,.18);
}
.footer-cta__h { color: #fdf6f8; margin: 0 0 1rem; max-width: 22ch; }
.footer-cta__p { color: rgba(253,246,248,.78); margin: 0 0 1.75rem; max-width: 46ch; }
.footer-cta .btn { background: #fdf6f8; color: var(--mw-ink); }
.footer-cta .btn:hover { background: #fff; }

/* Liste over typer, sat som mærkater frem for punkter */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.tags li {
  padding: .35rem 1rem; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  font-size: .875rem; line-height: 1.4;
}