/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
@import url("../Divi/style.css");

:root {
  /* Shared with the "Button 009" section near the end of this file —
     defined here (rather than down there) since :root vars belong at
     the top, and the padding rule below needs to reference --btn9-gap.
     rem (not em): buttons across the site have different font-sizes,
     and em would scale the icon/gap with each one individually, making
     arrows a different size on every button. rem is fixed to the root
     font-size, so icon size and spacing stay identical everywhere. */
  --btn9-icon-size: 0.875rem;
  --btn9-gap: 1.375rem;
  --btn9-shift: 1rem; /* how far the label's "room" shifts on hover */
  --btn9-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
  --btn9-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Button hover effect */
#page-container #main-content .et_pb_button, #page-container #main-content #et-boc .et_pb_button {
  position: relative !important;
  overflow: hidden;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
    padding-left: 30px !important;
  padding-right: 50px !important;
  transition: padding 0.5s var(--btn9-ease-hover) !important;
}
.et_pb_button:active, #main-content #et-boc .et_pb_button:active {
  scale: 0.955 0.925;
}
.et_pb_button::before,
.et_pb_button::after,
#main-content #et-boc .et_pb_button::before,
#main-content #et-boc .et_pb_button::after {
  content: "" !important;
  display: block;
  position: absolute;
  top: 70%;
  width: var(--btn9-icon-size);
  height: var(--btn9-icon-size);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 19L21 12L14 5' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M21 12H2' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 19L21 12L14 5' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M21 12H2' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.5s var(--btn9-ease-hover), opacity 0.15s ease-out;
  pointer-events: none;
}
/* Left icon (::before) — hidden at rest, off further left than its slot */
.et_pb_button::before, #main-content #et-boc .et_pb_button::before {
  left: 1.25rem;
  translate: -1.5rem -50% 0;
  opacity: 0;
}
/* Right icon (::after) — visible at rest, in its slot */
.et_pb_button::after, #main-content #et-boc .et_pb_button::after {
  right: 1.75rem;
  translate: 0 -50% 0;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #page-container #main-content .et_pb_button:is(:hover, :focus-visible), #page-container #main-content #et-boc .et_pb_button:is(:hover, :focus-visible) {
    padding-left: calc(var(--btn9-gap) + var(--btn9-shift)) !important;
    padding-right: calc(var(--btn9-gap) - var(--btn9-shift)) !important;
  }
  #page-container #main-content .et_pb_button:is(:hover, :focus-visible), #page-container #main-content #et-boc .et_pb_button:is(:hover, :focus-visible) {
    padding-left: 50px !important;
    padding-right: 30px !important;
  }
  .et_pb_button:is(:hover, :focus-visible)::before, #page-container #main-content #et-boc .et_pb_button:is(:hover, :focus-visible)::before {
    translate: 0 -50% 0;
    opacity: 1;
    transition: translate 0.5s 0.075s var(--btn9-ease-hover), opacity 0.15s 0.075s ease-out;
  }
  .et_pb_button:is(:hover, :focus-visible)::after, #page-container #main-content #et-boc .et_pb_button:is(:hover, :focus-visible)::after {
    translate: 1.5rem -50% 0;
    opacity: 0 !important;
    transition: translate 0.5s 0.05s var(--btn9-ease-hover), opacity 0.15s 0.075s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .et_pb_button::before,
  .et_pb_button::after {
    transition: none;
  }
}

/* General */
#main-content a.et_pb_button {
    transition: .5s cubic-bezier(0.625, 0.05, 0, 1);
}
.et_pb_row, .container, #main-footer .footer-inner, .et-db #et-boc .et-l .et_pb_row:not([class*="et_flex_column"]), .et_pb_row:not([class*="et_flex_column"]) {
    width: 95%;
    max-width: 2000px;
}
em, i, h1, h2, h3, h4, h5, h6, p, a, div {
    letter-spacing: -.2px;
}
#top-menu > li:last-child, #main-header, #top-menu li li a, #footer-widgets .footer-widget li a, #innovation .et_pb_column, #innovation .et_pb_column::after {
    transition: 0.3s cubic-bezier(0.625, 0.05, 0, 1) !important;
}
.pre-headline, .pre-headline *, #samarbejde .et_pb_column::before, #front .pre-headline h1, .single-post-hero .pre-headline {
    font-size: 12px !important;
    letter-spacing: 1px;
    line-height: 20px !important;
    text-transform: uppercase;
    font-weight: 600;
    color: #1F0AFF !important;
}
.et_pb_bg_layout_dark.pre-headline *, #front .et_pb_bg_layout_dark.pre-headline h1, .single-post-hero .pre-headline, #samarbejde .et_pb_column::before, .et_pb_bg_layout_dark h1 strong, .et_pb_bg_layout_dark h2 strong, .et_pb_bg_layout_dark h3 strong, .et_pb_bg_layout_dark h4 strong, .et_pb_bg_layout_dark h5 strong, .et_pb_bg_layout_dark h6 strong {
    color: #F9CFC4 !important;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    color: #1F0AFF;
}
#page-container #main-content a.et_pb_button {
    /* Padding (incl. hover) is now fully owned by the "Button 009" section
       near the end of this file — kept only here for its own sake so it
       doesn't fight the hover-padding "push" on specificity. */
    font-weight: 600 !important;
}
#main-content a.et_pb_button.secondary-btn {
    color: #1F0AFF !important;
    background: none !important;
    border: 1px solid #1F0AFF !important;
}
#main-content a.et_pb_button.secondary-btn:hover {
    color: white !important;
    background: #1f0aff !important;
}
#main-content a.et_pb_button.et_pb_bg_layout_dark {
    color: #1F0AFF !important;
    background: white !important;
    border: 1px solid #1F0AFF !important;
}

/* Header */
#main-header {
    border-bottom: 1px solid rgba(255,255,255,.2);
    box-shadow: none !important;
}
#main-header.et-fixed-header {
    background: rgba(31,10,255,0.8);
    backdrop-filter: blur(6px);
}
#top-menu .menu-item-has-children > a:first-child {
    padding-right: 0 !important;
}
#top-menu .menu-item-has-children > a:first-child::after {
    display: none !important;
}
#top-menu li {
    padding-right: 35px !important;
}
#top-menu li a {
    font-weight: 400;
    opacity: 1 !important;
}
#top-menu li.current-menu-item > a, .single-cases #top-menu li#menu-item-46 > a, #top-menu li.current_page_ancestor > a {
    font-weight: 600;
}
#et-top-navigation, nav#top-menu-nav, #top-menu, nav.et-menu-nav, .et-menu {
    float: none !important;
    padding-left: 0 !important;
    text-align: center;
}
#top-menu > li:last-child {
    position: absolute;
    right: 0;
    top: 40px;
}
#top-menu > li:last-child a {
    color: #1F0AFF !important;
    font-weight: 600;
    background: white !important;
    padding: 12px 30px !important;
    border-radius: 4px;
    font-size: 13px;
}
#top-menu > li:nth-child(4) {
    padding-right: 0 !important;
}
#main-header.et-fixed-header #logo {
    height: 40%;
    max-height: 40%;
}
#main-header.et-fixed-header #top-menu > li:last-child {
    top: 18px;
}
.nav li ul {
    top: 25px;
  background: rgba(255,255,255,.3) !important;
  backdrop-filter: blur(6px);
  border-radius: 4px;
  border-top: none !important;
  box-shadow: none !important;
  padding: 5px 0 !important;
}
#main-header.et-fixed-header .nav li ul {
    background: rgba(31,10,255,0.9) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
}
#top-menu li li {
    padding: 0 !important;
}
#top-menu li li a {
    width: 240px !important;
    background: none !important;
    font-size: 14px !important;
}
#top-menu li li a:hover {
    padding-left: 26px !important;
}

/* Front */
#front {
    height: 100vh;
    display: grid;
    align-content: center;
    position: relative;
}
#front::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(31,10,255,0.8);
    bottom: 0;
    top: 0;
    z-index: 99;
}
#front .et_pb_row {
    z-index: 999;
    position: relative;
}
#front h1, .large-headline, .large-headline * {
    font-size: 4vw;
    line-height: 4vw;
}
#front .et_pb_button {
    background: white !important;
    color: #1F0AFF !important;
    border: 1px solid white !important;
}
#front .et_pb_button_module_wrapper {
    display: inline-block !important;
    margin: 0 5px;
}
#front .et_pb_column {
    text-align: center;
}
/* Note: the old ::after "$" icon-font glyph is gone — icons are now
   handled globally by the "Button 009" section near the end of this
   file, which reads currentColor, so it already inherits the right
   icon color from the `color` set above for both variants. */
#main-content .et_pb_number_counter .percent p {
    font-weight: 700 !important;
    font-size: 60px !important;
  color: #121D2B !important;
  line-height: 60px !important;
}
#main-content .numbers h3.title {
    font-weight: 500;
  font-size: 18px;
  letter-spacing: 0px;
  margin-top: -20px;
}
h2 span.info {
    font-size: 20px;
  background: #eee;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  position: relative;
  top: -15px;
  margin-left: 15px;
  cursor: pointer;
  z-index: 999999999;
}
h2 span.info::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 130%;
  left: 20px;
  width: 320px;
  background: #333;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: -.5px;
  padding: 12px 14px;
  border-radius: 6px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 999999999999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
