/* ==========================================================================
   Lindhardt Marketing — ét håndskrevet stylesheet.
   Farver og typeskala er trukket ud af den nuværende Elementor-side, så
   udtrykket matcher 1-1. Selve HTML/CSS er skrevet forfra.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Rubik er en variabel font — én fil dækker 300-900 */
@font-face {
  font-family: 'Rubik';
  src: url('/fonts/rubik-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Paletten er Elementors globale farver fra den nuværende side.
     Overskrifter er mørkeblå — ikke sorte. Brødtekst er dæmpet blågrå.
     Det er dét, der giver originalen sit varme, bearbejdede udtryk. */
  --navy: #1d274e;          /* overskrifter */
  --body: #747da1;          /* brødtekst */
  --ink: #111111;           /* mørke sektioner og header */
  --ink-soft: #292929;      /* footer */
  --red: #f94c30;
  --red-dark: #b4260f;
  --white: #ffffff;
  --sand: #f8f8f8;
  --grey-line: #d9d9d9;
  --grey-mid: #a7a7a7;
  --grey-text: #787878;

  --head: 'Poppins', system-ui, sans-serif;
  --body-font: 'Rubik', system-ui, sans-serif;

  /* fa long-arrow-alt-right — maske på kortenes link */
  --pil: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath d=%27M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z%27/%3E%3C/svg%3E");

  --shell: 1170px;
  --gap: 15px;
  --round: 30px;
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--head);
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.1;
}
h1 { font-size: 70px; font-weight: 900; line-height: 1.2; }
h2 { font-size: 55px; font-weight: 800; }
h3 { font-size: 45px; font-weight: 700; }
h4 { font-size: 35px; font-weight: 700; }
h5 { font-size: 20px; font-weight: 600; line-height: 1.2; }
h6 { font-size: 13px; font-weight: 600; line-height: 1.2; }

/* post-21.css .elementor-kit-21 p: margin-bottom 15px */
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

ul { margin: 0; padding: 0; list-style: none; }

/* Synligt tastaturfokus — krav i CLAUDE.md */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  font-family: var(--head);
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* --- Layout --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* post-19.css: indholdssektionerne har 100px top/bund. */
.section { padding: 100px 0; }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); }

/* Overskriftsblok: rød streg + eyebrow + h2/h3 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 15px;
}
.eyebrow::before {
  content: '';
  width: 70px;
  height: 2px;
  background: var(--red);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.section-head { margin-bottom: 45px; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2,
.section-head h3 { margin-bottom: 0; }
/* Originalens sektionsoverskrifter er h3-widgets: kit-21 --e-global-typography-text
   = Poppins 45px / 700 / 1.1em. Vores markup bruger h2 af hensyn til rangorden. */
.section-head h2 { font-size: 45px; font-weight: 700; line-height: 1.1; }

.on-ink h1, .on-ink h2, .on-ink h3,
.on-ink h4, .on-ink h5, .on-ink h6 { color: var(--white); }
.on-ink { color: var(--grey-line); }
/* Eyebrow arver kit h6 (#111) paa lyse sektioner, men er eksplicit hvid paa
   de moerke (72078bae, 5a911e56, 6cbb68c8 i post-19.css). */
.on-ink .eyebrow { color: var(--white); }

/* --- Knapper -------------------------------------------------------------- */
/* Originalens kit-knap (post-21.css .elementor-kit-21 .elementor-button):
   Poppins 15px / 500 / 1.2em, padding 15px 30px, radius 30px, ingen kant og
   ingen letter-spacing. De 2 px gennemsigtige kant beholdes (btn--ghost og
   btn--outline bruger den), og padding er trukket 2 px ind, saa kassen bliver
   praecis 15px/30px som originalens. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 30px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--red {
  background: var(--red);
  color: var(--white);
}
.btn--red:hover { background: var(--red-dark); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* --- Header --------------------------------------------------------------- */
/* Rullet tilbage til udgaven foer 1-1-gennemgangen. Alexander foretraekker
   den (28/7). LinkedIn-ikonet er IKKE med — det blev bevidst fjernet.
   Originalens header er gennemsigtig med 1px #FFFFFF2E-kant; det er
   fravalgt med vilje. */
.site-header {
  background: var(--ink);
  padding: 18px 0;
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-header__logo { flex: none; }
.site-header__logo img { width: 190px; height: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__link {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  padding: 8px 0;
  display: inline-block;
}
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--red); }

.nav__item--has-children { position: relative; }
.nav__toggle {
  font: inherit;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__toggle:hover { color: var(--red); }
.nav__toggle svg { width: 10px; height: 10px; fill: currentColor; }

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--ink-soft);
  border-radius: 12px;
  padding: 10px 0;
  margin-top: 10px;
  display: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
/* Bro over de 10 px margin. Uden den mister elementet :hover naar musen
   krydser mellemrummet, og menuen lukker for naesen af en. */
.nav__sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub,
.nav__item--has-children.is-open .nav__sub { display: block; }
.nav__sub a {
  display: block;
  padding: 9px 22px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.nav__sub a:hover { color: var(--red); background: rgba(255, 255, 255, .04); }

.site-header__cta { flex: none; }

.nav-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
}

/* --- Hero ----------------------------------------------------------------- */
/* Fuldbredde-foto med mørkt slør, tekst til venstre, udklippet person til
   højre. Personen får lov at stikke ned i det hvide under heroen, ligesom på
   den nuværende side. */
.hero {
  position: relative;
  background: var(--ink);
  padding: 0;
  /* Headeren er 95 px hoj og ligger oven paa heroen. Originalen loser det med
     margin-bottom:-100px paa header-sektionen, saa heroen starter i y=-5. */
  margin-top: -100px;
  overflow: visible;
}
.hero__baggrund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* post-19.css element 34dc858b: background-position: top center */
  object-position: top center;
  z-index: 0;
}
.hero__slor {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .9);
  z-index: 1;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  /* Originalen har to lige spalter a 570 px uden mellemrum (elementor-col-50 af
     1140). minmax(0,...) er noedvendig, ellers tvinger fotoets 545 px egen
     mindstebredde spalterne skaevt og H1 braekker for tidligt. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 40px;
  align-items: end;
  /* post-19.css: .elementor-element-34dc858b > .elementor-container{min-height:850px} */
  min-height: 850px;
}
.hero__tekst {
  padding-bottom: 0;
  /* Originalens tekstspalte staar ikke praecis paa bannerets lodrette midte,
     men 23 px lavere. Padding paa en lodret centreret boks flytter indholdet
     det halve ned, saa 46 px rammer originalens linjer paa pixelen. */
  padding-top: 46px;
  /* Centreret lodret i banneret. Figuren bliver på bunden via sin egen
     align-self, så den stadig stikker ned bag telefonkortet. */
  align-self: center;
}
/* Heroens eyebrow er HVID (post-19.css 72078bae -> --e-global-color-21bfb04)
   og uden letter-spacing. Stregen foran bliver roed. I de lyse sektioner
   laengere nede er den roede eyebrow rigtig, saa basen roeres ikke. */
.hero .eyebrow {
  color: var(--white);
  letter-spacing: 0;
  margin-bottom: 22px;
}
.hero h1 { margin-bottom: 20px; }
.hero__lead {
  font-size: 15px;
  color: var(--grey-line);
  max-width: 570px;
  margin-bottom: 35px;
}
/* Wrapperen holder kun linjehoejden. Originalens 2 px lodrette streg er
   fjernet efter oenske (Alexander 28/7) — den stoejede mere end den gjorde godt. */
.hero__cta {
  display: inline-block;
  line-height: 0;
}
.hero__figure {
  position: relative;
  /* end, ikke center: holder fotoet praecis hvor det stod foer spaltebredden
     blev rettet (hoejrekant 1290 - 20 = 1270) */
  justify-self: end;
  align-self: end;
  /* Fotoet er en halvfigur. Underkanten SKAL ligge inden for telefonkortet
     (kortets bund y=922 ved 1440px), ellers ses det hårde snit ved hoften
     ude i det hvide felt. 845 (grid-bund) + 70 = 915. Ændrer du højden,
     skal denne værdi med.
     right: 0 = centreret i sin kolonne. Alexander bad 28/7 om 820px og om at
     figuren skal stå centreret, så den ikke går ud over venstre kant. */
  margin-bottom: -70px;
  right: 0;
}
/* Styres på HØJDE, ikke bredde — ellers presser det heroen ud i højden og
   forskyder alt nedenunder. Fotoet er en halvfigur der stopper ved høften;
   højden er valgt så snittet lander bag det orange telefonkort (y=732). */
.hero__figure picture { display: block; }
.hero__figure img {
  /* De nederste 30 % tones bort og er helt vaek ved 96 %. Omraadet ligger bag
     telefonkortet i normal visning, saa masken ses ikke — men den fjerner den
     haarde kant ved hoften, saa der ikke er noget der KAN stikke ud. */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0) 96%);
  mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0) 96%);
  height: 820px;
  width: auto;
  max-width: none;
  display: block;
}

/* --- Telefonbånd ---------------------------------------------------------- */
/* Ligger hen over bunden af heroen, ligesom på den nuværende side */
/* post-19.css element 34dc858b: margin-bottom:-150px paa hero-sektionen */
.phone-band { position: relative; z-index: 6; margin-top: -150px; }
.phone-band__inner {
  background: var(--red);
  border-radius: var(--round);
  color: var(--white);
  padding: 40px;
  /* Kortet fylder praecis halvdelen af de 1140 px netto = 570 px */
  width: 50%;
  margin-left: auto;
  position: relative;
}
/* Stort telefonikon som vandmærke i højre side af kortet */
/* icon-phone-call2, U+EA54, trukket direkte ud af originalens egen ikonfont
   (elementskit.woff) med fontTools — ikke tegnet i haanden. Se /root/glyf2.py.
   Kontur-haandsaet paa skraa + to signalbuer overst til hojre.
   post-19.css: font-size 140px, farve #FFFFFF42 (= 25,9 % hvid), hojrekant
   30 px inde i kortet, lodret centreret. */