h2 span.info::before {
  content: "";
  position: absolute;
  top: 122%;
  left: 30px;
  border: 6px solid transparent;
  border-bottom-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 9999;
}
h2 span.info:hover::after,
h2 span.info:hover::before {
  opacity: 1;
  visibility: visible;
}
/* .fade-in-up (used for the scroll-in animation) applies a transform,
   which creates its own stacking context. That traps the tooltip's
   z-index inside it, so it can never rise above the module/section
   that follows in the DOM — no matter how high the z-index is set.
   Fix: give the animated wrapper itself a raised z-index so it wins
   against later siblings once it contains the tooltip trigger. */
.fade-in-up:has(span.info) {
  position: relative;
  z-index: 20;
}
#produkter .et_pb_column {
    padding: 40px 40px 80px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,.05);
}
.pre-headline.tag .et_pb_text_inner {
    display: inline-block;
    padding: 6px 25px;
    background: #1F0AFF !important;
    align-self: flex-start;
    border-radius: 6px;
    margin-bottom: 30px;
}
.pre-headline.tag .et_pb_text_inner, .pre-headline.tag .et_pb_text_inner * {
    color: white !important;
}
#produkter h3 {
    font-size: 24px;
}
#produkter .price em {
    opacity: .5;
    font-style: normal;
    font-size: 13px;
    margin-left: 3px;
}
#produkter .checklist {
    margin-top: 20px;
}
#produkter .price {
    margin-bottom: 20px;
}
.checklist ul {
    padding-left: 0;
    list-style-type: none !important;
}
.checklist.checklist-large ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Icon is taken out of flow (position: absolute) and li gets padding-left
   equal to its width + gap instead — that way every wrapped line indents
   to clear the icon, rather than the 2nd+ line falling back to the left
   edge underneath it (what inline-block + margin-right alone gives you). */
.checklist ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 34px;
}
.checklist ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: url('https://am-hub.dk/wp-content/uploads/2026/07/checklist-icon.svg');
    background-size: cover;
}
.checklist.checklist-large ul li {
  padding-left: 65px;
}
.checklist.checklist-large ul li::before {
  width: 50px;
  height: 50px;
  top: 0;
  left: -5px;
}
.et_pb_bg_layout_dark.checklist ul li::before {
    background-image: url('https://am-hub.dk/wp-content/uploads/2026/07/checklist-light-icon.svg') !important;
}
#main-content #front .et_pb_button.secondary-btn {
    border: 1px solid white !important;
    background: none !important;
    color: white !important;
}
#samarbejde .et_pb_column {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0px 50px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* important so pseudo-element can take full row */
}
#samarbejde {
    align-items: flex-start !important;
}
#samarbejde .et_pb_column::before {
    content: "01";
    display: block;
    width: 100%;
    border-top: 1px solid white;
    padding-top: 5px;
    margin-bottom: 40px;
}
#samarbejde .et_pb_column:nth-child(2)::before {
    content: "02";
}
#samarbejde .et_pb_column:nth-child(3)::before {
    content: "03";
}
#samarbejde .et_pb_column:nth-child(4)::before {
    content: "04";
}
#samarbejde .et_pb_column:nth-child(5)::before {
    content: "05";
}
#samarbejde .et_pb_column:nth-child(6)::before {
    content: "06";
}
#samarbejde .et_pb_column > .et_pb_text:first-child {
    flex: 2;
}
#samarbejde .et_pb_column > .et_pb_text:last-child {
    flex: 3;
}
.medium-text {
    font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
#innovation .medium-text {
    max-width: 70%;
}
#innovation .et_pb_column {
    padding: 20px;
    display: grid;
    align-content: end;
    border-radius: 6px;
    min-height: 340px;
    position: relative;
}
#innovation .et_pb_column::after {
    display: block;
    content: "$";
    font-family: ETmodules !important;
    color: white;
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 24px;
}
#innovation .et_pb_column.et_clickable:hover {
    padding-bottom: 30px;
    background-color: rgba(0,0,0,.5);
}
#innovation .et_pb_column.et_clickable:hover::after {
    bottom: 30px;
}
#c2a {
    min-height: 100vh;
    padding: 100px 0;
}
#c2a .c2a-tekst, #c2a .c2a-form {
    padding: 0 7.5%;
}
#c2a .c2a-form {
    padding: 5%;
    background: #1F0AFF;
    border-radius: 6px;
}
.small-text {
    font-size: 14px;
  line-height: 20px;
  opacity: .7;
}
#c2a .with_frm_style input, #c2a .with_frm_style textarea {
    background: none !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    border-radius: 6px !important;
    color: white !important;
    transition: .2s ease-in-out;
}
#c2a .with_frm_style input:focus, #c2a .with_frm_style textarea:focus {
    border: 1px solid white !important;
}
#c2a .with_frm_style input::placeholder, #c2a .with_frm_style textarea::placeholder {
    color: white !important;
}
#c2a .frm_button_submit {
    width: 100%;
  border: none !important;
  box-shadow: none !important;
  padding: 12px;
  font-weight: 600;
  background: white !important;
  color: #1F0AFF !important;
  margin: 0 !important;
}

/* Floating "Kan vi hjælpe med noget?" widget (header.php, .c2a) —
   NB: this is unrelated to the "#c2a" contact section styled directly
   above; the two just happen to share the c2a name. Sticky, bottom-
   right box. Headline and panel are the same width and share one
   background, and .c2a itself (not the panel) owns the rounded
   corners + shadow with overflow:hidden, so the two children read as
   a single unit rather than two stacked boxes. The panel sits below
   the headline in normal flow and is collapsed (max-height: 0) by
   default; since .c2a is anchored by `bottom`, growing the panel
   pushes the box's top edge — and the headline sitting at the top of
   the box — upward, rather than the box growing off the bottom of the
   screen. Toggle logic lives in general.js (initC2aWidget). */
.c2a {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 380px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(31,10,255,.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(18,29,43,.2);
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c2a.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.c2a-headline {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.2px;
  padding: 16px 28px;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}
.c2a-headline:hover {
  background: rgba(255,255,255,.08);
}
.c2a-headline::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease-in-out;
}
.c2a.is-open .c2a-headline::after {
  transform: rotate(45deg);
}
.c2a-panel {
  width: 100%;
  box-sizing: border-box;
  background: none;
  padding: 0 28px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease-in-out, opacity .25s ease-in-out;
}
.c2a.is-open .c2a-panel {
  max-height: 600px;
  opacity: 1;
  padding: 0 28px 28px;
}
.c2a-content, .c2a-content p {
  color: white;
  font-size: 12px;
  line-height: 18px;
}
#c2a-panel .form-field {
  margin-bottom: 10px !important;
}
.c2a-content {
  margin-bottom: 20px;
}
.c2a-panel .with_frm_style input,
.c2a-panel .with_frm_style textarea {
  background: none !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 6px !important;
  color: white !important;
  transition: .2s ease-in-out;
  font-size: 12px;
}
.c2a-panel .with_frm_style input::placeholder, .c2a-panel .with_frm_style textarea::placeholder {
  font-size: 12px !important;
}
.c2a-panel .with_frm_style input:focus,
.c2a-panel .with_frm_style textarea:focus {
  border: 1px solid white !important;
}
.c2a-panel .with_frm_style input::placeholder,
.c2a-panel .with_frm_style textarea::placeholder {
  color: white !important;
}
#c2a-panel .form-field:last-child {
  margin-bottom: 0 !important;
}
.c2a-panel .frm_button_submit {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px;
  font-weight: 600;
  background: white !important;
  color: #1F0AFF !important;
  margin: 0 !important;
  font-size: 12px !important;
}
#c2a-panel fieldset {
  padding-bottom: 0 !important;
}
@media (max-width: 767px) {
  .c2a {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }
  .c2a-headline {
    padding: 14px 20px;
    font-size: 13px;
  }
  .c2a.is-open .c2a-panel {
    padding: 0 20px 20px;
  }
}
/* Scroll animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 60ms; }
.fade-in-up:nth-child(3) { transition-delay: 120ms; }
.fade-in-up:nth-child(4) { transition-delay: 180ms; }
.fade-in-up:nth-child(5) { transition-delay: 240ms; }

/* ── Intro logo animation (homepage only) ──────────────────────
   Markup is rendered inline in functions.php (df_render_intro_overlay)
   so the 5 icon bars + wordmark can be targeted individually. See
   assets/general.js `initLogoIntro()` for the sequencing.        */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F6F6;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
#intro-overlay.is-exiting {
  transform: translateY(-100%);
}
.intro-box {
  display: flex;
  align-items: center;
}
/* Icon: 5 bars, each its own absolutely-positioned inline SVG so the
   CSS transform below animates in real pixels (not SVG user units). */