.phone-band__inner::after {
  content: '';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  background: url('/img/telefon.svg') no-repeat center / contain;
  opacity: .259;
  pointer-events: none;
}
/* post-19.css 513359ea: Poppins 15px / 500 / 1.2em, helt hvid, ingen sperring */
.phone-band__eyebrow {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--white);
}
.phone-band__number {
  font-family: var(--head);
  font-size: 35px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  display: inline-block;
}
.phone-band__number:hover { color: var(--ink); }
.phone-band p { color: #f8f8f8; }
/* Brødteksten holdes smal, så den brækker på to linjer som på originalen
   og ikke render helt ud i kanten af kortet */
.phone-band__inner > p { max-width: 25em; font-size: 15px; line-height: 1.7; margin: 19px 0 0; }

/* --- Om Lindhardt Marketing ----------------------------------------------- */
.about { padding: 100px 0; }
.about__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.about__figure img {
  border-radius: var(--round);
  width: 100%;
}
.about h3 { margin-bottom: 20px; }

.ticks { margin: 16px 0 0; }
.ticks li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 10px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
}
/* Originalen bruger elementskit-glyffen icon-checked1 (U+E9F2): en tynd
   cirkel-outline med et hak, hvis lange arm stikker ud over cirklen
   oeverst til hoejre. Tegnet som inline-SVG frem for en ekstra fontfil. */
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23F94C30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='6.5'/%3E%3Cpath d='M4.3 9.2L7.4 12.3L16.5 2.5'/%3E%3C/g%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.counters {
  display: flex;
  gap: 60px;
  margin-top: 45px;
  flex-wrap: wrap;
}
.counter__value {
  font-family: var(--head);
  font-size: 55px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.counter__label {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 8px;
}
.counter__note { font-size: 14px; }

/* --- Ydelser -------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  /* Ikonfeltet hænger 28 px op over kortets overkant (post-19.css 527b4dd2:
     margin-bottom -60px på et 80 px felt). Her er der gjort plads til det. */
  padding-top: 28px;
}
/* post-19.css 67f9f581: border 1px #D9D9D9, radius 30px, padding 30px.
   Ingen background-color og ingen box-shadow — sandfarven skinner igennem. */
.card {
  background: transparent;
  border: 1px solid var(--grey-line);
  border-radius: var(--round);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.card__num {
  font-family: var(--head);
  font-size: 35px;
  font-weight: 900;
  color: var(--grey-line);
  line-height: 1;
  margin-bottom: 18px;
  transition: color .25s;
}
/* kit-21 h5 = #111111 / Poppins 20px / 600 / 1.2em. Ingen hover-skift. */
.card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
}
.card p { margin-bottom: 25px; }
/* post-19.css 1ea25be9: farve = --e-global-color-primary (#1D274E),
   typografi f95c007 = Poppins 13px/600/1.2em, gap 10px, hover #B4260F. */
.card__link {
  margin-top: auto;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .3s;
}
.card__link:hover { color: var(--red-dark); }
/* fa long-arrow-alt-right (viewBox 0 0 448 512) lagt som maske, så pilen
   farves af currentColor præcis som originalens inline-SVG.
   ::after, ikke ::before — originalen viser pilen EFTER teksten. Verificeret i
   org-fuld.png y=2230-2275. Elementors markup har ikonet først i DOM'en, men
   det er visuelt placeret bagved; lad dig ikke narre af markup'en alene. */
.card__link::after {
  content: "";
  flex: none;
  width: .875em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--pil) no-repeat center / contain;
  mask: var(--pil) no-repeat center / contain;
}

.section-foot { text-align: center; margin-top: 50px; }

/* post-19.css f2b768b: padding 100px 15px. Scopet til ydelses-sektionen,
   så de øvrige .section-blokke ikke røres herfra. */
.section--ydelser { padding: 100px 0; }
/* De 15 px vandret fra samme regel ligger INDE i Elementors 1140 px container,
   så kortrækken bliver 1110 px bred (målt: 165-1274 i originalen). */
.section--ydelser .shell { padding-left: 30px; padding-right: 30px; }

/* --- Tilgang -------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.step__num {
  font-family: var(--head);
  font-size: 55px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 14px;
}
.step h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}
.step p { color: var(--grey-mid); }

/* --- Om mig --------------------------------------------------------------- */
.profile__grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.profile__figure img {
  border-radius: var(--round);
  width: 100%;
}
.profile__name { font-size: 35px; font-weight: 700; margin-bottom: 6px; }
.profile__role {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.profile__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  align-items: flex-start;
}
.profile__ctas h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* --- Kontakt -------------------------------------------------------------- */
/* post-19.css: kolonne 21178e6 (formular) 55 %, kolonne fbd6bdc (tekst) 45 %,
   og formularkolonnen har margin-right 60px. 1140 - 60 = 1080 fordelt 567:513.
   Hoejre kolonne er lodret centreret (align-content:center paa fbd6bdc). */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 567fr) minmax(0, 513fr);
  gap: 60px;
  align-items: center;
}
.form {
  background: var(--white);
  border-radius: var(--round);
  padding: 40px;
}
.form__row { margin-bottom: 18px; }
.form label {
  display: block;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.form input,
.form textarea {
  width: 100%;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--grey-line);
  border-radius: 10px;
  padding: 13px 16px;
}
.form textarea { resize: vertical; min-height: 140px; }
.form input:focus,
.form textarea:focus { border-color: var(--red); }

/* .contact-list er udgaaet: de tre linjer ligger nu i det hvide
   "Kontor & kontakt"-kort som .kontor__liste, praecis som i originalen. */

.socials {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  transition: background-color .2s;
}
.socials a:hover { background: var(--ink); }
.socials svg { width: 17px; height: 17px; fill: var(--white); }

/* --- Footer --------------------------------------------------------------- */
/* Rullet tilbage til udgaven foer 1-1-gennemgangen (Alexanders oenske 28/7). */
.site-footer {
  background: var(--ink-soft);
  color: var(--grey-mid);
  padding: 110px 0 0;
}
.site-footer h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 20px;
}
.site-footer a { color: var(--grey-line); }
.site-footer a:hover { color: var(--red); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.site-footer__logo img { width: 190px; margin-bottom: 22px; }
.site-footer__links li { margin-bottom: 10px; }
.site-footer__links a { font-family: var(--head); font-size: 15px; font-weight: 500; }
.site-footer__contact li { margin-bottom: 10px; }
.site-footer__bar {
  margin-top: 88px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 25px 0;
  font-size: 14px;
}

/* Honningkrukke: skjult for øjne og skærmlæsere, men udfyldes af bots.
   Bevidst ikke display:none — det springer mange bots over. */
.honning {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pakker (visuelle priskort) ------------------------------------------- */
.pakker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.pakke {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--round);
  padding: 40px 35px;
  display: flex;
  flex-direction: column;
}
.pakke--fremhaevet {
  border-color: var(--red);
  box-shadow: 0 20px 45px rgba(249, 76, 48, .12);
}
.pakke__navn {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.pakke__pris {
  font-family: var(--head);
  font-size: 35px;
  font-weight: 900;
  color: var(--red);
  line-height: 1.1;
}
.pakke__pris small {
  display: block;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--grey-text);
  margin-top: 6px;
}
.pakke__drift {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 12px;
}
.pakke__liste {
  margin: 25px 0;
  padding-top: 25px;
  border-top: 1px solid var(--grey-line);
}
.pakke__liste li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.pakke__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: rotate(-45deg);
}
.pakke__note {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 20px;
}
.pakke .btn { margin-top: auto; align-self: flex-start; }
.pakker-note {
  margin-top: 25px;
  font-size: 14px;
  text-align: center;
}

/* --- Punktblokke på ydelsessider ------------------------------------------ */
.tekstblok {
  max-width: 760px;
  font-size: 17px;
}
.tekstblok--midt { margin: 0 auto; text-align: center; }

.punkter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px 45px;
  margin-top: 45px;
}
.punkt h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
.punkt h3::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--red);
  margin-bottom: 14px;
}

.afstand-over { margin-top: 60px; }
.profile__ctas--midt { align-items: center; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 800px; margin: 0 auto; }
.faq__punkt {
  background: var(--white);
  border-radius: 18px;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq__punkt summary {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  padding: 22px 55px 22px 28px;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::after {
  content: '';
  position: absolute;
  right: 28px;
  top: 28px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq__punkt[open] summary::after { transform: rotate(-135deg); top: 32px; }
.faq__punkt summary:hover { color: var(--red); }
.faq__svar { padding: 0 28px 24px; }

/* --- Brødtekstsider (privatlivspolitik m.fl.) ----------------------------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 28px; margin: 45px 0 15px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.2em; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.prose__opdateret {
  font-size: 14px;
  color: var(--grey-mid);
  margin-bottom: 35px;
}

/* --- Sidehoved på undersider ---------------------------------------------- */
.sidehoved {
  background: var(--ink);
  padding: 80px 0;
  text-align: center;
}
.sidehoved h1 { margin-bottom: 15px; }
.sidehoved p {
  color: var(--grey-line);
  max-width: 46em;
  margin: 0 auto;
  font-size: 17px;
}

/* --- Responsivt ----------------------------------------------------------- */
@media (max-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  h3 { font-size: 35px; }
  /* Sektionsoverskrifterne har egne regler paa desktop og skal foelge med ned */
  .section-head h2,
  .om__tekst h2,
  .cases__hoved h2 { font-size: 35px; }
  h4 { font-size: 22px; }
  .counter__value { font-size: 40px; }
  .step__num { font-size: 40px; }
  .phone-band__number { font-size: 28px; }

  .nav, .site-header__cta { display: none; }
  .nav-burger { display: block; }
  .site-header__inner.is-open .nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-soft);
    padding: 20px var(--gap);
    margin: 0;
  }
  .site-header__inner.is-open .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .site-header__inner.is-open .nav__sub {
    position: static;
    transform: none;
    display: block;
    background: none;
    box-shadow: none;
    padding: 0 0 0 18px;
    margin: 0;
  }

  .hero__grid,
  .about__grid,
  .profile__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 170px; margin-top: 0; }
  .hero__grid { min-height: 0; }
  /* Paa mobil ligger headeren ikke oven paa heroen */
  body:has(.hero) .site-header { background: var(--ink); }
  body:has(.hero) .site-header::before { display: none; }
  .hero__figure { order: -1; justify-self: center; }
  .hero__figure picture { display: block; }
.hero__figure img { max-width: 260px; }

  /* post-19.css: 1024-768 px = to kort pr. række, først under 768 fuldbredde */
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer__grid > *:nth-child(n) { padding: 0; }
}

@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }
  .tilgang__slor { background-position: 50% 50%; }
}