.intro-icon {
  position: relative;
  width: 49.24px;
  height: 39.24px;
  flex-shrink: 0;
  color: #1F0AFF;
}
/* Bars never move — they sit at their final/centered position the whole
   time. Each one reveals as a straight width wipe (0% -> 100%) via
   clip-path, wiping in from whichever edge matches its data-dir. */
.intro-line-svg {
  position: absolute;
  display: block;
  fill: currentColor;
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-line-svg[data-dir="left"]  { clip-path: inset(0 100% 0 0); }   /* hidden, wipes in left -> right */
.intro-line-svg[data-dir="right"] { clip-path: inset(0 0 0 100%); }   /* hidden, wipes in right -> left */
.intro-line-svg.is-in {
  clip-path: inset(0 0 0 0);
}
/* Text: the wrap starts fully collapsed via negative margin so the icon
   alone stays centered; animating margin-left back to its resting gap
   (12.06px) grows the row and pushes the icon left as the wordmark
   appears. The inner SVG additionally carries its own transform, offset
   just enough that the COMBINED position (wrap margin + inner transform,
   both on the same 0.9s timing) starts ~60px to the right of the final
   resting spot — clearly clear of the icon, not touching — and slides
   left into place as the wrap's margin finishes growing. Because both
   properties share the same duration/easing, the combination is always
   a single clean monotonic slide.
   Opacity on the wrap snaps instantly (not transitioned) — no fade. */
.intro-text-wrap {
  flex-shrink: 0;
  opacity: 0;
  margin-left: -96.07px;
  transition: margin-left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-text-wrap.is-in {
  opacity: 1;
  margin-left: 12.06px;
}
.intro-text-svg {
  display: block;
  fill: #1F0AFF;
  transform: translateX(168.13px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-text-wrap.is-in .intro-text-svg {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none; }
}

/* ── Logo slider */
.logo-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-slider-scroll 60s linear infinite;
}
.logo-slider--right .logo-slider__track {
  animation-direction: reverse;
}
.logo-slider__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: 0 45px;
}
.logo-slider__item img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  transition: .3s ease-in-out;
}
a.logoer-slider__item:hover img {
    filter: grayscale(0%) !important;
}
@keyframes logo-slider-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-slider__track {
    animation: none;
  }
}
@media (max-width: 767px) {
  .logo-slider__item {
    height: 40px;
    margin: 0 25px;
  }
  .logo-slider__item img {
    max-width: 110px;
  }
}

/* ── Seneste nyt slider ([seneste-nyt]) ─────────────────────────
   Native horizontal scroll + CSS scroll-snap (no JS carousel library).
   --seneste-nyt-gap controls spacing; slide width is set so 3 cards show
   fully with ~15% of the previous/next card peeking on each side (3.3
   slide-widths per viewport). Arrow buttons call scrollBy() in
   assets/general.js (initSenesteNytSlider). */
.seneste-nyt-slider {
  --seneste-nyt-gap: 24px;
  position: relative;
}
.seneste-nyt-slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
  padding-right: 2.5%;
}
.seneste-nyt-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 50%;
  background: white;
  color: #121D2B;
  cursor: pointer;
  transition: .2s ease-in-out;
}
.seneste-nyt-slider__arrow:hover {
  background: #1F0AFF;
  border-color: #1F0AFF;
  color: white;
}
.seneste-nyt-slider__arrow.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.seneste-nyt-slider__track {
  display: flex;
  gap: var(--seneste-nyt-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seneste-nyt-slider__track::-webkit-scrollbar {
  display: none;
}
.seneste-nyt-slide {
  flex: 0 0 calc((100% - 2 * var(--seneste-nyt-gap)) / 3.3);
  scroll-snap-align: start;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .3s ease-in-out;
  border: 1px solid rgba(0,0,0,.05);
}
.seneste-nyt-slide__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #000;
}
.seneste-nyt-slide:hover .seneste-nyt-slide__img {
    opacity: .5;
}
.seneste-nyt-slide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease-in-out;
}
.seneste-nyt-slide__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 6px 20px;
  background: #1F0AFF;
  color: white !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
}
.seneste-nyt-slide__body {
  padding: 24px;
}
.seneste-nyt-slide__date {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(0,0,0,.5);
}
.seneste-nyt-slide__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #121D2B;
}
@media (max-width: 980px) {
  .seneste-nyt-slide {
    flex-basis: calc((100% - var(--seneste-nyt-gap)) / 1.3);
  }
}

/* ── Highlighted case ([highlighted_case id="..."]) ─────────────────
   Featured image as a full-bleed background with a bottom gradient for
   text legibility; badge top-left, client/stat/caption + arrow bottom. */
.highlighted-case {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background-color: #121D2B;
  background-size: cover;
  background-position: center;
  text-decoration: none !important;
  color: white !important;
}
.highlighted-case__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.2);
  pointer-events: none;
  transition: .2s ease-in-out;
}
.highlighted-case__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 6px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.highlighted-case__footer {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.highlighted-case__text {
  display: flex;
  flex-direction: column;
}
.highlighted-case__client {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 6px;
}
.highlighted-case__number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: white;
}
.highlighted-case__caption {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
}
.highlighted-case__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  transition: .2s ease-in-out;
}
.highlighted-case:hover .highlighted-case__arrow {
    margin-right: 5px;
}
.highlighted-case:hover .highlighted-case__overlay {
    background: rgba(0,0,0,.5);
}

/* ── Cases grid ([cases]) ─────────────────────────────────────────
   Bento grid over every "cases" post: 4 columns, 3rd card featured as
   a 2x2 tile (grid-auto-flow: dense fills the rest around it). Card
   look matches .seneste-nyt-slide (white body, shadow, radius); the
   badge on the image reuses the .highlighted-case__badge look. */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* auto (not a fixed 320px) so rows can grow to fit the taller cards
     that come from the new 4:3 media aspect-ratio below, while still
     guaranteeing a sensible minimum. */
  grid-auto-rows: minmax(320px, auto);
  grid-auto-flow: dense;
  gap: 24px;
  /* Crossfade when switching grid/list (assets/general.js toggles
     .is-switching for the swap's duration — keep the ms below in sync
     with the setTimeout there). */
  transition: opacity .22s ease-in-out;
}
.cases-grid.is-switching {
  opacity: 0;
}
.cases-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.05);
  text-decoration: none !important;
  color: inherit !important;
}
.cases-card:nth-child(3) {
  grid-column: span 2;
  grid-row: span 2;
}
.cases-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Every case image is the same 4:3 ratio, including the featured 2x2
     tile (3rd card) — its box is just twice as wide, so the ratio (not
     the pixel size) is what's shared. */
  aspect-ratio: 4 / 3;
  background: #000;
}
.cases-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease-in-out;
}
.cases-card:hover .cases-card__img {
  opacity: .5;
}
/* Gradient scrim over every image — darkest at the top (badge legibility
   on light photos), a second darker pass at the bottom (for the
   highlighted-stat overlay below, when present), clear in the middle so
   the photo still reads. Sits above the <img> but below badge/stat/arrow
   purely via DOM order (all are position:absolute, no z-index needed). */
.cases-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,.55) 100%
  );
}
.cases-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 6px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cases-card__arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: .2s ease-in-out;
}
.cases-card:hover .cases-card__arrow {
  margin-right: 5px;
}
.cases-card__body {
  padding: 24px;
}
.cases-card__category {
  /* Text styling (size/weight/tracking/color) comes from the shared
     .pre-headline class in the markup — this just handles spacing. */
  display: block;
  margin-bottom: 8px;
}
.cases-card__title {
  margin: 0;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3;
  color: #121D2B;
    letter-spacing: -1px !important;
}
/* Shown over the image (bottom-left, above the gradient scrim) when a
   case has both ACF "highlighted_tal" and "highlighted_tekst" filled in
   (functions.php, df_shortcode_cases) — the title in .cases-card__body
   stays where it always was. Right edge stops short of .cases-card__arrow
   so long captions never run under it. */
.cases-card__stat {
  position: absolute;
  left: 24px;
  right: 56px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
}
.cases-card__stat-number {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: white;
  letter-spacing: -1px;
}
.cases-card__stat-caption {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.8);
}
.cases-card:nth-child(3) .cases-card__stat-number {
  font-size: 40px;
}
.cases-card:nth-child(3) .cases-card__stat {
  right: 70px;
}
/* [related-cases]: same grid/tiles as [cases], but always small — resets
   the "3rd card is a 2x2 featured tile" bento treatment (and the stat
   sizing that goes with it) back to a normal tile. */
.cases-grid--related .cases-card:nth-child(3) {
  grid-column: span 1;
  grid-row: span 1;
}
.cases-grid--related .cases-card:nth-child(3) .cases-card__stat-number {
  font-size: 26px;
}
.cases-grid--related .cases-card:nth-child(3) .cases-card__stat {
  right: 56px;
}
@media (max-width: 980px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(260px, auto);
  }
  .cases-card:nth-child(3) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .cases-grid--related .cases-card:nth-child(3) {
    grid-column: span 1;
  }
}
@media (max-width: 600px) {
  .cases-grid {
    grid-template-columns: 1fr;
  }
  .cases-card:nth-child(3) {
    grid-column: span 1;
  }
}

/* ── Cases toolbar (filters + grid/list toggle) ─────────────────────
   Sits above .cases-grid. Filters are custom single-select dropdowns
   (button + absolutely-positioned menu, toggled via .is-open — see
   assets/general.js, initCasesFilters); the grid/list buttons swap
   .cases-grid's data-view attribute, which the list-view rules below
   key off of. Labels reuse the .pre-headline look (Inter semibold,
   12px, uppercase, 1.2px tracking, #1F0AFF) via .cases-filter__label. */
.cases-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}
.cases-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}
.cases-filter {
  position: relative;
}
.cases-filter__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.cases-filter__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1F0AFF;
}
.cases-filter__chevron {
  flex-shrink: 0;
  color: #1F0AFF;
  transition: transform .2s ease-in-out;
}
.cases-filter.is-open .cases-filter__chevron {
  transform: rotate(180deg);
}
.cases-filter__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 14px);
  left: 0;
  min-width: 230px;
  padding: 8px;
  background: white;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(18,29,43,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease-in-out, transform .18s ease-in-out, visibility .18s;
}
.cases-filter.is-open .cases-filter__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cases-filter__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  color: #121D2B;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.cases-filter__option:hover {
  background: rgba(31,10,255,.06);
}
.cases-filter__option.is-active {
  background: rgba(31,10,255,.08);
  color: #1F0AFF;
  font-weight: 600;
}
.cases-view-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cases-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: #121D2B;
  opacity: .3;
  cursor: pointer;
  transition: opacity .15s ease-in-out, color .15s ease-in-out;
}
.cases-view-toggle__btn:hover {
  opacity: .7;
}
.cases-view-toggle__btn.is-active {
  color: #1F0AFF;
  opacity: 1;
}
/* Generic filtering hook — shared by .cases-card ([cases]/[related-cases])
   and .seneste-nyt-slide ([nyheder]); see assets/general.js,
   initCasesFilters. */
.filterable-card.is-filtered-out {
  display: none !important;
}
.cases-empty {
  padding: 60px 0;
  text-align: center;
  color: rgba(18,29,43,.5);
}

/* ── Cases grid: list view ───────────────────────────────────────────
   Toggled via [data-view="list"] on .cases-grid (assets/general.js).
   Rows instead of a bento grid: image left, badge/title/category right;
   the 3rd-card 2x2 span from the grid view is reset back to normal flow. */
.cases-grid[data-view="list"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cases-grid[data-view="list"] .cases-card {
  flex-direction: row;
  height: auto;
  grid-column: auto;
  grid-row: auto;
}
.cases-grid[data-view="list"] .cases-card__media {
  flex: 0 0 40%;
  aspect-ratio: 3 / 2;
}
.cases-grid[data-view="list"] .cases-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Headlines read much bigger in list view — there's a lot more room next
   to the image than in a grid tile. */
.cases-grid[data-view="list"] .cases-card__title {
  font-size: 36px;
  line-height: 1.2;
}
.cases-grid[data-view="list"] .cases-card__stat-number {
  font-size: 40px;
}
@media (max-width: 700px) {
  .cases-grid[data-view="list"] .cases-card {
    flex-direction: column;
  }
  .cases-grid[data-view="list"] .cases-card__media {
    flex-basis: auto;
  }
  .cases-grid[data-view="list"] .cases-card__title {
    font-size: 24px;
  }
}

/* ── Highlighted cases slider ([highlighted-cases]) ──────────────────
   Same chrome/behaviour as [seneste-nyt] (.seneste-nyt-slider — arrows,
   scroll-snap, the continuous clone-loop autoscroll in assets/general.js,
   initSenesteNytSlider — nothing there needs to change, it just picks
   this slider up too), but the tiles are .cases-card (small, no bento
   3rd-card treatment — same reset as .cases-grid--related below). Cards
   carry both "cases-card" (look) and "seneste-nyt-slide" (slider sizing
   + the JS's slide/autoplay-clone selector); .cases-card is defined
   later above so it already wins on display/radius, these two rules
   just make that explicit. */
.highlighted-cases-slider .cases-card {
  display: flex;
  border-radius: 6px;
}
.highlighted-cases-slider .cases-card:nth-child(3) {
  grid-column: auto;
  grid-row: auto;
}
.highlighted-cases-slider .cases-card:nth-child(3) .cases-card__stat-number {
  font-size: 26px;
}
.highlighted-cases-slider .cases-card:nth-child(3) .cases-card__stat {
  right: 56px;
}

#produkter .et_pb_button_module_wrapper {
    position: absolute;
    bottom: 35px;
}

/* Single Case */
.case-header {
    padding: 250px 0 150px !important;
}
.sub-headline, .sub-headline * {
    font-size: 20px;
}
.case-content .case-row {
    max-width: 80% !important;
}
.case-row img, .case-row .et_pb_video_box video, .border-radius .et_pb_image_wrap img {
    border-radius: 6px;
}
.case-row.quote-row {
    padding: 100px;
  border-radius: 6px;
}
.quote-text, .quote-text * {
    font-size: 26px;
  line-height: 34px;
  font-weight: 700;
}
.case-row .fakta-box {
    padding: 60px;
  border-radius: 6px;
}
.case-c2a {
    padding: 150px 0 !important;
}
.case-c2a .et_pb_row {
    max-width: 1000px !important;
}
.om-virksomheden {
    padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.1);
}

/* Rådgivning Undersider */
#sidebar, #main-content .container::before {
  display: none !important;
}
#left-area {
  width: 100% !important;
  padding-right: 0 !important;
}
.large-text, .large-text * {
  font-size: 34px;
  line-height: 39px;
  font-weight: 700;
}
.horizontal-icons img {
  width: 140px;
}
#main-content .et_pb_toggle_title {
  color: #121D2B !important;
  font-size: 20px !important;
}
#main-content .et_pb_toggle {
background: white !important;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.1) !important;
}
.et_pb_accordion .et_pb_toggle_title::before {
  content: "+" !important;
  font-family: Inter !important;
  color: #1F0AFF !important;
}

/* Andre undersider */
#main-content .terms .et_pb_row {
  padding-bottom: 80px !important;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 30px;
}
#main-content .terms .et_pb_row:last-child {
  border-bottom: none !important;
  margin-bottom: 0px;
}
.sticky {
  position: sticky;
  top: 120px;
}
.icon-row .et_pb_column {
  padding: 50px 50px 100px !important;
}
.press-row .et_pb_column:first-child {
  width: 30% !important;
}
.press-row .et_pb_column:last-child {
  width: 65% !important;
}
/* Footer */
.newsletter .container {
    text-align: center !important;
    padding: 150px 0 !important;
}
.newsletter .container h2 {
    margin-bottom: 50px !important;
}
.newsletter .mc4wp-form-fields input {
    border: 1px solid rgba(0,0,0,.1);
    padding: 15px 25px;
    padding-right: 70px;
    border-radius: 50px;
    width: 100%;
    transition: .3s ease-in-out;
}
.mc4wp-form-fields::after {
    display: block;
    content: "$";
    font-family: ETmodules !important;
    position: absolute;
    right: 25px;
  top: 13px;
    color: #1F0AFF !important;
    font-size: 20px !important;
}
.newsletter .mc4wp-form-fields input[type="submit"] {
    position: absolute;
    right: 0;
    width: 50px;
    opacity: 0;
    cursor: pointer;
}
.newsletter .mc4wp-form-fields input:focus {
    border: 1px solid rgba(0,0,0,.3);
}
.newsletter .mc4wp-form-fields {
    position: relative;
    width: 30%;
    margin: auto;
}
#footer-widgets .footer-widget li {
    padding-left: 0;
    margin-bottom: 0;
}
#main-footer .footer-widget h4 {
    letter-spacing: 1px;
    margin-bottom: 20px;
}
#footer-widgets .footer-widget li::before {
    display: none !important;
}
.footer-widget .et_pb_widget div, .footer-widget .et_pb_widget ul, .footer-widget .et_pb_widget ol, .footer-widget .et_pb_widget label {
  line-height: 1.4em;
}
#footer-widgets .textwidget {
    max-width: 75%;
}
#footer-widgets .footer-widget li a:hover {
    color: #F9CFC4 !important;
    opacity: 1 !important;
    padding-left: 5px !important;
}
#footer-widgets #text-3 a img {
    width: 25px;
}
#footer-widgets #text-3 a {
    display: inline-block;
    margin-right: 5px;
}
#footer-bottom {
    padding: 25px 0 15px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.et_pb_widget {
    float: none;
}
#footer-bottom .footer-text {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}
#footer-info {
    float: none;
    text-align: right;
}
.footer-text span {
    width: 4px;
  height: 4px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: -2px;
}
#footer-bottom .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

/* Quote portrait — 150x150 circle, cropped to center */
.quote-image .et_pb_image_wrap {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}
.quote-image .et_pb_image_wrap img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

@media only screen and (min-width: 2100px) {
    .case-content .case-row {
        max-width: 65% !important;
    }
}