@media (max-width: 640px) {
  .section, .about { padding: 70px 0; }
  h1 { font-size: 34px; }
  .phone-band__inner {
    grid-template-columns: 1fr;
    padding: 35px 28px;
    gap: 22px;
    text-align: center;
  }
  .phone-band { margin-top: -90px; }
  .counters { gap: 35px; }
  .form { padding: 28px 22px; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* --- Diskret indtoning ved scroll ----------------------------------------- */
/* Originalen har NUL scroll-animationer (elementor-invisible findes 0 gange i
   index.html). Det her er et bevidst lille lag liv oveni: 14px + fade over
   0,5 s, i samme takt som Elementors egne 0,3 s hover-overgange.
   VIGTIGT: klassen .skjul-ind saettes af scriptet i Base.astro, og KUN paa
   elementer der ligger under foerste skaermfuld ved indlaesning. Alt der er
   synligt fra start roeres aldrig. Det holder to ting i orden: der blinker
   intet, og et hoejt skaermbillede (QA-harnessen kaerer 1440x7600) faar hele
   siden fuldt optegnet, fordi ingenting ligger under skaermkanten. */
.skjul-ind {
  opacity: 0;
  transform: translateY(14px);
}
.skjul-ind.er-inde {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
   Sektioner der matcher den nuværende sides opbygning
   =========================================================================== */

/* --- Om Lindhardt Marketing: foto til venstre, statkort der overlapper ----- */
.om { padding: 51px 0 101px; }
.om__grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 0;
  align-items: center;
}
.om__foto { position: relative; }
.om__foto > img {
  width: 100%;
  border-radius: var(--round);
  display: block;
}

/* De tre kort ligger hen over bunden af billedet og stikker ud til højre */
/* Målt på originalen: kortene er 195 px brede og starter 64 % inde i
   billedet — de stikker altså langt ud til højre, forbi fotoets kant. */
.statkort {
  position: absolute;
  /* Alexander 28/7: billedkortet er fjernet, og de to bokse er flyttet HELT
     ud i det hvide felt, saa de ikke laengere ligger ind over fotoet.
     100 % = fotoets hoejrekant, + 60 px = samme venstrekant som tekstspalten
     ovenover (.om__tekst har padding-left: 60px).
     bottom: 80px, ikke 0: bundjusteret med fotoet blev hullet ned fra
     fluebenene 141 px, og Alexander ville have boksene taettere paa teksten.
     80 px loefter dem, saa hullet bliver ca. 60 px. */
  left: calc(100% + 60px);
  right: auto;
  bottom: 80px;
  display: flex;
  align-items: stretch;
  gap: 24px;
}
.stat {
  border-radius: 30px;
  padding: 30px;
  /* 232 px i stedet for originalens 195: med kun to bokse i et 627 px bredt
     felt saa 195 px spinkelt ud. 2 x 232 + 24 = 488 px. */
  flex: 0 0 232px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  color: var(--white);
}
.stat--navy { background: var(--navy); }
.stat--rod { background: var(--red); }
.stat__over {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 10px;
}
.stat__tal {
  font-family: var(--head);
  font-size: 55px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.stat__under {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #f8f8f8;
}

.stat--video {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 30px;
  /* Originalen straekker ikke videokortet: 60 + 50 (knap) + 60 = 170 px */
  align-self: flex-start;
  height: 170px;
}
.stat--video img { width: 100%; height: 100%; object-fit: cover; }
.stat__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--red);
  z-index: 1;
}
/* Trekanten: 12 x 15 px som glyffen i originalen, centreret i skiven med
   ca. 1 px optisk forskydning til hoejre. */
.stat__play > i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 15px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(1px);
}
/* Gloed-ringene fra elementskit .glow-btn: hvid button-ripple, 3s */
.stat__play::before,
.stat__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #fff;
  opacity: .6;
  z-index: -1;
  animation: button-ripple 3s infinite;
}
.stat__play::after { animation-delay: .3s; }
.stat__play::before { animation-delay: .9s; }
@keyframes button-ripple {
  70%  { box-shadow: 0 0 0 15px #fff; opacity: 0; }
  100% { box-shadow: 0 0 0 0 #fff; opacity: 0; }
}

/* Originalen bruger her en h3 -> kit-21: Poppins 45px / 700 / 1.1em */
.om__tekst h2 { font-size: 45px; font-weight: 700; margin-bottom: 18px; }
/* Tekstspalten holdes oppe, så den ikke løber ned i statkortene */
.om__tekst { align-self: start; padding-top: 64px; padding-left: 60px; }
.om__tekst p { margin-bottom: 14px; }
/* post-19.css b9d877c: padding 100px 15px 25px 15px. Alexander bad 28/7 om
   mere luft under portraettet, saa bunden er hoejere end originalens 25. */
.section.om-mig { padding-bottom: 70px; }

/* --- Ydelseskort: ikonfirkant, spøgelsestal, pil -------------------------- */
.card { position: relative; overflow: visible; }
/* post-19.css 527b4dd2: 40 px glyf + Elementors .5em polstring = 80 px felt,
   radius 30 px, rykket 30 px ind og 28 px op over kortkanten (z-index 1). */
.card__ikon {
  position: absolute;
  top: -28px;
  left: 30px;
  width: 80px;
  height: 80px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  color: var(--white);
  z-index: 1;
}
.card__ikon svg { width: 40px; height: 40px; }
.card--rod .card__ikon { background: var(--red); }
.card--navy .card__ikon { background: var(--navy); }

/* post-19.css 2ccfe9f6: text-align right, gennemsigtigt fyld (#02010100) med
   1 px #D9D9D9 kontur. Størrelsen kommer fra kit-21 h3 = Poppins 45px/700/1.1em.
   Tallet ligger i normalt flow som kortets første element — som i originalen. */
.card__spoegelse {
  display: block;
  text-align: right;
  font-family: var(--head);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey-line);
  margin-bottom: 20px;
}

/* --- Tilgang: tre store hvide cirkler på mørk fotobaggrund ---------------- */
/* post-19.css .elementor-element-4c226036: padding 110px 15px både for- og forneden. */
.tilgang { position: relative; padding: 110px 0; overflow: hidden; }
.tilgang__baggrund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Originalens overlay er #111 med opacity .9 OG den stiplede bue som
   background-image (agency-img42.png, 50% 300px, 85% auto). Pilens egen alfa
   er 102/255 = .4, og laget daempes til .9 -> .36 mod fotoet. Derfor opacity
   paa laget frem for rgba() i farven. Pilen ligger dermed BAG cirklerne. */
.tilgang__slor {
  position: absolute; inset: 0; z-index: 1;
  background-color: #111111;
  background-image: url("/pil-tilgang.png");
  background-repeat: no-repeat;
  background-position: 50% 300px;
  background-size: 85% auto;
  opacity: .9;
}
.tilgang__ind { position: relative; z-index: 2; }

/* Originalen: 1140px-container, tre hvide cirkler a 320px med 90px imellem
   (kolonne-marginer 60+30). Rammen er et <ol>, saa browserens egen
   padding-inline-start og margin-block skal nulstilles. */
.cirkler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cirkel {
  position: relative;
  background: var(--white);
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 20px;
  margin-top: 10px;
}
/* Midterste cirkel staar 50px lavere (kolonne-margin 60px mod 10px). */
.cirkel--midt { margin-top: 60px; }

/* Den indre graa ring: 6px #D9D9D9, 20px inde fra den hvide kant.
   Hover farver ringen orange (01/03) og navy (02) — post-19.css. */
.cirkel__ring {
  height: 100%;
  border: 6px solid #d9d9d9;
  border-radius: 50%;
  /* padding-top uden modsvar i bunden skubber det centrerede indhold 18 px ned,
     saa titlen ikke klistrer op i nummer-badgen (Alexander 28/7). */
  padding: 36px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: border-color .3s;
}
.cirkel:hover .cirkel__ring { border-color: var(--red); }
.cirkel--midt:hover .cirkel__ring { border-color: var(--navy); }

/* Indholdet staar paa hvid bund og maa ikke arve .on-ink-farverne.
   Titel = kit-h5 #111111 / Poppins 20px / 600 / 1.2em.
   Broedtekst = elementskit .ekit-heading__description 16px / 24px / #747DA1. */
/* -8px vandret: den danske titel i cirkel 02 er ca. 1px bredere end ringens
   188px indre og braekkede i to linjer ind under nummer-badgen. Kun titlen
   faar den ekstra plads, saa broedtekstens ombrydning bliver som originalens. */
.cirkel h3 { font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0 -8px 10px; color: #111111; }
.cirkel p { font-size: 16px; line-height: 24px; margin: 10px 0 0; color: #747da1; }

/* Nummer-badge: h4 i egen rund boks oeverst til hoejre, 40px inde fra
   cirkelkanten (20px widget-margin + 20px kolonne-padding). Poppins 35/700. */
.cirkel__nr {
  position: absolute;
  top: 24px;
  right: 40px;
  z-index: 2;
  padding: 15px 18px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--head);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.1;
}
.cirkel__nr--navy { background: var(--navy); }

/* Eyebrow paa den moerke tilgang-sektion er hvid (--e-global-color-21bfb04). */
.tilgang .eyebrow { color: var(--white); }
/* Originalen har kun ~41px fra overskriftsboksen til cirklernes top. */
.tilgang .section-head { margin-bottom: 30px; }

/* --- Om mig: stort foto til venstre --------------------------------------- */
/* Originalen: to elementor-col-50 i 1140px-beholderen = 570 + 570 uden gap.
   Hoejre kolonne har padding-left 60px (post-19.css .elementor-element-681def9a
   > .elementor-element-populated), og den er top-justeret - kun foto-kolonnen
   har align-items:center. */
.om-mig { padding: 100px 0; }
/* 25px bundpadding paa overskriftsafsnittet + 50px toppadding paa
   indholdsafsnittet = 75px mellem overskriftsboks og foto. */
.om-mig .section-head { margin-bottom: 75px; }
/* post-19.css 60d04ef: margin 15px 300px 0 300px i 1140px => 540px tekstboks. */
.om-mig .section-head h2 { max-width: 540px; margin-inline: auto; }

.profil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.profil__foto img { width: 100%; border-radius: var(--round); }
.profil__tekst { padding-left: 60px; }
/* kit-21 h4: #111111. post-19.css saetter ingen farve paa navnet. */
.profil__tekst h3 { font-size: 35px; color: var(--ink); margin-bottom: 18px; }
/* Ikon-widgetten har padding-top 5px (padding, ikke margin - ellers kollapser
   den med navnets 18px). Widget-afstanden nedad er 25px, fordi den indre
   sektion 2c099066 har margin-bottom 25px. */
.profil__social {
  display: flex;
  gap: 11px;
  padding-top: 5px;
  margin-bottom: 25px;
}
/* --icon-size 15px + 2 x --icon-padding 0.6em = 33px, 1px kant i #F94C30. */
.profil__social a {
  width: 33px; height: 33px; border-radius: 50%;
  border: 1px solid var(--red);
  display: grid; place-items: center;
}
.profil__social svg { width: 15px; height: 15px; fill: var(--red); }
.profil__social a:hover { background: var(--red-dark); border-color: var(--red-dark); }
.profil__social a:hover svg { fill: var(--white); }
/* kit-21 h5: Poppins 20px / 600 / 1.2em, farve #111111. */
.profil__over {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 18px 0 18px;
}
.profil__knapper { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* Originalens tre knapper her staar i normal skrift - versalerne andre steder
   paa siden staar i selve teksten, ikke i CSS. */
.profil__knapper .btn { text-transform: none; }

/* --- Cases: tre billeder der overlapper ned i et mørkt bånd --------------- */
/* post-19.css 1ae80870: margin-top 100px, margin-bottom -200px (billederne
   staar 200 px ned i baandet), padding 0. Baandet er 700 px hoejt, saa
   padding-bottom 500 px giver praecis 200 px overlap. */
.cases { position: relative; padding: 100px 0 300px; }
/* Kolonnerne fra post-19.css: 33.333% (elementor-col-33) / 45% (7b45c875) /
   21.332% (338c5584), uden mellemrum - sektionen er elementor-column-gap-no.
   Midterspalten har 40 px venstremargin paa .elementor-element-populated. */
.cases__hoved {
  display: grid;
  grid-template-columns: 33.333% 45% 21.332%;
  column-gap: 0;
  row-gap: 22px;
  align-items: center;
  margin-bottom: 42px;
}
/* Originalen bruger her en h3 -> kit-21: Poppins 45px / 700 / 1.1em */
.cases__hoved h2 { font-size: 45px; font-weight: 700; margin-bottom: 0; }
/* 7b45c875: align-content/align-items flex-end - broedteksten er bundjusteret,
   mens knapspalten (338c5584) er centreret. */
.cases__brod { margin: 0 0 0 40px; align-self: end; }
/* elementor-align-right paa knap-widget'en 1a338e4b */
.cases__hoved .btn { justify-self: end; }
.cases__billeder {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.cases__billeder figure { margin: 0; }
/* Elementor-galleriet tvinger 1:1 (data-settings aspect_ratio 1:1) via
   e-gallery.min.css med background-size cover / position center. Kildefilerne
   er 500x550 og bliver altsaa beskaaret til kvadrat. */
.cases__billeder img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--round);
  display: block;
}
/* e2304ec: fotobaggrund agency-img014.jpg (= samme fil som heroens
   hero-baggrund.jpg), cover/center, under et #111111-
   overlay med opacity .9. Hoejden 700 px er bevidst afsat for den udeladte
   "Sponsers & Clients"-sektion - den maa ikke aendres. */
.cases__baand {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* 300 px, ikke 700: originalens "Sponsers & Clients" er ikke bygget, og et
     tomt baand paa 700 px saa ud som en fejl. 200 px billed-overlap + 100 px. */
  height: 300px;
  background:
    linear-gradient(rgba(17, 17, 17, .9), rgba(17, 17, 17, .9)),
    url("/cases-baand.jpg") center center / cover no-repeat;
  z-index: 1;
}

/* --- Responsivt for de nye sektioner -------------------------------------- */
@media (max-width: 1024px) {
  .om__grid, .profil { grid-template-columns: 1fr; gap: 40px; }
  .om__tekst { padding-left: 0; }
  .profil__tekst { padding-left: 0; }
  .statkort { position: static; margin-top: 18px; flex-wrap: wrap; }
  .stat { flex: 1 1 195px; }
  .stat--video { align-self: auto; height: auto; min-height: 170px; }
  .cirkler { grid-template-columns: 1fr; gap: 26px; }
  .cirkel { aspect-ratio: auto; border-radius: var(--round); padding: 30px; margin-top: 0; }
  .cirkel--midt { margin-top: 0; }
  .cirkel__ring { height: auto; border-radius: var(--round); padding: 26px 24px; }
  .cirkel__nr { top: -27px; right: 24px; }
  .tilgang__slor { background-position: 50% 40%; }
  .cases__hoved { grid-template-columns: 1fr; gap: 22px; }
  .cases__brod { margin-left: 0; }
  .cases__hoved .btn { justify-self: start; }
  .cases__billeder { grid-template-columns: 1fr; }
  .cases__baand { height: 120px; }
}

/* --- Kontaktsektionen: baggrundsfoto og pilleformede felter --------------- */
/* post-19.css .elementor-element-1efc9371: padding 100px 15px, baggrundsfoto
   med et separat overlay-lag i #F8F8F8 ved opacity .75. */
.section--sand:has(.contact__grid) {
  position: relative;
  padding: 100px 0;
  background:
    linear-gradient(rgba(248, 248, 248, .75), rgba(248, 248, 248, .75)),
    url('../assets/kontakt-bg.jpg') center / cover no-repeat;
}
@media (min-width: 1025px) {
  /* post-19.css saetter background-attachment:fixed fra 1025px og op. */
  .section--sand:has(.contact__grid) { background-attachment: fixed, fixed; }
}

.form {
  background: transparent;
  padding: 0;
}
/* Feltgrupperne har 20px vandret luft og 20px lodret i originalen. */
.form__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form__par,
.form__row { margin-bottom: 20px; }
.form__par .form__row { margin-bottom: 0; }

/* kit-21: Rubik 15/1.7, radius 30px, padding 15px, farve #747DA1.
   post-19: hvid bund, 1px kant i #D9D9D966. Ingen skygge i originalen. */
.form input,
.form textarea {
  background: var(--white);
  border: 1px solid rgba(217, 217, 217, .4);
  border-radius: 30px;
  padding: 15px;
  line-height: 1.7;
  color: var(--body);
  box-shadow: none;
}
/* rows=6: 6 x 25,5px + 30px padding + 2px kant = 185px */
.form textarea { border-radius: 30px; min-height: 185px; }
.form ::placeholder { color: var(--body); opacity: .6; }
/* Originalen har ingen farvet fokuskant, kun en diskret indvendig graa ring.
   Tastaturfokus beholder :focus-visible-omridset fra reset'en. */
.form input:focus,
.form textarea:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
/* Etiketterne bliver liggende for skaermlaesere; placeholderne er det synlige. */
.form label {
  position: absolute;
  left: -9999px;
}
/* button_width:100 + elementor-button-align-stretch giver fuldbredde-knap.
   kit-21: padding 15px 30px, radius 30px, ingen kant. */
.form .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 30px;
  border: 0;
  font-weight: 500;
  letter-spacing: normal;
}

/* Tekstkolonnen: overskrift-widget har margin-top 15px, og widget-afstanden
   i originalen er 20px hele vejen ned. */
.contact__grid .section-head { margin-bottom: 20px; }
.contact__grid .section-head h2 { margin-top: 15px; }
.contact__tekst > p { margin-bottom: 0; }
.contact__folg {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 0 0;
}
/* Ikonerne i kontaktsektionen er mindre og moerkeblaa - ikke som footerens. */
.socials--kontakt { gap: 5px; margin-top: 20px; }
.socials--kontakt a { width: 36px; height: 36px; background: var(--navy); }
.socials--kontakt a:hover { background: var(--red-dark); }
.socials--kontakt svg { width: 14px; height: 14px; }
/* elementor-animation-grow: transform scale(1.1) over 0,3 s */
.socials--kontakt a { transition: background-color .3s, transform .3s; }
.socials--kontakt a:hover { transform: scale(1.1); }

/* --- Raekke 2: hvidt kontor-kort + kortfelt ----------------------------- */
/* Inner-section 7b95eb19: margin-top 50px, to kolonner a 50 % med 30px margin
   hver (= 60px imellem). */
.kontakt__nederst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
}
.kontor {
  background: var(--white);
  border-radius: 30px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .05);
  padding: 30px;
}
.kontor h5 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}
.kontor > p { margin: 0 0 26px; }
/* Ikon-listen ligger i et graat felt: post-19 64b47a20. */
.kontor__liste {
  background: var(--sand);
  border-radius: 30px;
  padding: 25px 30px;
}
.kontor__liste li {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
}
.kontor__liste li + li { margin-top: 10px; }
.kontor__liste svg {
  width: 15px;
  height: 15px;
  fill: var(--red);
  flex: none;
}
.kontor__liste a { color: var(--navy); }
.kontor__liste a:hover { color: var(--red); }