/* ── Team grid ([vores-team], [raadgivere]) ────────────────────────
   One card per "team" post: 4:3 photo, white body with name/position
   and an optional phone/email/LinkedIn contact list. Card look (white
   bg, radius, shadow) matches .cases-card so it feels like the same
   card family; breakpoints match .cases-grid too.
   Flex-wrap (not CSS grid) + justify-content: center so a row that
   isn't full — e.g. [raadgivere] with only 2-3 advisors, or any
   non-multiple-of-4 count — centers itself instead of sitting flush
   left with empty column(s) on the right. Card width is set to match
   what 4 (then 2, then 1) equal columns would give at each breakpoint,
   so a full row still looks identical to the old CSS grid. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(25% - 18px);
  max-width: calc(25% - 18px);
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}
.team-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
}
.team-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card__body {
  padding: 20px;
}
.team-card__name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #121D2B;
  letter-spacing: -0.44px;
}
.team-card__position {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  color: #121D2B;
  letter-spacing: -0.15px;
}
.team-card__contact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 0 !important;
  list-style-type: none !important;
}
.team-card__contact-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #121D2B;
  text-decoration: none !important;
  transition: .3s ease-in-out !important;
  word-break: break-word;
}
.team-card__contact-item a:hover {
  color: #1F0AFF;
  padding-left: 5px !important;
}
.team-card__contact-item img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
@media (max-width: 980px) {
  .team-card {
    flex-basis: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}
@media (max-width: 600px) {
  .team-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ── Publikationer ([publikationer]) ───────────────────────────────
   One row per "udgivelser" post: year + title in column 1 (year reuses
   the shared .pre-headline look — same token as everywhere else on the
   site), ACF "beskrivelse" in column 2, and the featured image (cover) in
   column 3. Divider/text colors reuse the site's #121D2B-at-various-alpha
   convention (see .cases-empty, .team-card__contact-item etc.) rather
   than introducing a new gray. Design reference: Figma "Om os" page,
   "Publikationer" section (node 331:59). */
.publikationer {
  display: grid;
  flex-direction: column;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.publikationer__item {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  column-gap: 40px;
  row-gap: 12px;
  align-items: start;
  padding: 15px 0 150px;
  border-top: 1px solid black;
}
.publikationer__item:last-child {
  padding-bottom: 0;
}
.publikationer__heading {
  grid-column: 1;
  grid-row: 1;
}
.publikationer__year {
  display: block;
  margin-bottom: 12px;
}
.publikationer__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  color: #121D2B;
  letter-spacing: -0.44px;
}
.publikationer__description {
  grid-column: 2;
  grid-row: 1;
  margin-top: 30px;
  font-size: 15px;
  line-height: 1.6;
  color: #121D2B;
  letter-spacing: -0.15px;
}
.publikationer__description p {
  margin: 0 0 1em;
}
.publikationer__description p:last-child {
  margin-bottom: 0;
}
.publikationer__cover-wrap {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin-top: 5px;
}
.publikationer__cover {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(0,0,0,.08);
  cursor: pointer;
}
.publikationer__img {
  display: block;
  width: 100%;
  height: 100%;
  transition: .3s ease-in-out;
}
.publikationer__cover:hover .publikationer__img {
  opacity: .7;
}
.publikationer__cover-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: #1F0AFF;
  transition: .2s ease-in-out;
}
.publikationer__cover:hover .publikationer__cover-icon {
  background: #1F0AFF;
  color: white;
}
@media (max-width: 980px) {
  .publikationer__item {
    grid-template-columns: 1fr 240px;
    column-gap: 32px;
  }
  .publikationer__description {
    grid-column: 1;
    grid-row: 2;
  }
  .publikationer__cover-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
@media (max-width: 700px) {
  .publikationer__item {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 32px 0;
  }
  .publikationer__heading,
  .publikationer__description,
  .publikationer__cover-wrap {
    grid-column: 1;
    grid-row: auto;
  }
  .publikationer__cover-wrap {
    max-width: 220px;
  }
}
.et_pb_gallery.et_pb_slider {
  border-radius: 12px;
}

/* ── Publikation modal (flip-book embed, [publikationer]) ────────────
   Opened/closed by assets/publikationer.js, which drops that post's ACF
   "flip_kode" embed code straight into #publikation-flipbook. The
   dialog sizes to that content (most embed codes, like FlipHTML5's, set
   their own width/height inline) rather than a fixed viewport size, with
   max-height + overflow as a safety net on short screens. */
.publikation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.publikation-modal[hidden] {
  display: none;
}
.publikation-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,29,43,.85);
  backdrop-filter: blur(6px);
}
.publikation-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(90vw, 900px);
  max-height: 90vh;
  overflow: auto;
  padding: 40px;
  background: white;
  border-radius: 8px;
}
.publikation-modal__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18,29,43,.06);
  color: #121D2B;
  cursor: pointer;
  transition: .15s ease-in-out;
}
.publikation-modal__close:hover {
  background: #1F0AFF;
  color: white;
}
.publikation-modal__flipbook {
  width: 100%;
}
.publikation-modal__flipbook iframe {
  display: block;
  width: 100%;
  border: 0;
}
@media (max-width: 700px) {
  .publikation-modal__dialog {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    padding: 56px 16px 24px;
    border-radius: 0;
  }
}

.et_pb_row.border-top {
  padding-top: 10px;
  border-top: 1px solid black;
}
.vores-maal .et_pb_column {
  padding: 40px 40px 150px;
  border-radius: 25px;
}

/* ── Pressebilleder ([presse]) ────────────────────────────────────────
   Adapted from Osmo Supply's "Masonry Grid" resource — the column-
   balancing layout approach is kept as built there (see assets/
   presse.js, initMasonryGrid()); recolored to the site's own palette
   (#121D2B / #1F0AFF) and capped at 2 columns (1 on small screens)
   instead of the resource's default 4/3/2. */