/* Kortfeltet har samme kasse som originalens Maps-iframe (325px, radius 30px),
   men uden indlejret Google-kort. Se kommentaren i KontaktSektion.astro. */
.kontakt__kort iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: inherit;
}
.kontakt__kort {
  height: 325px;
  border-radius: 30px;
  overflow: hidden;
  background: #e9edea;
  /* Ren ramme om iframen. Var display:grid + place-content:center + 30px
     padding fra dengang feltet var en pladsholder — det gav iframen kun
     sporets hoejde i stedet for hele feltets. */
  display: block;
  padding: 0;
}
.kontakt__kort-naal { width: 26px; height: 26px; fill: var(--red); }
.kontakt__kort-by {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
}

@media (max-width: 900px) {
  .kontakt__nederst { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .form__par { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form__par .form__row { margin-bottom: 20px; }
  .section--sand:has(.contact__grid) { padding: 70px 0; }
  /* Mailadressen er 31 tegn og sprang ud over kortets kant paa telefon.
     Originalen skruer selv det graa felts padding ned til 20px paa mobil. */
  .kontor { padding: 25px; }
  .kontor__liste { padding: 20px; }
  .kontor__liste li { gap: 15px; align-items: flex-start; font-size: 14px; }
  .kontor__liste svg { margin-top: 2px; }
  .kontor__liste a,
  .kontor__liste span { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  /* Mailadressen skal kunne staa paa en linje ogsaa paa den smalleste telefon. */
  .kontor__liste li { font-size: 13px; gap: 12px; }
}

/* Footerens mønsterbaggrund ligger nu i .site-footer::before laengere oppe,
   som et selvstændigt lag med opacity .07 - præcis som originalens overlay. */