.presse-wrap {
  padding-bottom: 4em;
}
.presse-list {
  --masonry-col: 2;
  --masonry-gap: 1.5em;
  grid-column-gap: var(--masonry-gap);
  grid-row-gap: var(--masonry-gap);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.presse-item {
  width: calc(((100% - 1px) - (var(--masonry-col) - 1) * var(--masonry-gap)) / var(--masonry-col));
}
.presse-item__visual {
  position: relative;
  border-radius: 6px;
  width: 100%;
  overflow: hidden;
  background: #121D2B;
}
.presse-item__visual-img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.presse-item__download {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: #1F0AFF;
  opacity: 0;
  translate: 0 6px;
  transition: .2s ease-in-out;
}
.presse-item__visual:hover .presse-item__download,
.presse-item__visual:focus-within .presse-item__download {
  opacity: 1;
  translate: 0 0;
}
.presse-item__download:hover {
  background: #1F0AFF;
  color: white;
}
.presse-item__download-icon {
  width: 18px;
  height: 18px;
}
.presse-item__caption, .billedetekst .et_pb_text_inner {
  margin: .5em 0 0;
  font-size: .875em;
  color: #121D2B;
}
@media screen and (max-width: 767px) {
  .presse-list {
    --masonry-col: 1;
    --masonry-gap: 1em;
  }
  /* No hover on touch — keep the download button visible outright. */
  .presse-item__download {
    opacity: 1;
    translate: 0 0;
  }
}

/* ── AM Aktører (interactive globe, [am-aktoerer]) ───────────────────
   Adapted from Osmo Supply's "Interactive Globe (Mapbox)" resource —
   layout/animation/structure kept as built there (see assets/
   am-aktoerer.js); recolored here from Osmo's neutral browns to the
   site's own palette (#121D2B / #1F0AFF / white) and Haffer Mono/XH
   swapped for the site's default font so it reads as part of this site
   rather than a dropped-in demo. .cases-toolbar/.cases-filter above the
   globe are fully reused from [cases]/[nyheder] — no new filter CSS
   needed, just assets/am-aktoerer.js wiring it up (initAktoerFilter). */
.am-aktoerer {
  display: flex;
  flex-direction: column;
}
.am-aktoerer__toolbar {
  margin-bottom: 24px;
}
/* Free-text search box next to the "Filtrer efter kategori" dropdown —
   see assets/am-aktoerer.js, initAktoerFilter(). .cases-toolbar (shared
   with [cases]/[nyheder]) is already flex + justify-content: space-between,
   so this just needs to be the 2nd flex child to land on the right. */
.am-aktoerer__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 200px;
}
.am-aktoerer__search-icon {
  position: absolute;
  left: 14px;
  display: flex;
  color: rgba(18,29,43,.4);
  pointer-events: none;
}
.am-aktoerer__search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: white;
  color: #121D2B;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease-in-out;
}
.am-aktoerer__search-input::placeholder {
  color: rgba(18,29,43,.4);
}
.am-aktoerer__search-input:focus {
  outline: none;
  border-color: #1F0AFF;
}
@media (max-width: 700px) {
  .am-aktoerer__search {
    flex-basis: 100%;
  }
}
.globe-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.globe-wrap {
  --globe-info-width: 340px;
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: clip;
  border-radius: 12px;
}
.globe-map {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.globe-info {
  z-index: 10;
  color: #fff;
  width: var(--globe-info-width);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1em;
  position: absolute;
  top: 1em;
  bottom: 1em;
  right: 1em;
  box-shadow: 0 0 12px rgba(0,0,0,.1);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
}
/* Info pane */
[data-globe-info] {
  opacity: 1;
  visibility: visible;
  transform: translate(0em, 0px);
  transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-globe-init][data-collapsed="true"] [data-globe-info] {
  opacity: 0;
  visibility: hidden;
  transform: translate(4em, 0px);
}
.globe-info__collection {
  width: 100%;
  height: 100%;
}
.globe-info__list {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: absolute;
  inset: 0%;
  overflow: hidden auto;
}
.globe-info__list-item {
  column-gap: 2em;
  row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 2em;
  display: flex;
  scroll-snap-align: start;
}
.globe-info__list-item.is-filtered-out {
  display: none;
}
.globe-info__list-item-text {
  column-gap: .5em;
  row-gap: .5em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1em;
  display: flex;
}
.globe-info__list-item-label {
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: .75em;
  padding-bottom: 0;
  letter-spacing: .5px;
}
.globe-info__list-item-h {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2;
  color: white;
}
.globe-info__list-item-link {
  color: inherit;
  text-decoration: none;
  font-size: .85em;
}
.globe-info__list-item * {
    color: white !important;
    opacity: 1 !important;
}
.globe-info__list-item-desc {
  opacity: .85;
  margin: 0 0 1em;
  font-size: .85em;
  line-height: 1.5;
}
.globe-info__list-item-address {
  opacity: .7;
  margin: 0 0 1em;
  font-size: .85em;
  line-height: 1.5;
}
/* Same structure/icon-sizing as .team-card__contact, recolored for the
   globe panel's dark background instead of the team card's light one. */
.globe-info__list-item-contact {
  margin: 0 0 1em;
  padding: 0 !important;
  list-style-type: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.globe-info__list-item-contact-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85em;
  color: #f2f2f2;
  text-decoration: none !important;
  transition: .3s ease-in-out !important;
  word-break: break-word;
}
.globe-info__list-item-contact-item a:hover {
  color: #F9CFC4;
  padding-left: 5px !important;
}
.globe-info__list-item-contact-icon {
  flex-shrink: 0;
}
.globe-close {
  z-index: 11;
  position: absolute;
  top: 1em;
  right: 1em;
}
.globe-close__button {
  color: #121D2B;
  background-color: #f2f2f2;
  border: none;
  border-radius: 100em;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.globe-close__icon {
  width: .625em;
}
.globe-nav {
  z-index: 10;
  column-gap: 1em;
  row-gap: 1em;
  color: #fff;
  bottom: 1em;
  right: calc(var(--globe-info-width)  + 2em);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding: .25em;
  display: flex;
  position: absolute;
}
/* Collapse nav to the right */
[data-globe-nav] {
  transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-globe-init][data-collapsed="true"] [data-globe-nav] {
  right: 1em;
}
.globe-nav__button {
  background-color: transparent;
  border: none;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  padding: 0;
  display: flex;
  color: inherit;
  cursor: pointer;
}
.globe-nav__button-icon {
  width: .75em;
}
.globe-nav__counter {
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: .875em;
  letter-spacing: .5px;
}
.globe-reopen {
  z-index: 12;
  color: #f2f2f2;
  background-color: #121D2B;
  border: 1px solid rgba(255,255,255,.15);
  border-right-style: none;
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
  height: 3em;
  padding: 0 .5em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.globe-reopen__icon {
  width: 1em;
}
[data-globe-reopen] {
  opacity: 0;
  visibility: hidden;
  transform: translate(2em, 0px);
  transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-globe-init][data-collapsed="true"] [data-globe-reopen] {
  opacity: 1;
  visibility: visible;
  transform: translate(0em, 0px);
}
.globe-marker {
  color: white;
  background-color: #1F0AFF;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: .625em;
  display: flex;
  position: relative;
  cursor: pointer;
}
.globe-marker__icon {
  width: 100%;
}
[data-globe-marker][data-active="true"] {
  outline: 1px solid #fff;
}
/* Cluster bubble (assets/am-aktoerer.js initMarkerClusters()) — three
   concentric layers (soft outer ring, mid ring, solid count circle) in
   one of three brand-derived colors depending on how many locations are
   grouped, roughly matching the classic "Google Maps style" cluster
   look but recolored to the site palette. */
.globe-cluster {
  --globe-cluster-color: #1F0AFF;
  width: 2.75em;
  height: 2.75em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.globe-cluster__ring {
  position: absolute;
  inset: 0;
  border-radius: 100em;
  background: var(--globe-cluster-color);
  opacity: .25;
}
.globe-cluster__ring::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 100em;
  background: var(--globe-cluster-color);
  opacity: .55;
}
.globe-cluster__count {
  position: relative;
  z-index: 1;
  width: 58%;
  height: 58%;
  border-radius: 100em;
  background: var(--globe-cluster-color);
  color: white;
  font-weight: 700;
  font-size: .8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hide marker template on site */
[data-globe-init="initialized"] [data-globe-marker-template] {
  display: none;
}
/* Style zoom in/out buttons */
.mapboxgl-ctrl-group button {
  background: #121D2B !important;
}
/* Make default zoom icons white */
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
  filter: invert(1);
}
/* Hide mapbox logo and info */
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib {
  display: none !important;
}
.mapboxgl-ctrl-group button+button {
  border-top: 1px solid rgba(255,255,255,.1);
}
@media screen and (max-width: 991px) {
  .globe-wrap {
    flex-flow: column;
    height: auto;
    display: flex;
    border-radius: 0;
  }
  .globe-map {
    aspect-ratio: 1;
    flex: none;
    height: auto;
    position: relative;
    inset: auto;
  }
  .globe-info {
    z-index: auto;
    box-shadow: none;
    border-style: solid none none;
    border-radius: 0;
    width: 100%;
    position: relative;
    inset: auto;
  }
  .globe-info__list {
    scroll-snap-type: x mandatory;
    display: flex;
    position: relative;
    inset: auto;
    overflow: auto hidden;
  }
  .globe-info__list-item {
    scroll-snap-align: center;
    border-right: 1px solid rgba(255,255,255,.1);
    flex: 0 0 80%;
    min-width: 80%;
    padding: 1.5em 1.5em 2em;
  }
  .globe-info__list-item-text {
    margin-bottom: 0;
  }
  .globe-info__list-item-h {
    font-size: 1.5em;
  }
  .globe-close {
    display: none;
  }
  .globe-nav {
    border-left-style: none;
    border-right-style: none;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.5em;
    position: relative;
    inset: auto;
  }
  .globe-reopen {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .globe-info__list-item {
    column-gap: 1em;
    row-gap: 1em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* ── Single Post (single-post.php) ──────────────────────────────────
   Design reference: Figma "Dansk AM Hub", "Single Post" frame
   (node 974:833). Full-width blue hero with the title, then a sticky
   "Seneste nyt" sidebar (latest 5 posts, current post excluded) next to
   the featured image, publish date and content. The sidebar reuses the
   site's existing .pre-headline and .sticky (top: 120px) utilities. */
.single-post-hero {
  background: #1F0AFF;
  padding: 100px 20px 90px;
  text-align: center;
}
.single-post-hero__title {
  margin: 14px auto 0;
  max-width: 900px;
  color: white;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 80px;
}
.single-post-hero .pre-headline {
  text-align: center;
  padding-top: 36px;
  padding-bottom: 15px !important;
}
.single-post-protected {
  padding: 80px 0;
}
.single-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 578fr) minmax(0, 980fr);
  gap: 64px;
  max-width: 1680px;
  margin: 0 auto;
  align-items: start;
  padding: 80px 0 100px;
}

/* Sidebar */
.single-post-sidebar {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.05);
}
.single-post-sidebar .pre-headline {
  display: block;
  margin-bottom: 20px;
}
.single-post-sidebar__list {
  display: flex;
  flex-direction: column;
}
.single-post-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-decoration: none !important;
  color: inherit !important;
}
.single-post-sidebar__item:last-child {
  padding-bottom: 4px;
  border-bottom: none;
}
.single-post-sidebar__media {
  flex-shrink: 0;
}
.single-post-sidebar__img {
  display: block;
  width: 109px;
  height: 82px;
  object-fit: cover;
  border-radius: 6px;
  background: #eee;
}
.single-post-sidebar__body {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}
.single-post-sidebar__date {
  font-size: 12px;
  color: rgba(0,0,0,.5);
}
.single-post-sidebar__title {
  margin: 0;
  letter-spacing: -.5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #121D2B;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Main column */
.single-post-main__media {
  border-radius: 12px;
  overflow: hidden;
}
.single-post-main__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.single-post-main__date {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: rgba(0,0,0,.5);
}
.single-post-main__content {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: #121D2B;
}
.single-post-main__content p {
  margin: 0;
  line-height: 22px;
}
.single-post-main__content a {
  color: #1F0AFF;
}
.single-post-main h1 strong, .single-post-main h2 strong, .single-post-main h3 strong, .single-post-main h4 strong, .single-post-main h5 strong, .single-post-main h1 strong {
  color: #181818 !important;
}
.single-post-main h2, .single-post-main h3, .single-post-main h4, .single-post-main h5 {
  margin-top: 20px;
}
.single-post-main blockquote {
  background: rgba(249,207,196,.5);
  border-radius: 12px;
  padding: 50px;
  border: none !important;
}
.single-post-main__content blockquote p {
  margin-bottom: 20px;
}
.single-post-main__content blockquote p:last-child {
  margin-bottom: 0px;
}
.other-news {
  padding: 150px 2.5%;
  border-top: 1px solid #181818;
  border-bottom: 1px solid #181818;
}
.other-news h2 {
  margin-bottom: 50px;
}

@media (max-width: 980px) {
  .single-post-hero {
    padding: 70px 20px 60px;
  }
  .single-post-hero__title {
    font-size: 30px;
  }
  .single-post-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 50px 0 70px;
  }
  .single-post-sidebar {
    order: 2;
    position: static !important;
  }
  .single-post-main {
    order: 1;
  }
}

/* ── [proces] step timeline ──────────────────────────────────────────
   Adapted from Osmo Supply's "Step-by-step Timeline" resource (see
   assets/proces.js). Structure/spacing kept as in that resource; the
   "our process" eyebrow and "How it works" heading it ships with are
   dropped here (added separately in the page builder), and every color
   is remapped from the resource's own earthy palette to this site's —
   this component is always meant to sit on the #1F0AFF blue background,
   so text is white and the "lit up" marker state reuses the same
   white-bg / blue-text look as the site's other on-blue CTAs (see
   "#top-menu > li:last-child a" above). */
.step-timeline {
  width: 100%;
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
.step-timeline__p {
  margin-bottom: 0;
  font-size: 1.125em;
  line-height: 1.4;
}
.step-timeline__wrapper {
  position: relative;
}
.step-timeline__list {
  grid-column-gap: 8em;
  grid-row-gap: 8em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}
.step-timeline__item {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.step-timeline__line {
  pointer-events: none;
  background-color: rgba(255,255,255,.2);
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5em;
}
.step-timeline__fill {
  transform-origin: 50% 0;
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.step-timeline__marker {
  color: white;
  background-color: #1F0AFF !important;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 100em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  transition: all .4s cubic-bezier(.645, .045, .355, 1);
  display: flex;
  position: relative;
}
/* Marker inside 'active' step item — the site's white-bg/blue-text
   "lit up" look, same as the header's CTA button. */
[data-step-timeline-item][data-status="active"] [data-step-timeline-marker] {
  background: #fff !important;
  color: #1F0AFF;
  border-color: white;
}
/* Marker inside 'current' step item */
[data-step-timeline-item][data-current] [data-step-timeline-marker] {
  box-shadow: 0 0 0 0.5em rgba(255,255,255,.16);
}
.step-timeline__content {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 28em;
  padding-top: .4em;
  transition: opacity .25s;
  display: flex;
}
/* Inactive state of the content wrapper */
[data-step-timeline-item] .step-timeline__content {
  opacity: 0.25;
}
/* Reached but not the current step */
[data-step-timeline-item][data-status="active"] .step-timeline__content {
  opacity: 0.5;
}
/* Current step */
[data-step-timeline-item][data-current] .step-timeline__content {
  opacity: 1;
}
.step-timeline__content-h {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  color: white;
}
@media screen and (max-width: 767px) {
  .step-timeline {
    max-width: none;
  }
  .step-timeline__list {
    grid-column-gap: 6em;
    grid-row-gap: 6em;
  }
  .step-timeline__item {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }
}

/* ── [mood] interactive collage ──────────────────────────────────────
   Adapted from Osmo Supply's "Collage Focus Card on Hover" resource
   (see assets/mood.js). Card positions/shapes and the hover animation
   are kept as in that resource. The only thing dropped is its outer
   ".demo-section" — a full-viewport demo-page wrapper, not part of the
   reusable component per the resource's own docs. That wrapper is also
   where "font-size: 1vw" lived, which is what every em-based card size/
   position below scales off of — it moves onto ".interactive-collage"
   itself instead, so the collage still scales fluidly with viewport
   width when dropped into a page-builder row instead of a demo page.
   Card corners get the site's usual 12px image radius; everything else
   is untouched. */
.interactive-collage {
  /* Everything below (this box's own size, every card's position, every
     card's own width) is in em, all resolving against this one
     font-size — so to make the whole collage bigger while keeping its
     tuned composition intact, scale THIS number, not width/height
     directly. 1.25vw = 25% bigger than the original 1vw (63.75em ->
     ~79.7em / ~80vw wide, 37em -> ~46.25em / ~46.25vw tall, aspect
     ratio unchanged). Bump it further (e.g. 1.5vw) for bigger still. */
  width: 63.75em;
  height: 37em;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25vw;
  overflow: visible;
}
#vibes {
  overflow: hidden;
}
.interactive-collage__collection {
  width: 100%;
  height: 100%;
}
.interactive-collage__list {
  width: 100%;
  height: 100%;
  position: relative;
}
.interactive-collage__item {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.interactive-collage__item.is--1 { top: 6em; }
.interactive-collage__item.is--2 { top: 17em; left: 5em; }
.interactive-collage__item.is--3 { z-index: 1; top: 14em; left: 13.5em; }
.interactive-collage__item.is--4 { left: 24em; }
.interactive-collage__item.is--5 { z-index: 3; top: auto; bottom: 0; left: 26em; }
.interactive-collage__item.is--6 { z-index: 2; top: 9em; left: 31.5em; }
.interactive-collage__item.is--7 { z-index: 1; top: 16em; left: 39em; }
.interactive-collage__item.is--8 { top: 5em; left: auto; right: 0; }
.demo-card {
  aspect-ratio: 1;
  width: 16.25em;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.demo-card.is--landscape {
  aspect-ratio: 4 / 3;
  width: 20em;
}
.demo-card.is--portrait {
  aspect-ratio: 3 / 4;
  width: 15em;
}
.cover-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 991px) {
  .interactive-collage {
    /* Same 1.25x scale-up applied to the resource's own mobile value
       (2.125vw), so desktop and mobile stay in the same proportion to
       each other as before. */
    font-size: 2.65625vw;
  }
}

.cases-grid[data-view="list"] .cases-card__title {
  font-size: 40px !important;
  max-width: 70%;
}
/* Mobile Version */
@media screen and (max-width: 1000px) {
  /* Header */
  .et_pb_svg_logo #logo {
    height: 34% !important;
  }
  .et_fixed_nav #main-header {
    position: fixed !important;
  }
  /* Mobile Menu — full-screen takeover ───────────────────────────
     Divi's own markup/behaviour is reused as-is: clicking
     ".mobile_menu_bar" already toggles ".mobile_nav" between "closed"
     and "opened" (core theme JS), and already slideDown/slideUp's
     "#mobile_menu" itself. Rather than fighting that, everything below
     just re-skins the existing states — a full-screen panel in the
     site's brand blue with white text instead of the small white
     dropdown, and its own opacity/transform transition instead of the
     default height-slide (the "!important"s on display/height/position
     override the inline styles jQuery's slideDown/slideUp keep setting,
     since our transition on ".mobile_nav.opened" already does the
     reveal). Sub-menus — previously always expanded inline — start
     collapsed and only open when their own parent item is tapped; see
     initMobileMenu() in assets/general.js for the small bit of JS
     that makes that toggle happen (Divi has no such accordion built in
     for this header style, only for the fullscreen one). */
  html.mobile-menu-open, html.mobile-menu-open body {
    overflow: hidden;
  }
  #et_mobile_nav_menu {
    position: relative;
    z-index: 1000000;
  }
  .mobile_nav {
    background: none !important;
    padding: 0 !important;
  }
  .mobile_menu_bar {
    position: relative;
    z-index: 1000000;
  }
  .mobile_menu_bar:before {
    color: #1F0AFF;
    transition: transform .35s cubic-bezier(0.625, 0.05, 0, 1), color .25s ease;
  }
  .mobile_nav.opened .mobile_menu_bar:before {
    content: "M"; /* ETmodules "close" glyph — same one Divi's own fullscreen-header toggle swaps to */
    color: #fff;
    transform: rotate(90deg);
  }
  #mobile_menu.et_mobile_menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 90px 10% 60px;
    background: #1F0AFF !important;
    border-top: none !important;
    box-shadow: none !important;
    z-index: 999999;
    overflow-y: auto;
    list-style: none !important;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-24px);
    transition: opacity .5s cubic-bezier(0.625, 0.05, 0, 1), transform .5s cubic-bezier(0.625, 0.05, 0, 1), visibility 0s linear .5s;
  }
  .mobile_nav.opened #mobile_menu.et_mobile_menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .5s cubic-bezier(0.625, 0.05, 0, 1), transform .5s cubic-bezier(0.625, 0.05, 0, 1), visibility 0s;
  }
  #mobile_menu.et_mobile_menu li {
    display: block;
    width: 100%;
    padding-left: 0 !important;
  }
  #mobile_menu.et_mobile_menu > li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s cubic-bezier(0.625, 0.05, 0, 1), transform .5s cubic-bezier(0.625, 0.05, 0, 1);
  }
  #mobile_menu.et_mobile_menu > li:last-child {
    border-bottom: none;
  }
  .mobile_nav.opened #mobile_menu.et_mobile_menu > li {
    opacity: 1;
    transform: translateY(0);
  }
  #mobile_menu.et_mobile_menu > li:nth-child(1) { transition-delay: .08s; }
  #mobile_menu.et_mobile_menu > li:nth-child(2) { transition-delay: .14s; }
  #mobile_menu.et_mobile_menu > li:nth-child(3) { transition-delay: .2s; }
  #mobile_menu.et_mobile_menu > li:nth-child(4) { transition-delay: .26s; }
  #mobile_menu.et_mobile_menu > li:nth-child(5) { transition-delay: .32s; }
  #mobile_menu.et_mobile_menu > li:nth-child(6) { transition-delay: .38s; }
  #mobile_menu.et_mobile_menu > li:nth-child(7) { transition-delay: .44s; }
  #mobile_menu.et_mobile_menu > li:nth-child(8) { transition-delay: .5s; }
  #mobile_menu.et_mobile_menu li a {
    display: inline-block;
    color: #fff !important;
    border-bottom: none !important;
    padding: 14px 0 !important;
    font-size: 20px;
    font-weight: 600;
    width: auto !important;
    background: none !important;
  }
  #mobile_menu.et_mobile_menu li.current-menu-item > a, #mobile_menu.et_mobile_menu li.current_page_ancestor > a {
    font-weight: 700;
  }
  /* Parent items — chevron indicator instead of Divi's default arrow/highlight */
  #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    position: relative;
    padding-right: 20px !important;
  }
  #mobile_menu.et_mobile_menu .menu-item-has-children > a:after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    transition: transform .35s cubic-bezier(0.625, 0.05, 0, 1);
  }
  #mobile_menu.et_mobile_menu li.mobile-submenu-open > a:after {
    transform: rotate(-135deg);
    margin-top: -1px;
  }
  /* Sub-menus — collapsed by default, expand only for the tapped parent */
  #mobile_menu.et_mobile_menu li ul {
    list-style: none !important;
    margin: 0;
    padding: 0 !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s cubic-bezier(0.625, 0.05, 0, 1), opacity .35s ease;
  }
  #mobile_menu.et_mobile_menu li.mobile-submenu-open > ul {
    max-height: 1000px;
    opacity: 1;
    padding-bottom: 40px !important;
  }
  #mobile_menu.et_mobile_menu li ul li a {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.7) !important;
    padding: 4px 0 !important;
  }

  /* Slider */
  #front .et_pb_row {
    width: 85% !important;
  }
  #front h1, .large-headline, .large-headline * {
    font-size: 30px;
    line-height: 36px;
  }

  /* Slider */
  #front .et_pb_row {
    width: 85% !important;
  }
  #front h1, .large-headline, .large-headline *, #page-container #main-content .case-header h1 {
    font-size: 30px;
    line-height: 36px;
  }

  /* Page */
  #page-container #main-content h2, .product .related h2, .et_pb_column_1_2 .et_quote_content blockquote p, .newsletter h2 {
    font-size: 26px;
    line-height: 30px;
  }
  #page-container #main-content h3, .large-text, .large-text * {
    font-size: 24px;
    line-height: 28px;
  }
  h2 span.info {
    display: none;
  }
  #produkter .et_pb_column {
    padding: 20px 20px 80px;
  }
  #samarbejde.et_pb_row {
    max-width: 90% !important;
  }
  #samarbejde .et_pb_column {
    display: block !important;
  }
  #samarbejde .et_pb_column::before {
    margin-bottom: 20px;
  }
  #samarbejde .et_pb_column:last-child {
    margin-bottom: 40px;
  }
  #innovation .et_pb_column {
    min-height: 280px;
  }
  .seneste-nyt-slide__title {
    font-size: 20px !important;
  }

  /* Rådgivning */
  .case-content .case-row {
    max-width: 90% !important;
  }
  .team-grid {
    max-width: 95%;
    margin: auto;
  }
  .checklist.checklist-large ul {
    display: block;
  }
  .checklist.checklist-large ul li::before {
    width: 30px;
    height: 30px;
  }
  .checklist.checklist-large ul li {
    padding-left: 35px;
  }
  #c2a.contact-form .c2a-tekst .et_pb_text_inner {
    text-align: center !important;
  }

  /* Cases */
  #blue-header .et_pb_row_0 {
    padding-top: 0 !important;
    padding-bottom: 50px !important;
    max-width: 90% !important;
  }
  #blue-header .et_pb_row .et_pb_text_inner {
    text-align: center !important;
  }
  #blue-header .et_pb_text_2 {
    width: 100% !important;
  }
  #blue-header .pre-headline {
    margin-bottom: 0 !important;
  }
  .cases-view-toggle {
    display: none !important;
  }
  .cases-card__title {
    line-height: 24px !important;
  }
  .case-header {
    padding: 150px 0 100px !important;
  }
  #page-container #main-content .case-header .et_pb_row_0 {
    width: 90% !important;
  }
  .sub-headline, .sub-headline * {
    font-size: 17px;
    line-height: 20px;
  }
  .case-row.quote-row {
    padding: 40px;
  }
  .quote-text, .quote-text * {
    font-size: 18px;
    line-height: 24px;
  }
  #page-container #main-content .om-virksomheden .et_pb_image {
    width: 100% !important;
  }
  .case-row .fakta-box {
    padding: 40px;
  }

  /* Byggeri */
  .icon-row .et_pb_column {
    padding: 40px !important;
  }
  #main-content .icon-row {
    --vertical-gap: 0 !important;
  }

  /* Om os */
  .et_pb_row, .container, #main-footer .footer-inner, .et-db #et-boc .et-l .et_pb_row:not([class*="et_flex_column"]), .et_pb_row:not([class*="et_flex_column"]) {
    width: 90%;
  }
  .vores-maal .et_pb_column {
    padding: 40px !important;
  }
  #page-container #main-content .vores-maal h2 {
    font-size: 20px !important;
    line-height: 24px !important;
  }
  #main-content .vores-maal {
    width: 90% !important;
  }
  #vibes {
    display: none !important;
  }

  /* Nyheder */
  .single-post-sidebar {
    display: none !important;
  }

  /* Aktører */
  .globe-info, .globe-nav {
    background: #1F0AFF !important;
  }
  .am-aktoerer, .globe-container {
    border-radius: 8px;
  overflow: hidden;
  }

  /* Publikationer */
  .publikationer__title {
    margin-bottom: 30px;
  }
  .publikationer__item {
    padding: 10px 0 80px;
  }
  .publikationer {
    display: block !important;
  }

  /* Presse */
  .press-row {
    display: block !important;
  }
  #main-content .press-row .et_pb_column {
    width: 100% !important;
    position: static !important;
  }
  #main-content .terms .et_pb_row {
    padding-right: 0 !important;
  }

  /* Newsletter Popup */
  .et_bloom .et_bloom_form_header .et_bloom_form_text p {
    font-size: 24px !important;
    line-height: 28px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  /* Footer */
  .newsletter .mc4wp-form-fields {
    width: 100%;
  }
  .newsletter .container {
    padding: 100px 0 !important;
  }
  #main-footer .footer-widget h4 {
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  #footer-widgets .textwidget {
    max-width: 100%;
  }
   #footer-widgets {
    padding: 12% 2%;
  }
  #footer-widgets .et_pb_widget {
    text-align: center;
  }
  #footer-bottom .container {
    display: block !important;
    text-align: center !important;
  }
  #footer-info {
    text-align: center !important;
    margin-top: 15px;
    padding-bottom: 0 !important;
  }
  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  #produkter .et_pb_column, #innovation .et_pb_column {
    width: 100% !important;
  }
  #produkter, #innovation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  #produkter > .et_pb_column:nth-child(3n), #innovation > .et_pb_column:nth-child(3n) {
    grid-column: 1 / -1;
  }
  #c2a {
    min-height: 50vh;
  }
  #c2a .et_pb_row {
    padding-right: 0 !important;
  }
  #c2a .c2a-tekst, #c2a .c2a-form {
    padding: 0 3.5%;
  }
  #c2a .c2a-form {
    padding: 3.5%;
  }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
  #produkter .et_pb_column {
    padding: 40px 40px 120px;
  }
  #produkter .et_pb_button_module_wrapper {
    width: calc(100% - 80px);
  }
  #samarbejde {
    max-width: 90% !important;
  }
  body {
    max-width: 100% !important;
    overflow: hidden;
  }
  .cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #c2a .c2a-tekst {
    padding: 0 2.5%;
  }
  .large-text, .large-text * {
  font-size: 34px !important;
  line-height: 39px !important;
  }
  
  /* Footer */
  .et_pb_gutters3 .footer-widget {
    width: 20% !important;
  }
  .footer-widget, .footer-widget li, .footer-widget li a, #footer-info, .footer-widget div {
    font-size: 16px !important;
    line-height: 22px !important;
  }
}