/* ============================================================
   DIVI overrides for helektriker.dk — STYLE ONLY, native structure.
   Header structure (actual): col "hel-menu" = LOGO image · last col = Menu module + 2 buttons.
   Everything scoped to .hel-header so column shuffles don't break it.
   ============================================================ */

/* ===== BODY TYPE — hand Divi's global token our design token =====
   Divi 5 defines --et_global_body_font_size: 14px on :root and styles
   `body { font-size: var(--et_global_body_font_size) }`. That rule lands after
   helektriker.css, so `body { font-size: var(--fs-body) }` there never won and every
   Divi-built page rendered body copy at Divi's 14px default instead of the intended 17px.
   Articles were unaffected — the article template sets its own size.

   Pointing Divi's variable at ours makes --fs-body the single source of truth: change the
   token in helektriker.css and the whole site follows. To resize body copy, edit --fs-body
   (brand-tokens/helektriker.css) — do NOT add a competing font-size here, and note that the
   Body Text Size field in Divi's own Theme Options is overridden by this and will appear to
   do nothing. Line-height is deliberately left on Divi's 1.7em; only the size was wrong.

   !important is required: Divi re-declares this variable on :root from an inline <style>
   that the browser loads after this file, so a plain declaration here loses the cascade. */
:root { --et_global_body_font_size: var(--fs-body) !important; }

/* ===== HEADER top bar (hel-topbar) ===== */
.hel-topbar { background:#141414 !important; padding:8px 0 !important; }
.hel-topbar .et_pb_row { padding:0 !important; max-width:1320px !important; }
.hel-topbar .et_pb_column { margin:0 !important; }
.hel-topbar, .hel-topbar .et_pb_text { color:#cfcfcf; font-family:var(--font-body); font-size:14px; line-height:1.6; }
.hel-topbar .et_pb_text { margin-bottom:0 !important; }
.hel-topbar a { color:#fff; text-decoration:none; }
.hel-topbar svg { width:15px; height:15px; vertical-align:-3px; color:var(--color-accent); }
.hel-topbar .et_pb_column:last-child .et_pb_text { text-align:right; }

/* ===== HEADER nav bar (hel-header) ===== */
.hel-header { background:#fff !important; padding:8px 0 !important; position:sticky; top:0; z-index:1000; box-shadow:0 2px 14px -8px rgba(20,20,20,.22); }
.hel-header .et_pb_row { max-width:1320px !important; width:100% !important; }
.hel-header .et_pb_image img { height:40px !important; width:auto !important; }   /* logo */
.hel-header .et_pb_menu__menu li a { font-family:var(--font-heading) !important; font-weight:500 !important; color:#1A1A1A !important; font-size:1rem !important; }
.hel-header .et_pb_menu__menu > nav > ul > li > a:hover,
.hel-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a { color:var(--color-accent) !important; }
.hel-header .et_pb_menu__menu ul.sub-menu { border-top:3px solid var(--color-accent) !important; }
.hel-header .et_pb_menu__menu ul.sub-menu li a { color:#3F3F3F !important; }
.hel-header .et_pb_button.hel-btn { padding:.72rem 1.35rem !important; border-radius:999px !important; font-family:var(--font-heading) !important; font-weight:600 !important; font-size:.95rem !important; line-height:1 !important; letter-spacing:0 !important; white-space:nowrap; transition:all .15s ease-out; }
.hel-header .et_pb_button.hel-btn:after { display:none !important; }
.hel-header .et_pb_button.hel-btn--accent { background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border:2px solid transparent !important; }
.hel-header .et_pb_button.hel-btn--accent:hover { color:#fff !important; transform:translateY(-1px); }
.hel-header .et_pb_button.hel-btn--ghost { background:transparent !important; color:#1A1A1A !important; border:2px solid var(--color-border-strong) !important; }
.hel-header .et_pb_button.hel-btn--ghost:hover { border-color:var(--color-primary) !important; color:var(--color-primary) !important; }

@media (min-width: 981px) {
  .hel-header .et_pb_row { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; }
  .hel-header .et_pb_row > .et_pb_column { margin:0 !important; padding:0 !important; }
  .hel-header .et_pb_column.hel-menu { flex:0 0 auto !important; width:auto !important; }       /* logo col */
  .hel-header .et_pb_column.et-last-child { flex:1 1 auto !important; width:auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:.7rem !important; }
  .hel-header .et_pb_column.et-last-child > .et_pb_module, .hel-header .et_pb_column.et-last-child > .et_pb_button_module_wrapper { margin:0 !important; }
  .hel-header .et_pb_column.et-last-child .et_pb_menu { flex:1 1 auto !important; }             /* nav fills, buttons right */
}
@media (max-width: 980px) {
  .hel-topbar { display:none !important; }
  .hel-header .et_pb_row { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; }
  .hel-header .et_pb_row > .et_pb_column { margin:0 !important; padding:0 !important; }
  .hel-header .et_pb_column.hel-menu { flex:0 0 auto !important; width:auto !important; }       /* logo left */
  .hel-header .et_pb_column.et-last-child { flex:1 1 auto !important; width:auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:.5rem !important; }
  .hel-header .et_pb_column.et-last-child .et_pb_button_module_wrapper:has(.hel-btn--accent) { display:none !important; }  /* hide Få et tilbud */
  .hel-header .et_pb_column.et-last-child .et_pb_button_module_wrapper:has(.hel-btn--ghost) { order:-1 !important; }       /* Ring before hamburger */
  .hel-header .et_pb_button.hel-btn--ghost { padding:.55rem .95rem !important; font-size:.88rem !important; }
  .hel-header .mobile_menu_bar:before { color:#141414 !important; }
  .hel-header .et_mobile_menu { background:#fff !important; border-top:3px solid var(--color-accent) !important; }
  .hel-header .et_mobile_menu li a { color:#1A1A1A !important; font-family:var(--font-heading) !important; font-weight:500; }
}

/* ===== GLOBAL FOOTER (hel-footer) ===== */
.hel-footer { background:radial-gradient(800px 300px at 80% 0%, rgba(234,43,43,.10), transparent 60%), #0c0c0c !important; padding:64px 0 0 !important; }
.hel-footer .et_pb_row { max-width:1320px !important; }
.hel-footer, .hel-footer .et_pb_text, .hel-footer p, .hel-footer li, .hel-footer span { color:#b8b8b8 !important; font-family:var(--font-body); }
.hel-footer a { color:#d4d4d4 !important; text-decoration:none; } .hel-footer a:hover { color:#fff !important; }
.hel-footer h1,.hel-footer h2,.hel-footer h3,.hel-footer h4 { color:#fff !important; font-family:var(--font-heading) !important; }
.hel-footer h4 { font-size:.82rem !important; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem !important; }
.hel-footer img { height:48px; width:auto; }
.hel-footer ul { list-style:none; padding:0; margin:0; } .hel-footer li { margin-bottom:.55rem; }
.hel-footer svg { width:17px; height:17px; color:var(--color-accent); vertical-align:-3px; }
.hel-footer .et_pb_button.hel-btn--accent { background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border-radius:999px !important; border:2px solid transparent !important; font-family:var(--font-heading) !important; font-weight:600 !important; padding:.72rem 1.35rem !important; }
.hel-footer .et_pb_button:after { display:none !important; }
.hel-footer-bottom { border-top:1px solid rgba(255,255,255,.1) !important; margin-top:32px !important; }
.hel-footer-bottom, .hel-footer-bottom .et_pb_text, .hel-footer-bottom span { color:#8a8a8a !important; font-size:.85rem; }
.hel-footer-bottom .et_pb_column:last-child .et_pb_text { text-align:right; }

/* Mobile dropdown: make it span the full width (was a narrow right-docked panel) */
@media (max-width: 980px) {
  .hel-header .et_pb_row, .hel-header .et_pb_column, .hel-header .et_pb_menu, .hel-header .et_mobile_nav_menu { position: static !important; }
  .hel-header .et_mobile_menu {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important;
    background:#fff !important; border-top:3px solid var(--color-accent) !important;
    box-shadow: 0 16px 34px -14px rgba(0,0,0,.3) !important; padding:.4rem 0 !important; z-index:1000 !important;
  }
  .hel-header .et_mobile_menu li a { text-align:left !important; padding:.8rem 1.25rem !important; white-space:normal !important; color:#1A1A1A !important; font-family:var(--font-heading) !important; font-weight:500 !important; }
  .hel-header .et_mobile_menu li a:hover { color:var(--color-accent) !important; }
}

/* Mobile dropdown — force FULL WIDTH (anchor to the sticky header, not the narrow menu col) */
@media (max-width: 980px) {
  .hel-header .et_pb_row, .hel-header .et_pb_column,
  .hel-header .et_pb_menu, .hel-header .et_pb_menu__wrap, .hel-header .et_pb_menu__menu,
  .hel-header .et_mobile_nav_menu, .hel-header .mobile_nav { position: static !important; }
  .hel-header { position: sticky !important; top: 0 !important; }   /* the anchor */
  .hel-header .et_mobile_menu {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important; margin: 0 !important;
    background: #fff !important; border-top: 3px solid var(--color-accent) !important;
    box-shadow: 0 16px 34px -14px rgba(0,0,0,.3) !important; z-index: 1000 !important;
  }
  .hel-header .et_mobile_menu li { width: 100% !important; text-align: left !important; }
  .hel-header .et_mobile_menu li a { display: block !important; text-align: left !important; padding: .8rem 1.25rem !important; white-space: normal !important; width: auto !important; color:#1A1A1A !important; font-family:var(--font-heading) !important; }
  .hel-header .et_mobile_menu li a:hover { color: var(--color-accent) !important; }
}

/* THE fix: neutralize the menu module's inner container (offset-parent of the dropdown) */
@media (max-width: 980px) {
  .hel-header .et_pb_menu_inner_container,
  .hel-header .mobile_nav,
  .hel-header .mobile_menu_bar { position: static !important; }
}

/* ===================== FORSIDE — HERO ===================== */
.hel-hero.et_pb_section { padding: 0 !important; }
.hel-hero .et_pb_row { max-width:1320px !important; width:100% !important; }
@media (min-width:981px){
  .hel-hero .et_pb_row { display:flex !important; align-items:center !important; gap:var(--space-8) !important; padding-top:clamp(4.5rem,7vw,7.5rem) !important; padding-bottom:clamp(4.5rem,7vw,7.5rem) !important; }
  .hel-hero .et_pb_column { margin:0 !important; width:auto !important; flex:1 1 0 !important; }
}
/* lead form = Divi Contact Form module with class hel-hero-form */
.hel-hero-form { background:#fff !important; border-radius:22px !important; padding:clamp(1.4rem,2.4vw,2.1rem) !important; box-shadow:0 50px 100px -34px rgba(0,0,0,.7) !important; }
.hel-hero-form .et_pb_contact_main_title, .hel-hero-form h1, .hel-hero-form h2, .hel-hero-form h3 { color:var(--color-heading) !important; font-family:var(--font-heading) !important; margin-top:0 !important; }
.hel-hero-form .et_pb_contact_field { padding:0 0 .8rem !important; background:transparent !important; }
.hel-hero-form input, .hel-hero-form textarea, .hel-hero-form .et_pb_contact_message { background:var(--color-surface-alt) !important; border:1px solid var(--color-border-strong) !important; border-radius:12px !important; font-family:var(--font-body) !important; color:var(--color-ink) !important; padding:.8rem .9rem !important; }
.hel-hero-form .et_pb_contact_submit, .hel-hero-form button[type=submit] { background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border-radius:999px !important; border:0 !important; font-family:var(--font-heading) !important; font-weight:600 !important; padding:.85rem 1.6rem !important; width:100% !important; }
.hel-hero-form .et_pb_contact_submit:after { display:none !important; }

/* ===================== FORSIDE — HERO (native Divi modules + classes) ===================== */
.hel-hero.et_pb_section { padding: 0 !important; }
.hel-hero .et_pb_row { max-width:1320px !important; width:100% !important; }
@media (min-width:981px){
  .hel-hero .et_pb_row { display:flex !important; align-items:center !important; gap:var(--space-8) !important; padding-top:clamp(4.5rem,7vw,7.5rem) !important; padding-bottom:clamp(4.5rem,7vw,7.5rem) !important; }
  .hel-hero .et_pb_row > .et_pb_column { margin:0 !important; flex:1 1 0 !important; width:auto !important; }
}
/* red word in the H1 (Heading module: wrap word in <em> or <span class="hel-em">) */
.hel-hero h1 em, .hel-hero .hel-em { color:var(--color-accent) !important; font-style:normal !important; }
/* gold stars in the rating Text module */
.hel-hero .hel-hero-rating .stars { color:#f5b301 !important; }
/* two CTA buttons inline (Button modules in the copy column) */
.hel-hero-copy .et_pb_button_module_wrapper { display:inline-block !important; margin:0 .6rem .8rem 0 !important; }
/* lead form = Divi Contact Form module with CSS class hel-hero-form */
.hel-hero-form { background:#fff !important; border-radius:22px !important; padding:clamp(1.4rem,2.4vw,2.1rem) !important; box-shadow:0 50px 100px -34px rgba(0,0,0,.7) !important; }
.hel-hero-form .et_pb_contact_main_title, .hel-hero-form h1, .hel-hero-form h2, .hel-hero-form h3 { color:var(--color-heading) !important; font-family:var(--font-heading) !important; margin-top:0 !important; }
.hel-hero-form .et_pb_contact_field { padding:0 0 .8rem !important; background:transparent !important; }
.hel-hero-form input, .hel-hero-form textarea, .hel-hero-form .et_pb_contact_message { background:var(--color-surface-alt) !important; border:1px solid var(--color-border-strong) !important; border-radius:12px !important; font-family:var(--font-body) !important; color:var(--color-ink) !important; padding:.8rem .9rem !important; }
.hel-hero-form .et_pb_contact_submit, .hel-hero-form button[type=submit] { background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border-radius:999px !important; border:0 !important; font-family:var(--font-heading) !important; font-weight:600 !important; padding:.85rem 1.6rem !important; width:100% !important; }
.hel-hero-form .et_pb_contact_submit:after { display:none !important; }

/* Hero: buttons inline + trust row inline (Divi Text module wraps content in .et_pb_text_inner) */
.hel-hero .et_pb_button_module_wrapper { display:inline-block !important; margin:0 .6rem .7rem 0 !important; }
.hel-hero .hel-trustrow .et_pb_text_inner { display:flex !important; flex-wrap:wrap !important; gap:1.2rem !important; align-items:center; }
.hel-hero .hel-trustrow p { margin:0 !important; }

/* Divi5 columns are flex-columns → override to block so inline-block buttons work */
@media (min-width:981px){
  .hel-hero .et_pb_column { display:block !important; }
}
.hel-hero .et_pb_button_module_wrapper { display:inline-block !important; vertical-align:top; }

/* ============ DIVI BUTTONS (global) — our .hel-btn classes over Divi defaults ============ */
.et_pb_button.hel-btn { padding:.72rem 1.5rem !important; border-radius:999px !important; font-family:var(--font-heading)!important; font-weight:600!important; font-size:1rem!important; line-height:1!important; letter-spacing:0!important; border:2px solid transparent!important; transition:all .15s ease-out; }
.et_pb_button.hel-btn:after { display:none !important; }
.et_pb_button.hel-btn--accent { background:linear-gradient(135deg,#c81e1e,#9e0a04)!important; color:#fff!important; }
.et_pb_button.hel-btn--primary { background:var(--color-primary)!important; color:#fff!important; }
.et_pb_button.hel-btn--ghost { background:transparent!important; color:var(--color-heading)!important; border-color:var(--color-border-strong)!important; }
.et_pb_button.hel-btn--light { background:#fff!important; color:var(--color-heading)!important; }
.hel-hero .et_pb_button.hel-btn--ghost, .hel-pagehero .et_pb_button.hel-btn--ghost, .is-dark .et_pb_button.hel-btn--ghost { color:#fff!important; border-color:rgba(255,255,255,.4)!important; }

/* ============ FORSIDE HERO — Divi text-module structure fixes ============ */
/* eyebrow (red rule + uppercase) */
.hel-hero .hel-eyebrow .et_pb_text_inner { display:inline-flex; align-items:center; gap:.65rem; }
.hel-hero .hel-eyebrow .et_pb_text_inner::before { content:""; width:26px; height:1.5px; background:var(--color-accent); flex:none; }
.hel-hero .hel-eyebrow p { margin:0 !important; font-family:var(--font-heading); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#ff8a8a !important; }
/* rating chip (gold stars) */
.hel-hero .hel-hero-rating .et_pb_text_inner { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:.5rem .95rem; border-radius:999px; }
.hel-hero .hel-hero-rating p { margin:0 !important; color:#d4d4d4 !important; font-size:var(--fs-small); }
.hel-hero .hel-hero-rating strong { color:#fff !important; }
/* trust row inline */
.hel-hero .hel-trustrow .et_pb_text_inner, .hel-hero .hel-trustrow .et_pb_text_inner p { display:flex !important; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; margin:0 !important; }
.hel-hero .hel-trustrow span { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-small); color:#e8e8e8; }
.hel-hero .hel-trustrow svg { color:var(--color-accent); width:18px; height:18px; flex:none; }

/* ============ FORSIDE HERO — lead form CARD on column 2 (class hel-formcard) ============ */
.hel-hero .hel-formcard { background:#fff !important; border-radius:22px !important; padding:clamp(1.4rem,2.2vw,2rem) !important; box-shadow:0 50px 100px -34px rgba(0,0,0,.7) !important; }
.hel-hero .hel-formcard .et_pb_text_inner { color:var(--color-ink); }
.hel-hero .hel-formcard h1, .hel-hero .hel-formcard h2, .hel-hero .hel-formcard h3 { color:var(--color-heading) !important; font-family:var(--font-heading) !important; margin:0 0 .2rem !important; }
.hel-hero .hel-formcard .hel-form-sub p { color:var(--color-muted) !important; margin:0 0 1rem !important; font-size:var(--fs-small); }
.hel-hero .hel-formcard .hel-form-note p { color:var(--color-muted) !important; font-size:.78rem; margin:.8rem 0 0 !important; }
.hel-hero .hel-formcard input, .hel-hero .hel-formcard textarea, .hel-hero .hel-formcard .et_pb_contact_message { background:var(--color-surface-alt) !important; border:1px solid var(--color-border-strong) !important; border-radius:12px !important; font-family:var(--font-body) !important; color:var(--color-ink) !important; padding:.8rem .9rem !important; }
.hel-hero .hel-formcard .et_pb_contact_field { padding:0 0 .7rem !important; background:transparent !important; }
.hel-hero .hel-formcard .et_pb_contact_submit, .hel-hero .hel-formcard button[type=submit] { display:block !important; width:100% !important; background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border:0 !important; border-radius:999px !important; font-family:var(--font-heading) !important; font-weight:600 !important; padding:.9rem 1.6rem !important; }
.hel-hero .hel-formcard .et_pb_contact_submit:after { display:none !important; }

/* Hero form: submit always full-width (any structure) */
.hel-hero .et_pb_contact_submit, .hel-hero .et_pb_button[type=submit], .hel-hero .et_contact_bottom_container + .et_pb_button { width:100% !important; display:block !important; float:none !important; }
.hel-hero .et_contact_bottom_container { width:100% !important; text-align:left !important; }

/* FIX hero eyebrow/rating double-styling (prototype class on module + my inner styles = duplicates) */
.hel-hero .hel-eyebrow, .hel-hero .hel-hero-rating { display:block !important; width:100% !important; background:none !important; border:0 !important; padding:0 !important; margin:0 0 .6rem !important; }
.hel-hero .hel-eyebrow::before { display:none !important; }                 /* remove duplicate dash (keep the one on .et_pb_text_inner) */
.hel-hero .hel-hero-rating::before { display:none !important; }
.hel-hero .hel-hero-rating .et_pb_text_inner { display:inline-flex !important; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:.45rem .9rem; border-radius:999px; }

/* ===== Hero top row = ONE Text module (.hel-hero-top) with .hel-eyebrow-label + .hel-rating-chip ===== */
.hel-hero .hel-hero-top .et_pb_text_inner, .hel-hero .hel-hero-top .et_pb_text_inner p { display:flex !important; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; margin:0 !important; }
.hel-hero .hel-eyebrow-label { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-heading); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#ff8a8a; }
.hel-hero .hel-eyebrow-label::before { content:""; width:26px; height:1.5px; background:var(--color-accent); display:inline-block; }
.hel-hero .hel-rating-chip { display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:.4rem .85rem; border-radius:999px; font-size:var(--fs-small); color:#d4d4d4; }
.hel-hero .hel-rating-chip strong { color:#fff; }

/* ===== HERO — vertical rhythm + mobile ===== */
.hel-hero .et_pb_column { display:block !important; }                 /* block flow so inline-block buttons work at all widths */
.hel-hero .et_pb_column:first-child > .et_pb_module:not(.et_pb_button_module_wrapper) { margin:0 0 1.2rem !important; }
.hel-hero h1 { margin:0 !important; line-height:1.08; }
.hel-hero .et_pb_column:first-child p { margin:0 !important; }
.hel-hero .hel-eyebrow { margin-bottom:.9rem !important; }
.hel-hero .hel-hero-rating { margin-bottom:1.5rem !important; }
.hel-hero .et_pb_button_module_wrapper { margin:0 .6rem 1.4rem 0 !important; }
.hel-hero .hel-trustrow { margin:.2rem 0 0 !important; }
/* mobile: form stacks under copy, comfortable padding, no overflow */
@media (max-width:980px){
  .hel-hero .et_pb_row { padding:40px 0 !important; }
  .hel-hero .et_pb_column:first-child { margin-bottom:28px !important; }
  .hel-hero .hel-formcard { padding:1.3rem !important; }
  .hel-hero .et_pb_button_module_wrapper { margin-bottom:.8rem !important; }
}

/* ===== MOBILE side padding (air around content) — was edge-to-edge ===== */
@media (max-width:980px){
  .hel-header .et_pb_row,
  .hel-hero .et_pb_row,
  .hel-pagehero .et_pb_row,
  .hel-footer .et_pb_row,
  .hel-cta-band .et_pb_row,
  .hel-section .et_pb_row { padding-left:22px !important; padding-right:22px !important; box-sizing:border-box !important; }
}

/* ===================== FORSIDE — TRUST STRIP (Blurb modules) ===================== */
.hel-trust-section { background:#fff !important; }
.hel-trust-section .et_pb_row { max-width:1320px !important; }
.hel-trust-item.et_pb_blurb { display:flex !important; align-items:center; gap:.85rem; text-align:left !important; background:#fff; border:1px solid var(--color-border); border-left:3px solid transparent; border-radius:16px; padding:1.05rem 1.15rem; height:100%; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.hel-trust-item.et_pb_blurb:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-left-color:var(--color-accent); }
.hel-trust-item .et_pb_main_blurb_image { margin:0 !important; display:flex; align-items:center; }
.hel-trust-item .et-pb-icon { width:46px !important; height:46px !important; line-height:46px !important; background:var(--color-primary); color:#fff !important; border-radius:12px; font-size:22px !important; }
.hel-trust-item .et_pb_blurb_container { padding:0 !important; text-align:left !important; }
.hel-trust-item .et_pb_module_header, .hel-trust-item h4 { font-family:var(--font-heading) !important; font-size:1.05rem !important; line-height:1.2; margin:0 !important; color:var(--color-heading) !important; }
.hel-trust-item .et_pb_blurb_description, .hel-trust-item .et_pb_blurb_description p { font-size:var(--fs-small) !important; color:var(--color-muted) !important; margin:0 !important; }
@media (max-width:980px){ .hel-trust-section .et_pb_column { margin-bottom:14px !important; } }

/* mobile: trust row stacks vertically (clean left-aligned) */
@media (max-width:980px){
  .hel-hero .hel-trustrow .et_pb_text_inner, .hel-hero .hel-trustrow .et_pb_text_inner p { flex-direction:column !important; align-items:flex-start !important; gap:.65rem !important; }
}
/* contact form: captcha + button stack; button full-width, normal size */
.hel-formcard .et_pb_contact .et_contact_bottom_container { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:.7rem !important; }
.hel-formcard .et_pb_contact_submit { width:100% !important; max-width:none !important; min-height:0 !important; padding:.85rem 1.4rem !important; font-size:1rem !important; line-height:1.15 !important; white-space:nowrap !important; }

/* FIX trust row: 3 spans live in ONE <p> with <br>s — flex the p, hide the <br> */
.hel-hero .hel-trustrow .et_pb_text_inner { display:block !important; }
.hel-hero .hel-trustrow p { display:flex !important; flex-wrap:wrap !important; gap:.8rem 1.4rem !important; align-items:center !important; margin:0 !important; }
.hel-hero .hel-trustrow br { display:none !important; }
@media (max-width:980px){
  .hel-hero .hel-trustrow p { flex-direction:column !important; align-items:flex-start !important; gap:.65rem !important; }
}

/* Trust row: keep INLINE (wrap) at all widths — override earlier mobile stack */
@media (max-width:980px){
  .hel-hero .hel-trustrow p { flex-direction:row !important; align-items:center !important; gap:.7rem 1.3rem !important; }
}

/* Hero trust row: inline on desktop; hidden on mobile (the Trust-strip section below repeats it) */
@media (max-width:980px){ .hel-hero .hel-trustrow { display:none !important; } }

/* Form submit: flush + full width (no inset from the captcha container) */
.hel-formcard .et_contact_bottom_container { padding:0 !important; margin:0 !important; }
.hel-formcard .et_pb_contact_submit { margin:0 !important; }
/* Divi button icon spacing when used on our .hel-btn (e.g. phone on Ring) */
.hel-btn.et_pb_button .et_pb_button_icon, .hel-btn.et_pb_button:before { margin-right:.4rem; }

/* Form privacy note: add the red shield icon before the text (prototype parity) */
.hel-formcard .hel-form-note p::before, .hel-formcard .hel-form-note .et_pb_text_inner::before {
  content:""; display:inline-block; width:14px; height:14px; margin-right:.45rem; vertical-align:-2px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23EA2B2B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>') no-repeat center/contain;
}

/* remove duplicate shield (keep only the one before the text) */
.hel-formcard .hel-form-note .et_pb_text_inner::before { content:none !important; display:none !important; background:none !important; }
.hel-formcard .hel-form-note p { text-align:left; }

/* ===== TRUST STRIP — Text-module tiles with OUR svg icons (consistency) ===== */
.hel-trust-section { background:#fff !important; }
.hel-trust-section .et_pb_row { max-width:1320px !important; }
.hel-trust-item.et_pb_text { background:#fff; border:1px solid var(--color-border); border-left:3px solid transparent; border-radius:16px; padding:1.05rem 1.15rem; height:100%; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.hel-trust-item.et_pb_text:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-left-color:var(--color-accent); }
.hel-trust-item .et_pb_text_inner, .hel-trust-item .et_pb_text_inner p { display:flex !important; align-items:center; gap:.85rem; margin:0 !important; }
.hel-trust-item .hel-ic { flex:none; width:46px; height:46px; border-radius:12px; background:var(--color-surface-alt); display:inline-flex; align-items:center; justify-content:center; color:var(--color-accent); }
.hel-trust-item .hel-ic svg { width:22px; height:22px; }
.hel-trust-item .hel-tt { display:flex; flex-direction:column; line-height:1.25; }
.hel-trust-item .hel-tt strong { font-family:var(--font-heading); color:var(--color-heading); font-size:1.05rem; }
.hel-trust-item .hel-tt span { font-size:var(--fs-small); color:var(--color-muted); }
@media (max-width:980px){ .hel-trust-section .et_pb_column { margin-bottom:14px !important; } }

/* Trust tiles: keep icon+text LEFT-aligned (was centering on wide mobile tiles) */
.hel-trust-item.et_pb_text { text-align:left !important; }
.hel-trust-item .et_pb_text_inner, .hel-trust-item .et_pb_text_inner p { justify-content:flex-start !important; width:100%; }
@media (max-width:980px){ .hel-trust-section .et_pb_column { margin-bottom:12px !important; } }

/* ===================== FORSIDE — SERVICES (Text-module cards, our SVGs) ===================== */
/* services-style section: shared layout, bg variants. base + -alt = grey, -main = white */
.hel-services-section, .hel-services-section-alt { background:var(--color-surface-alt) !important; }
.hel-services-section-main { background:#fff !important; }
.hel-services-section .et_pb_row, .hel-services-section-main .et_pb_row, .hel-services-section-alt .et_pb_row { max-width:1320px !important; }
.hel-card .et_pb_text_inner, .hel-card .et_pb_text_inner > p { margin:0 !important; padding:0 !important; height:100%; }
a.hel-card-link { display:flex; flex-direction:column; gap:.45rem; height:100%; background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:1.4rem; text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
a.hel-card-link:hover { transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(20,20,20,.35); border-color:transparent; }
a.hel-card-link .ic { width:48px; height:48px; border-radius:14px; background:var(--color-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:.4rem; transition:background .3s var(--ease); }
a.hel-card-link:hover .ic { background:linear-gradient(150deg,#ea2b2b,#9e0a04); }
a.hel-card-link .ic svg { width:24px; height:24px; }
a.hel-card-link .ttl { font-family:var(--font-heading); font-weight:700; font-size:1.15rem; line-height:1.2; color:var(--color-heading); }
a.hel-card-link .desc { font-size:var(--fs-small); color:var(--color-muted); }
a.hel-card-link .more { margin-top:auto; padding-top:.7rem; font-family:var(--font-heading); font-weight:600; font-size:.9rem; color:var(--color-accent-text); }
@media (max-width:980px){ .hel-services-section .et_pb_column, .hel-services-section-main .et_pb_column, .hel-services-section-alt .et_pb_column { margin-bottom:16px !important; } }

/* Remove RED hover effects (keep subtle lift only) */
.hel-trust-item.et_pb_text { border-left:1px solid var(--color-border) !important; }
.hel-trust-item.et_pb_text:hover { border-color:var(--color-border-strong) !important; border-left-color:var(--color-border-strong) !important; }
a.hel-card-link:hover .ic { background:var(--color-primary) !important; }   /* icon stays dark on hover */

/* Services: kill the outer card (prototype .hel-card on the Text module) — inner .hel-card-link is the card */
.et_pb_text.hel-card { background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; }
.et_pb_text.hel-card:hover { transform:none !important; box-shadow:none !important; }

/* ===== general EYEBROW for Text modules (any section) ===== */
.hel-eyebrow.et_pb_text { background:none !important; padding:0 !important; border:0 !important; margin:0 0 1rem !important; }
.hel-eyebrow.et_pb_text::before { display:none !important; }
.hel-eyebrow .et_pb_text_inner { display:inline-flex !important; align-items:center; gap:.6rem; }
.hel-eyebrow .et_pb_text_inner::before { content:""; width:26px; height:1.5px; background:var(--color-accent); flex:none; }
.hel-eyebrow .et_pb_text_inner p { margin:0 !important; font-family:var(--font-heading); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-text); }

/* ===== SPLIT section (image + text) ===== */
.hel-split-section { background:#fff !important; }
.hel-split-section .et_pb_row { max-width:1320px !important; }
@media (min-width:981px){
  .hel-split-section .et_pb_row { display:flex !important; align-items:center !important; gap:var(--space-8) !important; }
  .hel-split-section .et_pb_row > .et_pb_column { margin:0 !important; flex:1 1 0 !important; width:auto !important; }
}
.hel-split-section .et_pb_image img { border-radius:18px; box-shadow:var(--shadow-md); width:100%; }
.hel-split-section h2 { margin:.2rem 0 .8rem !important; }

/* ===== CHECKLIST (Text module, class hel-check) ===== */
.hel-check .et_pb_text_inner ul { list-style:none !important; padding:0 !important; margin:1rem 0 0 !important; display:grid; gap:.7rem; }
.hel-check .et_pb_text_inner li { display:flex; gap:.6rem; align-items:flex-start; color:var(--color-ink); }
.hel-check .et_pb_text_inner li svg { flex:none; width:20px; height:20px; color:var(--color-accent); margin-top:3px; }
/* checklist on a dark section (hel-process) → light text, red ticks stay + larger */
#page-container .hel-process .hel-check .et_pb_text_inner li { color:#e8e8e8 !important; font-size:1.08rem !important; line-height:1.5 !important; }
#page-container .hel-process .hel-check .et_pb_text_inner ul { gap:.9rem !important; }
#page-container .hel-process .hel-check .et_pb_text_inner li svg { width:22px; height:22px; margin-top:4px; }

/* Split section: force LEFT alignment + clean vertical rhythm */
.hel-split-section .et_pb_column, .hel-split-section .et_pb_text, .hel-split-section .et_pb_text .et_pb_text_inner, .hel-split-section .et_pb_button_module_wrapper { text-align:left !important; }
.hel-split-section .et_pb_column > .et_pb_module:not(.et_pb_button_module_wrapper) { margin:0 0 1rem !important; }
.hel-split-section h2 { margin:.2rem 0 1rem !important; }
.hel-split-section .et_pb_column p { margin:0 !important; }
.hel-split-section .hel-eyebrow.et_pb_text { margin-bottom:.9rem !important; }
.hel-split-section .hel-check.et_pb_text { margin-top:.2rem !important; }
.hel-split-section .et_pb_button_module_wrapper { margin-top:1.5rem !important; }

/* Split section: FORCE left alignment (high specificity) + column top-align */
.hel-split-section .et_pb_row > .et_pb_column { align-items:flex-start !important; }
.hel-split-section .et_pb_column .et_pb_text,
.hel-split-section .et_pb_column .et_pb_text .et_pb_text_inner { text-align:left !important; }
.hel-split-section .et_pb_column .et_pb_text.hel-eyebrow,
.hel-split-section .et_pb_column .et_pb_text.hel-eyebrow .et_pb_text_inner { justify-content:flex-start !important; }
.hel-split-section .et_pb_column .et_pb_button_module_wrapper { text-align:left !important; align-self:flex-start !important; }
.hel-split-section .et_pb_column .et_pb_button { margin-left:0 !important; float:none !important; }

/* Divi5 modules are flex (et_flex_module) → align via justify-content, not text-align */
.hel-split-section .et_pb_column .et_pb_module,
.hel-split-section .et_pb_column .et_pb_text,
.hel-split-section .et_pb_column .et_pb_button_module_wrapper { justify-content:flex-start !important; align-items:flex-start !important; }
.hel-split-section .et_pb_column .hel-eyebrow .et_pb_text_inner { justify-content:flex-start !important; }

/* Split section spacing: kill Divi column flex-gap, set tight module rhythm (#page-container = beats Divi specificity) */
#page-container .hel-split-section .et_pb_row > .et_pb_column { gap:0 !important; row-gap:0 !important; }
#page-container .hel-split-section .et_pb_column > .et_pb_module { margin-top:0 !important; margin-bottom:16px !important; }
#page-container .hel-split-section .et_pb_column h2 { margin:0 0 .4rem !important; }
#page-container .hel-split-section .et_pb_column .hel-check.et_pb_text { margin-top:0 !important; }
#page-container .hel-split-section .et_pb_column .et_pb_button_module_wrapper { margin-top:1.3rem !important; margin-bottom:0 !important; }

/* Split section: force eyebrow left on all breakpoints (desktop was inheriting right) */
#page-container .hel-split-section .et_pb_column .hel-eyebrow,
#page-container .hel-split-section .et_pb_column .hel-eyebrow .et_pb_text_inner,
#page-container .hel-split-section .et_pb_column .hel-eyebrow .et_pb_text_inner > * { text-align:left !important; justify-content:flex-start !important; }

/* === CORRECTED split spacing: .hel-split-section IS the row; columns are direct children w/ flex gap:30px === */
#page-container .hel-split-section { align-items:center !important; }
#page-container .hel-split-section > .et_pb_column { gap:0 !important; row-gap:0 !important; }
#page-container .hel-split-section > .et_pb_column > .et_pb_module { margin-top:0 !important; margin-bottom:14px !important; }
#page-container .hel-split-section > .et_pb_column > .et_pb_text:first-child { margin-bottom:10px !important; } /* eyebrow tight to H2 */
#page-container .hel-split-section > .et_pb_column > .et_pb_button_module_wrapper { margin-top:12px !important; margin-bottom:0 !important; }
/* eyebrow + all text left on every breakpoint */
#page-container .hel-split-section .et_pb_column .et_pb_text,
#page-container .hel-split-section .et_pb_column .et_pb_text .et_pb_text_inner,
#page-container .hel-split-section .et_pb_column .et_pb_text .et_pb_text_inner > * { text-align:left !important; }

/* Split section: larger image on desktop */
@media (min-width:981px){
  #page-container .hel-split-section > .et_pb_column:first-child { flex:1.12 1 0 !important; }
  #page-container .hel-split-section .et_pb_image,
  #page-container .hel-split-section .et_pb_image img { width:100% !important; }
  #page-container .hel-split-section .et_pb_image img { min-height:400px !important; object-fit:cover !important; }
}

/* === Split section width to 1320 (mirrors hero: normalize BOTH columns to flex so width:100% can't unbalance them) === */
#page-container .hel-split-section { max-width:1320px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; }
@media (min-width:981px){
  #page-container .hel-split-section { display:flex !important; align-items:center !important; column-gap:48px !important; }
  #page-container .hel-split-section > .et_pb_column { margin:0 !important; width:auto !important; }
  #page-container .hel-split-section > .et_pb_column:first-child { flex:1.1 1 0 !important; }
  #page-container .hel-split-section > .et_pb_column:last-child  { flex:1 1 0 !important; }
}

/* Split section: restore mobile side gutter (width:100% removed it); match hero's 22px */
@media (max-width:980px){
  #page-container .hel-split-section { padding-left:22px !important; padding-right:22px !important; }
}

/* ===== Forside: Process "Sådan foregår det" (dark band) ===== */
#page-container .hel-process { background:var(--color-primary) !important; padding-top:5.5rem !important; padding-bottom:5.5rem !important; }
#page-container .hel-process .et_pb_text, #page-container .hel-process h2, #page-container .hel-process h3, #page-container .hel-process h4 { color:#fff !important; }
#page-container .hel-process h2 { margin:0 0 .6rem !important; }
#page-container .hel-process .hel-lead .et_pb_text_inner, #page-container .hel-process .hel-lead p { color:#cfcfcf !important; font-size:var(--fs-body-lg) !important; margin:0 !important; }
@media (max-width:980px){ #page-container .hel-process { padding-top:3.5rem !important; padding-bottom:3.5rem !important; } }
/* step: MANUAL number (type 01/02/03/04 in a <span class="hel-step-num">) + title + text */
#page-container .hel-step { background:transparent !important; }
#page-container .hel-step .hel-step-num { display:block; font-family:var(--font-heading); font-weight:700; font-size:2.6rem; line-height:1; color:var(--color-accent); -webkit-text-stroke:1px var(--color-accent); -webkit-text-fill-color:transparent; margin:0 0 .7rem; }
#page-container .hel-step h3 { font-size:1.1rem !important; margin:0 0 .4rem !important; color:#fff !important; }
#page-container .hel-step p { font-size:var(--fs-small) !important; color:#bdbdbd !important; margin:0 !important; }

/* ===== Forside: Områder (area pills) ===== */
/* generic light-section lead (dark .hel-process .hel-lead rule above wins via higher specificity) */
#page-container .hel-lead .et_pb_text_inner, #page-container .hel-lead p { color:var(--color-muted) !important; font-size:var(--fs-body-lg) !important; margin:0 !important; }
#page-container .hel-pills .et_pb_text_inner { display:flex !important; flex-wrap:wrap !important; gap:.7rem !important; }
#page-container .hel-pills a.hel-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); font-family:var(--font-heading); font-weight:600; font-size:.95rem; color:var(--color-heading); background:#fff; text-decoration:none; transition:all var(--transition-ui); }
#page-container .hel-pills a.hel-pill:hover { border-color:var(--color-accent); color:var(--color-accent-text); transform:translateY(-1px); }
#page-container .hel-pills a.hel-pill svg { width:16px; height:16px; color:var(--color-accent); flex:none; }

/* Kill the prototype's auto-counter ::before on .hel-step (we use manual <span class="hel-step-num">) */
#page-container .hel-step::before { content:none !important; display:none !important; counter-increment:none !important; }
#page-container .hel-step { padding-top:0 !important; }

/* Pills: wpautop wraps all <a> in one <p> with <br> between → flex the <p> and drop the <br> */
#page-container .hel-pills .et_pb_text_inner, #page-container .hel-pills .et_pb_text_inner p { display:flex !important; flex-wrap:wrap !important; gap:.7rem !important; align-items:center; margin:0 !important; }
#page-container .hel-pills br { display:none !important; }

/* ===== Forside: Anmeldelser (reviews) — all content lives in editable Divi Text modules ===== */
#page-container .hel-reviews-section { background:var(--color-surface-alt) !important; --g-mark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M22.56%2012.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06%205.06%200%200%201-2.2%203.32v2.77h3.57c2.08-1.92%203.27-4.74%203.27-8.1z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M12%2023c2.97%200%205.46-.98%207.28-2.66l-3.57-2.77c-.98.66-2.23%201.06-3.71%201.06-2.86%200-5.29-1.93-6.16-4.53H2.18v2.84A11%2011%200%200%200%2012%2023z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M5.84%2014.1a6.6%206.6%200%200%201%200-4.2V7.06H2.18a11%2011%200%200%200%200%209.88l3.66-2.84z%22%2F%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M12%205.38c1.62%200%203.06.56%204.21%201.64l3.15-3.15C17.45%202.09%2014.97%201%2012%201%207.7%201%203.99%203.47%202.18%207.06l3.66%202.84C6.71%207.31%209.14%205.38%2012%205.38z%22%2F%3E%3C%2Fsvg%3E"); }

/* LEFT = dark summary panel (CSS class on the COLUMN: hel-reviews-summary) */
#page-container .hel-reviews-summary { background:linear-gradient(165deg,#1c1c1c,#0d0d0d) !important; border-radius:var(--radius) !important; padding:var(--space-6) !important; position:relative; overflow:hidden; }
#page-container .hel-reviews-summary::after { content:""; position:absolute; inset:auto -20% -30% auto; width:70%; height:70%; background:radial-gradient(circle, rgba(234,43,43,.40), transparent 70%); filter:blur(30px); pointer-events:none; }
#page-container .hel-reviews-summary > .et_pb_module { position:relative; z-index:1; }
#page-container .hel-reviews-summary .et_pb_text, #page-container .hel-reviews-summary .et_pb_text p { color:#cfcfcf !important; }
#page-container .hel-reviews-summary .hel-eyebrow .et_pb_text_inner p { color:#ff8a8a !important; }
/* rating block (Text module class hel-rating-big) */
#page-container .hel-rating-big .et_pb_text_inner { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:1rem; row-gap:.15rem; }
#page-container .hel-rating-big .num { grid-row:span 2; font-family:var(--font-heading); font-weight:800; font-size:4.2rem; line-height:1; letter-spacing:-.03em; color:#fff !important; }
#page-container .hel-rating-big .stars { color:#f5b301 !important; font-size:1.25rem; letter-spacing:2px; align-self:end; }
#page-container .hel-rating-big .src { color:#cfcfcf !important; font-size:var(--fs-small); align-self:start; display:inline-flex; align-items:center; gap:.4rem; }
#page-container .hel-rating-big .src::before { content:""; width:16px; height:16px; flex:none; background:var(--g-mark) center/contain no-repeat; }

/* RIGHT = review list. Each review = one Text module (CSS class hel-review) — duplicate to add more */
#page-container .hel-review { background:#fff !important; border:1px solid var(--color-border) !important; border-radius:var(--radius) !important; padding:var(--space-5) !important; margin:0 0 var(--space-4) !important; position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
#page-container .hel-review:hover { transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(20,20,20,.32); }
#page-container .hel-review .et_pb_text_inner { display:grid; gap:.6rem; }
#page-container .hel-review .et_pb_text_inner > p { margin:0 !important; }
#page-container .hel-review-head { display:flex; align-items:center; gap:.8rem; }
#page-container .hel-review-head::after { content:""; margin-left:auto; width:22px; height:22px; flex:none; background:var(--g-mark) center/contain no-repeat; }
#page-container .hel-review .hel-avatar { width:46px; height:46px; border-radius:999px; display:grid; place-items:center; color:#fff !important; font-family:var(--font-heading); font-weight:700; font-size:1rem; flex:none; background:linear-gradient(135deg,#ea2b2b,#9e0a04); }
#page-container .hel-review .hel-who strong { display:block; font-family:var(--font-heading); color:var(--color-heading) !important; font-size:1rem; line-height:1.2; }
#page-container .hel-review .hel-who em { font-style:normal; font-size:var(--fs-small); color:var(--color-muted) !important; }
#page-container .hel-review .stars { color:#f5b301 !important; letter-spacing:1px; }
#page-container .hel-review blockquote { margin:0 !important; color:var(--color-ink) !important; font-size:1.05rem; }
@media (max-width:980px){ #page-container .hel-reviews-summary { margin-bottom:var(--space-5) !important; } }

/* Reviews fixes: wpautop wraps rating spans in one <p> → make the <p> the grid + hide <br>; kill Divi's default blockquote border/padding */
#page-container .hel-rating-big .et_pb_text_inner > p { display:grid !important; grid-template-columns:auto 1fr; align-items:center; column-gap:1rem; row-gap:.15rem; margin:0 !important; }
#page-container .hel-rating-big br { display:none !important; }
#page-container .hel-review blockquote { border:0 !important; border-left:0 !important; padding:0 !important; background:none !important; font-style:normal !important; }

/* Reviews: stop the summary column stretching to full row height (Divi flex align-items:stretch) → hug content, top-aligned like prototype */
#page-container .hel-reviews-summary { align-self:flex-start !important; }
@media (min-width:981px){ #page-container .hel-reviews-summary { position:sticky !important; top:100px !important; } }

/* Reviews — force left-align in summary (beats any per-module center / stale cache) + fix mobile overlap */
#page-container .hel-reviews-summary .et_pb_text,
#page-container .hel-reviews-summary .et_pb_text .et_pb_text_inner,
#page-container .hel-reviews-summary .et_pb_text .et_pb_text_inner > * { text-align:left !important; }
#page-container .hel-reviews-summary .et_pb_button_module_wrapper { text-align:left !important; }
#page-container .hel-reviews-summary .et_pb_button { float:none !important; margin-left:0 !important; }
@media (max-width:980px){
  #page-container .hel-reviews-summary { align-self:auto !important; position:relative !important; top:auto !important; margin-bottom:var(--space-5) !important; }
}

/* Reviews summary: modules are flex (Divi alignment=center) → force justify-content left so eyebrow/button sit left */
#page-container .hel-reviews-summary .et_pb_module,
#page-container .hel-reviews-summary .et_pb_text,
#page-container .hel-reviews-summary .et_pb_button_module_wrapper { justify-content:flex-start !important; }
#page-container .hel-reviews-summary .hel-eyebrow .et_pb_text_inner { justify-content:flex-start !important; }

/* Reviews eyebrow: it's centered by auto-margins on a flex module → force block flow, inner margin 0, left */
#page-container .hel-reviews-summary .hel-eyebrow.et_pb_text { display:block !important; text-align:left !important; }
#page-container .hel-reviews-summary .hel-eyebrow .et_pb_text_inner { display:inline-flex !important; margin:0 !important; }
#page-container .hel-reviews-summary .et_pb_button_module_wrapper { display:block !important; text-align:left !important; }

/* ===== Forside: FAQ (native <details> accordion in one Text module class hel-faq) ===== */
#page-container .hel-faq { max-width:820px; }
#page-container .hel-faq details { border-bottom:1px solid var(--color-border) !important; padding:1.1rem 0 !important; }
#page-container .hel-faq summary { cursor:pointer; font-family:var(--font-heading); font-weight:600; color:var(--color-heading) !important; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
#page-container .hel-faq summary::-webkit-details-marker { display:none; }
#page-container .hel-faq summary::after { content:"+"; color:var(--color-accent); font-size:1.5rem; line-height:1; flex:none; }
#page-container .hel-faq details[open] summary::after { content:"\2013"; }
#page-container .hel-faq details p { margin:.8rem 0 0 !important; color:var(--color-muted) !important; }

/* ===== PERMANENT global eyebrow fix — every .hel-eyebrow left-aligned (was centered per-section by Divi flex auto-margins) ===== */
#page-container .hel-eyebrow.et_pb_text { display:block !important; text-align:left !important; }
#page-container .hel-eyebrow .et_pb_text_inner { margin:0 !important; }

/* ===== Divi Accordion module styled as prototype FAQ (add CSS class hel-faq to the Accordion module) ===== */
#page-container .hel-faq.et_pb_accordion, #page-container .hel-faq .et_pb_toggle { background:transparent !important; border:0 !important; box-shadow:none !important; }
#page-container .hel-faq .et_pb_toggle { border-bottom:1px solid var(--color-border) !important; padding:1.1rem 0 !important; margin:0 !important; }
#page-container .hel-faq .et_pb_toggle_title { font-family:var(--font-heading) !important; font-weight:600 !important; color:var(--color-heading) !important; font-size:1.05rem !important; line-height:1.4 !important; padding:0 34px 0 0 !important; margin:0 !important; position:relative !important; cursor:pointer; }
#page-container .hel-faq .et_pb_toggle_title:before { display:none !important; }   /* hide Divi's default circle icon */
#page-container .hel-faq .et_pb_toggle_title:after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--color-accent); font-size:1.6rem; line-height:1; font-weight:400; }
#page-container .hel-faq .et_pb_toggle_open .et_pb_toggle_title:after { content:"\2013"; }
#page-container .hel-faq .et_pb_toggle_content { padding:0 !important; margin:.8rem 0 0 !important; color:var(--color-muted) !important; }
#page-container .hel-faq .et_pb_toggle_content p { margin:0 !important; color:var(--color-muted) !important; }

/* ===== GLOBAL content spacing — tighten Divi 5 default flex gaps (60px between rows, 30px between modules) for ALL page-content sections. Scoped to .et-l--post so header/footer are untouched. ===== */
#page-container .et-l--post .et_pb_section { row-gap:32px !important; }
#page-container .et-l--post .et_pb_column { row-gap:14px !important; }
/* split section deliberately uses 0 (it spaces via module margins) — keep it */
#page-container .et-l--post .hel-split-section > .et_pb_column { row-gap:0 !important; }

/* ===== FAQ single-column → centered head + centered/constrained accordion (questions stay left) ===== */
#page-container .hel-faq-section .et_pb_text,
#page-container .hel-faq-section .et_pb_text .et_pb_text_inner { text-align:center !important; }
#page-container .hel-faq-section .hel-eyebrow.et_pb_text { text-align:center !important; }
#page-container .hel-faq-section .hel-eyebrow .et_pb_text_inner { display:inline-flex !important; justify-content:center !important; }
#page-container .hel-faq-section .hel-faq { max-width:780px !important; margin-left:auto !important; margin-right:auto !important; }
/* keep the Q&A text left-aligned inside each accordion item */
#page-container .hel-faq .et_pb_toggle_title, #page-container .hel-faq .et_pb_toggle_content, #page-container .hel-faq .et_pb_toggle_content p { text-align:left !important; }

/* FAQ accordion: constant (non-shrinking) wider width — block layout fills the constrained box */
#page-container .hel-faq-section .hel-faq.et_pb_accordion { display:block !important; width:100% !important; max-width:920px !important; margin-left:auto !important; margin-right:auto !important; }
#page-container .hel-faq-section .hel-faq .et_pb_toggle { width:auto !important; }

/* ===== Forside: CTA band (red gradient, heading left + 2 buttons right) ===== */
#page-container .hel-cta-band { background:linear-gradient(120deg,#d11414,#ea2b2b 55%,#9e0a04) !important; position:relative; overflow:hidden; padding-top:3.4rem !important; padding-bottom:3.4rem !important; }
#page-container .hel-cta-band::after { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% -20%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; }
#page-container .hel-cta-band > .et_pb_row { position:relative; z-index:1; }
#page-container .hel-cta-band h2 { color:#fff !important; margin:0 !important; }
#page-container .hel-cta-band .et_pb_text, #page-container .hel-cta-band .et_pb_text p { color:#ffe3e1 !important; margin:.3rem 0 0 !important; }
/* desktop: vertically center the two columns */
@media (min-width:981px){ #page-container .hel-cta-band > .et_pb_row { display:flex !important; align-items:center !important; } }
/* actions column → buttons in a right-aligned row */
#page-container .hel-cta-band .hel-cta-actions.et_pb_column { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-end !important; align-items:center !important; column-gap:.8rem !important; row-gap:.8rem !important; }
#page-container .hel-cta-band .hel-cta-actions .et_pb_button_module_wrapper { margin:0 !important; }
/* CTA button colours */
#page-container .hel-cta-band .et_pb_button.hel-btn--primary { background:#fff !important; color:#bc0c06 !important; border-color:#fff !important; }
#page-container .hel-cta-band .et_pb_button.hel-btn--primary:hover { background:#141414 !important; color:#fff !important; border-color:#141414 !important; }
#page-container .hel-cta-band .et_pb_button.hel-btn--ghost { background:transparent !important; border-color:rgba(255,255,255,.6) !important; color:#fff !important; }
#page-container .hel-cta-band .et_pb_button.hel-btn--ghost:hover { background:rgba(255,255,255,.12) !important; border-color:#fff !important; }
/* mobile: stack, buttons full width left */
@media (max-width:980px){
  #page-container .hel-cta-band .hel-cta-actions.et_pb_column { justify-content:flex-start !important; }
  #page-container .hel-cta-band .hel-cta-actions .et_pb_button { flex:1 1 auto !important; text-align:center !important; }
}

/* CTA fixes: tight heading→subtitle (no column gap on the text col) + readable subtitle size */
#page-container .hel-cta-band .et_pb_column:not(.hel-cta-actions) { row-gap:0 !important; }
#page-container .hel-cta-band .et_pb_text, #page-container .hel-cta-band .et_pb_text p { font-size:1.05rem !important; line-height:1.6 !important; }

/* Reviews summary fixes: rating block flush-left (flex module was centering its grid inner) + tighten eyebrow→5,0 gap */
#page-container .hel-reviews-summary .hel-rating-big.et_pb_text { justify-content:flex-start !important; margin-top:0 !important; }
#page-container .hel-reviews-summary .hel-eyebrow.et_pb_text { margin-bottom:0 !important; }

/* Reviews rating: flex-column module centers its grid inner via align-items → force left */
#page-container .hel-reviews-summary .hel-rating-big.et_pb_text { align-items:flex-start !important; }

/* ============================================================
   SERVICE PAGE TEMPLATE (Elinstallationer = template for all 8)
   ============================================================ */
/* --- Page hero: dark, bg image set on the Divi Section --- */
#page-container .hel-pagehero { position:relative !important; overflow:hidden !important; isolation:isolate; color:#fff; background-color:#0d0d0d !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; padding-top:clamp(4.5rem,7vw,7.5rem) !important; padding-bottom:clamp(4.5rem,7vw,7.5rem) !important; }
#page-container .hel-pagehero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(900px 520px at 82% 12%, rgba(234,43,43,.30), transparent 60%), linear-gradient(110deg, rgba(12,12,12,.93) 36%, rgba(12,12,12,.72) 70%, rgba(12,12,12,.50)); }
/* Variant til holdbilleder. Standard-overlayet er 93% sort hen over venstre
   tredjedel, hvilket er rigtigt naar motivet er én person i hoejre side, men
   forkert naar motivet er hele holdet: paa /om-os/ forsvandt halvdelen af
   medarbejderne i det sorte felt. Her daempes billedet jaevnt i stedet, saa alle
   er synlige, med lidt ekstra maerke i venstre side hvor overskriften staar.
   Saettes paa sektionen ved siden af hel-pagehero. */
#page-container .hel-pagehero--hold::after { background:linear-gradient(110deg, rgba(12,12,12,.72) 0%, rgba(12,12,12,.50) 45%, rgba(12,12,12,.50) 100%); }
#page-container .hel-pagehero--hold h1 { text-shadow:0 2px 20px rgba(0,0,0,.45); }
/* Forankres lavere end midten. Hero-baandet er 2,08:1 ved 1440 px, hvor billedet
   passer praecist og denne vaerdi derfor ikke goer noget. Paa en ultrawide bliver
   baandet ca. 5:1, og saa beskaerer cover toppen og bunden vaek: med center blev
   holdet skaaret over ved knaeene og der var kun bygning tilbage. 72% holder
   holdet i billedet hele vejen op i bredden. */
#page-container .hel-pagehero--hold { background-position:center 72% !important; }

#page-container .hel-pagehero > .et_pb_row { position:relative !important; z-index:1 !important; }
#page-container .hel-pagehero h1 { color:#fff !important; max-width:22ch; margin:.3rem 0 .6rem !important; }
#page-container .hel-pagehero .et_pb_text, #page-container .hel-pagehero p { color:#d4d4d4 !important; }
#page-container .hel-pagehero p { font-size:var(--fs-body-lg) !important; max-width:60ch; }
#page-container .hel-pagehero .hel-eyebrow .et_pb_text_inner p { color:#ff8a8a !important; }

/* H2 used as a subheading/deck — subtitle-sized (not full H2). Put the class on a Text module whose content is <h2>…</h2>.
   -white for dark backgrounds (hero), -black for light backgrounds. */
#page-container .hel-h2-subheading-white h2,
#page-container .hel-h2-subheading-black h2 {
  font-size:clamp(1.15rem,2.2vw,1.45rem) !important; font-weight:500 !important; line-height:1.35 !important;
  margin:.1rem 0 1rem !important; max-width:48ch;
}
#page-container .hel-h2-subheading-white h2 { color:#ededed !important; }
#page-container .hel-h2-subheading-black h2 { color:var(--color-muted) !important; }
/* breadcrumb */
#page-container .hel-breadcrumb .et_pb_text_inner, #page-container .hel-breadcrumb .et_pb_text_inner p { color:#bdbdbd !important; font-size:var(--fs-small) !important; margin:0 !important; }
#page-container .hel-breadcrumb a { color:#bdbdbd !important; text-decoration:none; }
#page-container .hel-breadcrumb a:hover { color:#ff8a8a !important; }

/* --- Content + sticky sidebar (2-col; class on the ROW) --- */
@media (min-width:981px){
  #page-container .hel-content { display:flex !important; align-items:flex-start !important; column-gap:var(--space-8) !important; }
  #page-container .hel-content > .et_pb_column:first-child { flex:1 1 auto !important; width:auto !important; margin:0 !important; }
  #page-container .hel-content > .et_pb_column:last-child  { flex:0 0 340px !important; width:340px !important; margin:0 !important; position:sticky !important; top:92px !important; align-self:flex-start !important; }
}
/* prose (one or more Text modules in the left column) */
#page-container .hel-prose h2 { margin:2rem 0 .6rem !important; }
#page-container .hel-prose .et_pb_text_inner > h2:first-child { margin-top:0 !important; }
#page-container .hel-prose ul { padding-left:1.15rem !important; margin:.6rem 0 1.2rem !important; }
#page-container .hel-prose li { margin-bottom:.45rem !important; }

/* --- Sidebar cards (each = one Text module with class hel-aside-card [is-dark]) --- */
#page-container .hel-aside-card { background:var(--color-surface-alt) !important; border:1px solid var(--color-border) !important; border-radius:var(--radius) !important; padding:var(--space-5) !important; }
#page-container .hel-aside-card.is-dark { background:var(--color-primary) !important; border:0 !important; }
#page-container .hel-aside-card h3 { margin:0 0 .5rem !important; }
#page-container .hel-aside-card.is-dark, #page-container .hel-aside-card.is-dark h3, #page-container .hel-aside-card.is-dark .et_pb_text_inner, #page-container .hel-aside-card.is-dark p { color:#fff !important; }
#page-container .hel-aside-card.is-dark p { color:#cfcfcf !important; }
#page-container .hel-aside-phone { font-family:var(--font-mono) !important; font-variant-numeric:tabular-nums; font-size:1.5rem !important; font-weight:700 !important; color:#fff !important; display:inline-flex !important; align-items:center; gap:.5rem; text-decoration:none; margin:.4rem 0; }
#page-container .hel-aside-phone svg { width:20px; height:20px; }
#page-container .hel-aside-card .hel-check { list-style:none !important; padding:0 !important; margin:.3rem 0 0 !important; }
#page-container .hel-aside-card .hel-check li { display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.5rem; color:var(--color-ink); }
#page-container .hel-aside-card .hel-check svg { flex:none; width:20px; height:20px; color:var(--color-accent); margin-top:2px; }

/* ===== Service hero fixes + UNIFIED eyebrow (strong specificity beats section-level p rules) ===== */
#page-container .hel-eyebrow .et_pb_text_inner p { font-family:var(--font-heading) !important; font-size:.78rem !important; font-weight:600 !important; letter-spacing:.2em !important; text-transform:uppercase !important; line-height:1.5 !important; margin:0 !important; }
/* pagehero: block column so the 2 buttons sit side-by-side (mirror forside hero) */
#page-container .hel-pagehero .et_pb_column { display:block !important; }
#page-container .hel-pagehero .et_pb_column > .et_pb_module:not(.et_pb_button_module_wrapper) { margin:0 0 .85rem !important; }
#page-container .hel-pagehero .et_pb_button_module_wrapper { display:inline-block !important; margin:.5rem .6rem 0 0 !important; }
/* Divi Breadcrumb module (light on dark) */
#page-container .hel-breadcrumb, #page-container .hel-breadcrumb span, #page-container .hel-breadcrumb a, #page-container .hel-breadcrumb .et_pb_breadcrumbs { color:#bdbdbd !important; font-size:var(--fs-small) !important; }
#page-container .hel-breadcrumb a:hover { color:#ff8a8a !important; }

/* Service page "Hvad vi hjælper med" → non-link info cards (same look as hel-card-link, no lift/more) */
#page-container .hel-svc-card { display:flex; flex-direction:column; gap:.35rem; height:100%; background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:1.4rem; }
#page-container .hel-svc-card .ic { width:48px; height:48px; border-radius:14px; background:var(--color-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:.4rem; }
#page-container .hel-svc-card .ic svg { width:24px; height:24px; }
#page-container .hel-svc-card h3 { font-family:var(--font-heading); font-weight:700; font-size:1.1rem; line-height:1.25; color:var(--color-heading); margin:0; }
#page-container .hel-svc-card p { font-size:var(--fs-small); color:var(--color-muted); margin:0; }

/* Utility: light-grey alt section background (rhythm) — add CSS Class hel-bg-alt to a Section */
#page-container .hel-bg-alt { background:var(--color-surface-alt) !important; }
/* split-section on a grey (hel-bg-alt) section → drop the split's white bg so the grey shows through */
#page-container .hel-bg-alt .hel-split-section { background:transparent !important; }

/* hel-svc-card → match prototype .hel-card (spacing + hover) + equal height across the row */
#page-container .hel-svc-card { gap:.5rem !important; padding:var(--space-5) !important; transition:transform var(--transition-ui), box-shadow var(--transition-ui), border-color var(--transition-ui); }
#page-container .hel-svc-card .ic { margin-bottom:.6rem !important; transition:background var(--transition-ui); }
#page-container .hel-svc-card h3 { font-size:1.15rem !important; }
#page-container .hel-svc-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong) !important; }
#page-container .hel-svc-card:hover .ic { background:var(--color-accent); }
/* equal height: module + inner fill the stretched Divi column */
#page-container .et_pb_text:has(.hel-svc-card) { height:100% !important; }
#page-container .et_pb_text:has(.hel-svc-card) .et_pb_text_inner { height:100% !important; }

/* ===== PERMANENT: standalone heading modules (section heads) — kill Divi's default heading margins
   so the flex gap is the ONLY spacer. Fixes the recurring section-head → lead/body gap sitewide.
   (Prose blocks keep internal margins because their heading is NOT :only-child.) ===== */
#page-container .et-l--post .et_pb_text .et_pb_text_inner > h1:only-child,
#page-container .et-l--post .et_pb_text .et_pb_text_inner > h2:only-child,
#page-container .et-l--post .et_pb_text .et_pb_text_inner > h3:only-child,
#page-container .et-l--post .et_pb_text .et_pb_text_inner > h4:only-child { margin:0 !important; }

/* Service hero mobile: match other sections' gutter + keep the 2 buttons side-by-side */
@media (max-width:980px){
  #page-container .hel-pagehero .et_pb_row { padding-left:0 !important; padding-right:0 !important; }
  #page-container .hel-pagehero .et_pb_button_module_wrapper { display:inline-block !important; width:auto !important; vertical-align:top; }
  #page-container .hel-pagehero .et_pb_button.hel-btn { width:auto !important; }
}

/* Service hero mobile: force the 2 buttons to sit side-by-side, equal half-width */
@media (max-width:980px){
  #page-container .hel-pagehero .et_pb_button_module_wrapper { display:inline-block !important; width:48% !important; margin:.7rem 0 0 0 !important; vertical-align:top !important; }
  #page-container .hel-pagehero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left:3% !important; }
  #page-container .hel-pagehero .et_pb_button.hel-btn { width:100% !important; justify-content:center !important; padding-left:.5rem !important; padding-right:.5rem !important; }
}

/* Service hero mobile buttons: tighter widths so they fit side-by-side incl. inline whitespace */
@media (max-width:980px){
  #page-container .hel-pagehero .et_pb_button_module_wrapper { width:46% !important; }
  #page-container .hel-pagehero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left:4% !important; }
}

/* Service hero mobile = match the (approved) forside hero: full-width row + natural-width buttons side-by-side */
@media (max-width:980px){
  #page-container .hel-pagehero .et_pb_row { width:100% !important; max-width:none !important; padding-left:22px !important; padding-right:22px !important; }
  #page-container .hel-pagehero .et_pb_button_module_wrapper { display:inline-block !important; width:auto !important; margin:.8rem .6rem 0 0 !important; }
  #page-container .hel-pagehero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left:0 !important; }
  #page-container .hel-pagehero .et_pb_button.hel-btn { width:auto !important; padding-left:24px !important; padding-right:24px !important; }
}

/* Pills: spread across full width (fix nested-flex) — unwrap the wpautop <p> so pills are direct flex items of the full-width inner. Applies to forside Områder + service pages. */
#page-container .hel-pills .et_pb_text_inner { display:flex !important; flex-wrap:wrap !important; gap:.7rem !important; align-items:center !important; }
#page-container .hel-pills .et_pb_text_inner > p { display:contents !important; }

/* ===== Service page mobile: S6 pills full-width + S5 trust 2×2 grid ===== */
@media (max-width:980px){
  /* S6 — pills as full-width tappable rows */
  #page-container .hel-pills a.hel-pill { width:100% !important; justify-content:flex-start !important; }

  /* S5 — trust items 2 per row, icon on top */
  #page-container .et_pb_row:has(> .et_pb_column .hel-trust-item) { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:stretch !important; }
  #page-container .et_pb_column:has(.hel-trust-item) { flex:0 0 calc(50% - 6px) !important; width:calc(50% - 6px) !important; max-width:calc(50% - 6px) !important; margin:0 0 12px 0 !important; }
  #page-container .et_pb_column:has(.hel-trust-item):nth-of-type(odd) { margin-right:12px !important; }
  #page-container .hel-trust-item.et_pb_text { height:100% !important; }
  #page-container .hel-trust-item .et_pb_text_inner, #page-container .hel-trust-item .et_pb_text_inner p { flex-direction:column !important; align-items:flex-start !important; gap:.5rem !important; }
}

/* Fix: trust row must be a flex wrap-ROW on mobile (was staying column → cards stacked) */
@media (max-width:980px){
  #page-container .et_pb_row:has(.hel-trust-item) { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:stretch !important; justify-content:flex-start !important; }
}

/* Trust 2×2: shrink columns so 2 fit with the gap (was exactly 100% → wrapped) */
@media (max-width:980px){
  #page-container .et_pb_row:has(.hel-trust-item) { column-gap:12px !important; row-gap:12px !important; }
  #page-container .et_pb_column:has(.hel-trust-item) { flex:0 0 calc(50% - 8px) !important; width:calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; margin:0 !important; }
}

/* Trust 2×2: override Divi's phone flex-basis:100% so columns are actually half-width */
@media (max-width:980px){
  #page-container .et_pb_column.et_flex_column:has(.hel-trust-item) { flex-basis:calc(50% - 8px) !important; flex-grow:0 !important; flex-shrink:0 !important; width:calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; }
}

/* Trust 2×2: kill leftover odd-column margin-right (it stacked on the flex gap → wrapped). Gap handled by row column-gap. */
@media (max-width:980px){
  #page-container .et_pb_column.et_flex_column:has(.hel-trust-item):nth-of-type(odd) { margin-right:0 !important; }
}

/* Process steps → 2×2 grid on MOBILE only (desktop stays 4-across band). Mirrors trust-strip approach. */
@media (max-width:980px){
  #page-container .et_pb_row:has(.hel-step) { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:stretch !important; column-gap:12px !important; row-gap:18px !important; }
  #page-container .et_pb_column.et_flex_column:has(.hel-step) { flex:0 0 calc(50% - 8px) !important; flex-grow:0 !important; flex-shrink:0 !important; width:calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; margin:0 !important; }
  #page-container .et_pb_column.et_flex_column:has(.hel-step):nth-of-type(odd) { margin-right:0 !important; }
}

/* CTA band mobile: content matches section gutter + buttons side-by-side (equal half-width) */
@media (max-width:980px){
  #page-container .hel-cta-band .et_pb_row { padding-left:0 !important; padding-right:0 !important; }
  #page-container .hel-cta-band .hel-cta-actions { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; }
  #page-container .hel-cta-band .hel-cta-actions .et_pb_button_module_wrapper { flex:1 1 0 !important; min-width:0 !important; margin:0 !important; }
  #page-container .hel-cta-band .hel-cta-actions .et_pb_button.hel-btn { width:100% !important; justify-content:center !important; padding-left:.6rem !important; padding-right:.6rem !important; }
}

/* Footer mobile: content matches the page section gutter (was indented +22px) */
@media (max-width:980px){
  #page-container .hel-footer .et_pb_row { padding-left:0 !important; padding-right:0 !important; }
}

/* ===== PERMANENT mobile consistency: one 22px gutter on ALL rows (page content + footer),
   matching the hero/forside. Makes natural-width side-by-side buttons fit everywhere. ===== */
@media (max-width:980px){
  #page-container .et-l--post .et_pb_row,
  #page-container .hel-footer .et_pb_row { width:100% !important; max-width:none !important; padding-left:22px !important; padding-right:22px !important; }
  /* CTA buttons → natural-width side-by-side (like the hero), NOT stretched equal-width */
  #page-container .hel-cta-band .hel-cta-actions { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:.6rem !important; }
  #page-container .hel-cta-band .hel-cta-actions .et_pb_button_module_wrapper { flex:0 0 auto !important; width:auto !important; margin:0 !important; }
  #page-container .hel-cta-band .hel-cta-actions .et_pb_button.hel-btn { width:auto !important; padding-left:24px !important; padding-right:24px !important; justify-content:center !important; }
}

/* ============================================================
   Samarbejdspartnere — reusable looping logo ribbon (marquee)
   Markup = a Divi Code module (see divi-snippets/forside/samarbejdspartnere.html).
   ============================================================ */
/* #6e6e6e, ikke #8a8a8a. Den gamle vaerdi gav 3,45:1 mod hvid og dumpede
   WCAG AA (kraever 4,5:1). #6e6e6e giver 5,10:1 mod hvid og 4,89:1 mod #fafafa,
   saa den holder paa begge de baggrunde labelen optraeder paa. */
#page-container .hel-partners-label { text-align:center !important; max-width:none !important; margin:0 0 24px !important; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6e6e6e; }
#page-container .hel-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
#page-container .hel-marquee-track { display:flex; width:max-content; animation:hel-marquee-scroll 30s linear infinite; }
#page-container .hel-marquee:hover .hel-marquee-track { animation-play-state:paused; }
#page-container .hel-marquee-group { display:flex; align-items:center; gap:clamp(3rem,6vw,5.5rem); padding-right:clamp(3rem,6vw,5.5rem); }
#page-container .hel-partner-logo { height:38px !important; width:auto !important; max-width:none !important; flex:0 0 auto; object-fit:contain; opacity:.85; transition:opacity .25s ease, transform .25s ease; }
/* single-list model (JS-filled): each item owns its trailing gap → seamless loop, easy to maintain */
#page-container .hel-marquee-track > .hel-partner-logo { margin-right:clamp(3rem,6vw,5.5rem); }
#page-container .hel-partner-logo:hover { opacity:1; transform:translateY(-2px); }
/* linked logos: the <a> wrapper is the flex item + owns the trailing gap */
#page-container .hel-marquee-track > .hel-partner { display:inline-flex; align-items:center; flex:0 0 auto; margin-right:clamp(3rem,6vw,5.5rem); text-decoration:none; }
#page-container .hel-partner:hover .hel-partner-logo { opacity:1; transform:translateY(-2px); }
@keyframes hel-marquee-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #page-container .hel-marquee-track { animation:none; flex-wrap:wrap; justify-content:center; gap:2.5rem; }
  #page-container .hel-marquee { -webkit-mask-image:none; mask-image:none; }
  #page-container .hel-marquee-group:nth-child(2) { display:none; }
}

/* ============================================================
   Local pages — map embed (lokal-intro media side). Markup: a Code module with
   <div class="hel-map"><iframe src="<Google Maps embed>" ...></iframe></div>.
   Everything else on the local template reuses existing components.
   ============================================================ */
#page-container .hel-map { display:block; width:100%; height:100%; min-height:360px; border:0; border-radius:18px; overflow:hidden; background:#e9e9e9; }
#page-container .hel-map iframe { display:block; width:100%; height:100%; min-height:360px; border:0; }

/* Centered, constrained note paragraph (e.g. brødtekst under a card grid). Text module → CSS class hel-grid-note */
#page-container .hel-grid-note { max-width:820px !important; margin-left:auto !important; margin-right:auto !important; }
#page-container .hel-grid-note .et_pb_text_inner, #page-container .hel-grid-note .et_pb_text_inner p { text-align:center !important; color:var(--color-muted) !important; }
#page-container .hel-grid-note .et_pb_text_inner p { font-size:var(--fs-body-lg) !important; margin:0 !important; }

/* Pris/Tilbud (local pages) — grey + faint monochrome wiring-schematic bg, centered dark text.
   Section CSS class: hel-pris-section. Content = Text module(s) with <h2> + <p>. */
#page-container .hel-pris-section { background-color:var(--color-surface-alt) !important; background-image:url("/wp-content/themes/webworq-child/assets/img/pris-bg.svg") !important; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; }
#page-container .hel-pris-section .et_pb_row { max-width:820px !important; }
#page-container .hel-pris-section .et_pb_text, #page-container .hel-pris-section .et_pb_text .et_pb_text_inner { text-align:center !important; }
#page-container .hel-pris-section .et_pb_text h2 { color:var(--color-heading) !important; }
#page-container .hel-pris-section .et_pb_text .et_pb_text_inner p { color:var(--color-ink) !important; font-size:var(--fs-body-lg) !important; }
/* centered CTA buttons under the text (side-by-side) */
#page-container .hel-pris-section .et_pb_column { display:block !important; text-align:center !important; }
#page-container .hel-pris-section .et_pb_text { display:block !important; }
#page-container .hel-pris-section .et_pb_button_module_wrapper { display:inline-block !important; vertical-align:top; margin:1.3rem .3rem 0 !important; }
#page-container .hel-pris-section .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left:.5rem !important; }

/* ============ KONTAKT PAGE ============ */
/* Hero right column: dark contact info card (Text module holding the markup) */
#page-container .hel-infocard { background:var(--color-primary) !important; color:#fff !important; border-radius:16px !important; padding:2rem !important; display:grid; gap:1.1rem; }
#page-container .hel-infocard h3 { color:#fff !important; margin:0 0 .3rem !important; font-family:var(--font-heading) !important; }
#page-container .hel-infocard strong { color:#fff !important; font-family:var(--font-heading); font-weight:600; }
#page-container .hel-infocard a { color:#fff !important; }
#page-container .hel-infocard .muted { color:#cfcfcf; }
#page-container .hel-infocard .row { display:flex; gap:.8rem; align-items:flex-start; }
#page-container .hel-infocard .row svg { width:20px; height:20px; color:var(--color-accent); flex:0 0 auto; margin-top:2px; }
#page-container .hel-aside-phone { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:1.5rem; font-weight:700; color:#fff !important; display:inline-flex; align-items:center; gap:.5rem; }
#page-container .hel-aside-phone svg { width:22px; height:22px; color:var(--color-accent); }
#page-container .hel-infocard--hero { border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 40px rgba(20,20,20,.25); }

/* Kontaktformular: white card wrapping the Divi contact-form module */
#page-container .hel-form-card { background:#fff !important; border:1px solid var(--color-border) !important; border-radius:16px !important; box-shadow:var(--shadow-md); padding:2.2rem !important; }
/* match the homepage hero form exactly: grey bg, 12px radius, global --focus-ring glow (no custom focus override) */
#page-container .hel-form-card .input, #page-container .hel-form-card select, #page-container .hel-form-card textarea, #page-container .hel-form-card .et_pb_contact_message {
  background:var(--color-surface-alt) !important; border:1px solid var(--color-border-strong) !important; border-radius:12px !important;
  font-family:var(--font-body) !important; font-size:1rem !important; color:var(--color-ink) !important; padding:.8rem .9rem !important; width:100% !important; }
#page-container .hel-form-card .et_pb_contact_field { padding:0 0 1rem !important; background:transparent !important; }
#page-container .hel-form-card select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.4rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right .85rem center !important; background-size:18px !important; }
#page-container .hel-form-card .et_pb_contact_submit { display:inline-block !important; float:none !important; width:auto !important; background:linear-gradient(135deg,#c81e1e,#9e0a04) !important; color:#fff !important; border-radius:999px !important; border:0 !important; font-family:var(--font-heading) !important; font-weight:600 !important; font-size:1rem !important; line-height:1 !important; padding:.85rem 1.8rem !important; }
#page-container .hel-form-card .et_pb_contact_submit:after { display:none !important; }
/* left-align the submit + captcha row */
#page-container .hel-form-card .et_contact_bottom_container { display:flex !important; flex-wrap:wrap; align-items:center; justify-content:flex-start !important; gap:1rem; margin-top:.4rem; text-align:left !important; }

/* Map embed (Code module iframe) */
#page-container .hel-map { border-radius:18px !important; overflow:hidden; border:1px solid var(--color-border) !important; box-shadow:0 22px 55px -26px rgba(20,20,20,.30) !important; aspect-ratio:16/7 !important; height:auto !important; min-height:0 !important; max-height:none !important; padding:0 !important; background:transparent !important; line-height:0 !important; }
#page-container .hel-map .et_pb_code_inner { width:100% !important; height:100% !important; margin:0 !important; }   /* Divi code wrapper shrink-wraps to the iframe's default 300px otherwise */
#page-container .hel-map iframe { width:100% !important; height:100% !important; min-height:0 !important; border:0 !important; display:block !important; }
@media (max-width:768px){ #page-container .hel-map { aspect-ratio:4/3 !important; } }

/* equal-height service cards (hel-card-link): stretch module → text_inner → wpautop <p> → card, so all fill the equal-height column */
#page-container .et_pb_column:has(.hel-card-link) { display:flex !important; flex-direction:column !important; }
#page-container .et_pb_text:has(.hel-card-link) { flex:1 1 auto !important; display:flex !important; flex-direction:column !important; }
#page-container .et_pb_text:has(.hel-card-link) > .et_pb_text_inner { flex:1 1 auto !important; display:flex !important; flex-direction:column !important; }
#page-container .et_pb_text:has(.hel-card-link) > .et_pb_text_inner > p { flex:1 1 auto !important; margin:0 !important; display:flex !important; flex-direction:column !important; }
#page-container .hel-card-link { flex:1 1 auto !important; }

/* ============ BLOG + ARTICLE ============ */
/* Article body section (post Theme Builder template) — vertical rhythm in CSS, not inline.
   Row inside it uses .hel-content (2-col + sticky sidebar, shared with service pages). */
#page-container .hel-article-section { padding-top:var(--space-8) !important; padding-bottom:var(--space-8) !important; }
/* breadcrumb sits on a WHITE bg here (service-page breadcrumb is on a dark hero) → darker text */
#page-container .hel-article-section .hel-breadcrumb, #page-container .hel-article-section .hel-breadcrumb span,
#page-container .hel-article-section .hel-breadcrumb a, #page-container .hel-article-section .hel-breadcrumb .et_pb_text_inner p { color:var(--color-muted) !important; }
#page-container .hel-article-section .hel-breadcrumb a:hover { color:var(--color-accent-text) !important; }
/* head rhythm: Divi 5 puts a 30px flex gap on the column — replace with intentional spacing.
   ONLY the main (first) column — the sidebar keeps a gap between its cards. */
#page-container .hel-article-section .hel-content > .et_pb_column:first-child { row-gap:0 !important; }
#page-container .hel-article-section .hel-content > .et_pb_column:last-child { row-gap:1.25rem !important; }
#page-container .hel-article-section .et_pb_breadcrumbs { margin-bottom:1.4rem !important; padding:0 !important; }
#page-container .hel-article-section .hel-tag { margin-bottom:.35rem !important; }
#page-container .hel-article-section .et_pb_post_title { margin-bottom:.5rem !important; }
#page-container .hel-article-section .et_pb_post_title h1,
#page-container .hel-article-section .et_pb_title_container h1 { font-size:clamp(1.9rem,3.4vw,2.6rem) !important; line-height:1.12 !important; margin:0 !important; }
#page-container .hel-article-section .hel-article-meta { margin-bottom:1.6rem !important; }
#page-container .hel-article-section .hel-article-hero { margin-bottom:1.9rem !important; }
/* sticky sidebar: more clearance below the fixed header (~59px) */
@media (min-width:981px){ #page-container .hel-article-section .hel-content > .et_pb_column:last-child { top:112px !important; } }
/* mobile: fill the screen (Divi's default 80% row → near-full with a small gutter) + space the 2 sidebar cards */
@media (max-width:980px){
  #page-container .hel-article-section .hel-content { width:100% !important; max-width:100% !important; padding-left:22px !important; padding-right:22px !important; box-sizing:border-box !important; }
  #page-container .hel-article-section .hel-aside-card { margin-bottom:1.25rem !important; }
}

/* article body tables (Post Content — from the markdown tables) */
#page-container .hel-article-body table { width:100% !important; border-collapse:collapse !important; margin:1.6rem 0 !important; font-size:1rem !important; }
#page-container .hel-article-body th, #page-container .hel-article-body td { text-align:left !important; padding:.7rem .9rem !important; border-bottom:1px solid var(--color-border) !important; vertical-align:top !important; }
#page-container .hel-article-body thead th { background:var(--color-surface-alt) !important; font-family:var(--font-heading) !important; font-weight:700 !important; color:var(--color-heading) !important; border-bottom:2px solid var(--color-border-strong) !important; }
#page-container .hel-article-body tbody tr:last-child td { border-bottom:0 !important; }
@media (max-width:600px){ #page-container .hel-article-body th, #page-container .hel-article-body td { padding:.55rem .6rem !important; font-size:.94rem !important; } }
/* tag chip (Text module or dynamic category, class hel-tag) */
#page-container .hel-tag, #page-container .hel-tag a { display:inline-block; font-family:var(--font-heading); font-size:.72rem !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-text) !important; text-decoration:none; margin-bottom:.5rem; }
/* article body typography — add class hel-article-body to the Post Content module */
#page-container .hel-article-body p { font-size:1.18rem !important; line-height:1.75 !important; max-width:70ch; color:#2a2a2a !important; }
#page-container .hel-article-body h2 { margin-top:2.4rem !important; margin-bottom:.6rem !important; }
#page-container .hel-article-body h3 { margin-top:1.8rem !important; }
#page-container .hel-article-body ul, #page-container .hel-article-body ol { font-size:1.12rem; line-height:1.7; max-width:70ch; }
/* featured hero image on the article */
#page-container .hel-article-hero img { border-radius:18px !important; }
/* author box (Text module, class hel-authorbox) */
#page-container .hel-authorbox { display:flex !important; gap:1rem; align-items:center; background:var(--color-surface-alt) !important; border-radius:18px !important; padding:var(--space-5) !important; margin-top:var(--space-7) !important; }
#page-container .hel-authorbox img { width:60px; height:60px; border-radius:999px; flex:none; }
#page-container .hel-authorbox strong { font-family:var(--font-heading); color:var(--color-heading); }
#page-container .hel-authorbox p { margin:.2rem 0 0 !important; color:var(--color-muted) !important; font-size:var(--fs-small) !important; }
/* sidebar related links (inside hel-aside-card) */
#page-container .hel-aside-card .related { list-style:none !important; padding:0 !important; margin:.4rem 0 0 !important; display:grid; gap:.9rem; }
#page-container .hel-aside-card .related a { display:grid; gap:.15rem; color:var(--color-heading) !important; font-family:var(--font-heading); font-weight:600; font-size:.98rem; line-height:1.25; text-decoration:none; }
#page-container .hel-aside-card .related a:hover { color:var(--color-accent-text) !important; }
#page-container .hel-aside-card .related span { font-size:.8rem; color:var(--color-muted) !important; font-family:var(--font-body); font-weight:400; }
/* blog listing: skin the Divi Blog module posts as cards (section CSS class hel-bloglist) */
/* Divi 5 already grids the posts via .et_pb_blog_posts.et_grid_module — just set the gap; DON'T add another grid */
#page-container .hel-bloglist .et_pb_ajax_pagination_container { display:block !important; }
#page-container .hel-bloglist .et_pb_blog_posts.et_grid_module { grid-template-columns:repeat(3,1fr) !important; gap:var(--space-6) !important; }
#page-container .hel-bloglist .et_pb_post { background:#fff !important; border:1px solid var(--color-border) !important; border-radius:18px !important; overflow:hidden !important; padding:0 !important; margin:0 !important; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
#page-container .hel-bloglist .et_pb_post:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
#page-container .hel-bloglist .et_pb_image_container, #page-container .hel-bloglist .entry-featured-image-url { margin:0 !important; }
#page-container .hel-bloglist .et_pb_post img { aspect-ratio:16/10; object-fit:cover; width:100%; display:block; }
#page-container .hel-bloglist .et_pb_post .entry-title { font-family:var(--font-heading); font-size:1.2rem; margin:0 0 .4rem; padding:0 var(--space-5); }
#page-container .hel-bloglist .et_pb_post .post-meta, #page-container .hel-bloglist .et_pb_post .post-content { padding:0 var(--space-5); }
#page-container .hel-bloglist .et_pb_post .post-meta { font-size:var(--fs-small); color:var(--color-muted); margin-top:.4rem; }
#page-container .hel-bloglist .et_pb_post .post-content { padding-bottom:var(--space-5); color:var(--color-muted); font-size:var(--fs-small); }
#page-container .hel-bloglist .et_pb_post .entry-title { padding-top:var(--space-5); }
@media (max-width:980px){ #page-container .hel-bloglist .et_pb_blog_posts.et_grid_module { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:600px){ #page-container .hel-bloglist .et_pb_blog_posts.et_grid_module { grid-template-columns:1fr !important; } }

/* featured (newest) post — single fullwidth Blog module, class hel-blogfeature — as a big 2-col card */
#page-container .hel-blogfeature { margin-bottom:var(--space-7); }
#page-container .hel-blogfeature .et_pb_post { display:grid !important; grid-template-columns:53% 47% !important; grid-template-rows:auto auto 1fr !important; background:#fff !important; border:1px solid var(--color-border) !important; border-radius:18px !important; overflow:hidden !important; padding:0 !important; margin:0 !important; }
/* image is an <a class="entry-featured-image-url"> — pin it to col 1 spanning all rows, absolute-fill so it does NOT force any row height */
#page-container .hel-blogfeature .et_pb_post .entry-featured-image-url { grid-column:1; grid-row:1 / -1; position:relative; overflow:hidden; margin:0 !important; }
#page-container .hel-blogfeature .et_pb_post .entry-featured-image-url img { position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; display:block; }
#page-container .hel-blogfeature .et_pb_post .entry-title { grid-column:2; grid-row:1; font-family:var(--font-heading); font-size:1.9rem !important; line-height:1.15; margin:0 !important; padding:var(--space-7) var(--space-7) .5rem !important; }
#page-container .hel-blogfeature .et_pb_post .post-meta { grid-column:2; grid-row:2; padding:0 var(--space-7) !important; font-size:var(--fs-small); color:var(--color-muted) !important; }
#page-container .hel-blogfeature .et_pb_post .post-content { grid-column:2; grid-row:3; padding:.7rem var(--space-7) var(--space-7) !important; color:var(--color-ink) !important; font-size:var(--fs-body-lg); }
/* read-more = exactly a .hel-btn--primary (matches the site button system) */
#page-container .hel-blogfeature .et_pb_post .more-link { display:inline-block; margin-top:1.1rem; background:var(--color-primary) !important; color:#fff !important; border:2px solid transparent !important; border-radius:999px !important; font-family:var(--font-heading) !important; font-weight:600 !important; font-size:1rem !important; line-height:1 !important; padding:.72rem 1.5rem !important; text-decoration:none !important; transition:all .15s ease-out; }
#page-container .hel-blogfeature .et_pb_post .more-link:hover { transform:translateY(-1px); }
@media (max-width:760px){ #page-container .hel-blogfeature .et_pb_post { grid-template-columns:1fr !important; grid-template-rows:auto auto auto auto !important; } #page-container .hel-blogfeature .et_pb_post .entry-featured-image-url { position:relative; grid-row:1; grid-column:1; aspect-ratio:16/9; } #page-container .hel-blogfeature .et_pb_post .entry-title { grid-column:1; grid-row:2; } #page-container .hel-blogfeature .et_pb_post .post-meta { grid-column:1; grid-row:3; } #page-container .hel-blogfeature .et_pb_post .post-content { grid-column:1; grid-row:4; } }

/* Blog "Indlæs flere" (Load more) button — self-contained, matches the primary button.
   Native Divi pagination is hidden (we replace it with append-on-click). */
#page-container .hel-bloglist .pagination,
#page-container .hel-bloglist .wp_pagenavi,
#page-container .hel-bloglist .wp-pagenavi { display:none !important; }
.hel-loadmore-wrap { display:flex; justify-content:center; margin:var(--space-7) 0 0; }
.hel-loadmore { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-heading); font-weight:600; font-size:1rem; line-height:1;
  padding:.85rem 1.9rem; border:2px solid transparent; border-radius:999px;
  background:var(--color-primary); color:#fff; text-decoration:none;
  transition:transform .15s ease-out, background .15s ease-out, opacity .15s ease-out; }
.hel-loadmore:hover { transform:translateY(-1px); background:#141414; }
.hel-loadmore:disabled, .hel-loadmore.is-loading { opacity:.7; cursor:default; transform:none; }

/* article meta line under the H1 (Text module, class hel-article-meta):
   e.g. "22. jul 2026 · 4 min læsning · Af Jesper Hørlykke Jørgensen" */
#page-container .hel-article-meta, #page-container .hel-article-meta p { margin:.35rem 0 0 !important; color:var(--color-muted) !important; font-family:var(--font-heading); font-size:var(--fs-small) !important; font-weight:500; letter-spacing:.01em; }

/* ============================================================
   PRIMARY HEADER NAV — [hel_primary_nav] shortcode (Global Header).
   Concept A mega (Ydelser) + Områder mega + dark full-screen mobile menu.
   Icons = site Lucide family. Namespaced .hx-* to avoid Divi clashes.
   ============================================================ */
.hx-shell *{ box-sizing:border-box; }
.hx-shell a{ text-decoration:none; }

/* topbar */
.hx-topbar{ background:#141414; color:#cfcfcf; font-size:.82rem; }
.hx-topbar .in{ max-width:1200px; margin:0 auto; padding:.45rem 24px; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.hx-topbar a{ color:#cfcfcf !important; display:inline-flex; align-items:center; gap:.4rem; }
.hx-topbar .meta{ display:flex; gap:1.4rem; align-items:center; }
.hx-topbar svg{ width:15px; height:15px; }
.hx-topbar .star, .hx-shell .star{ color:#ffc107; letter-spacing:1px; }

/* header bar */
.hx-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--color-border); }
.hx-header .in{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px; min-height:74px; display:flex; align-items:center; gap:1.5rem; }
.hx-logo{ display:inline-flex; align-items:center; }
.hx-logo img{ height:42px; width:auto; display:block; }

/* header sections stay above page content so the mega overlays the hero (not behind it) */
.et_pb_section[class*="_tb_header"]{ position:relative; z-index:900; }
/* header Code module fills the space between logo and CTA buttons → buttons stay flush-right */
.et_pb_code[class*="_tb_header"]{ flex:1 1 auto !important; align-self:stretch !important; }
.et_pb_code[class*="_tb_header"] .et_pb_code_inner{ display:flex; height:100%; }
.hx-navwrap{ position:relative; display:flex; align-items:center; flex:1 1 auto; }
.hx-nav{ display:flex; align-items:center; gap:.15rem; }
.hx-callbtn{ display:none; } /* desktop uses the Divi "Ring" button; mobile uses this compact icon */
.hx-nav > a, .hx-nav > .has-mega > button{ position:relative; font-family:var(--font-heading); font-weight:500; font-size:.98rem; color:var(--color-heading) !important; background:none; border:0; cursor:pointer; padding:.65rem .8rem; border-radius:8px; display:inline-flex; align-items:center; gap:.35rem; line-height:1; }
.hx-nav > a:hover, .hx-nav .has-mega:hover > button{ color:var(--color-accent-text) !important; }
.hx-nav .has-mega > button .chev{ display:inline-flex; opacity:.6; transition:transform .2s ease; }
.hx-nav .has-mega > button .chev svg{ width:15px; height:15px; }
.hx-nav .has-mega:hover > button .chev{ transform:rotate(180deg); }
.hx-nav > a::before, .hx-nav .has-mega > button::before{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.4rem; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.hx-nav > a:hover::before, .hx-nav .has-mega:hover > button::before{ transform:scaleX(1); }

.hx-cta{ display:flex; align-items:center; gap:.7rem; margin-left:.6rem; }
.hx-btn{ font-family:var(--font-heading); font-weight:600; font-size:.95rem; border-radius:999px; padding:.68rem 1.25rem; display:inline-flex; align-items:center; gap:.45rem; line-height:1; border:2px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .15s ease, background .15s ease; }
.hx-btn svg{ width:17px; height:17px; }
.hx-btn--ghost{ border-color:var(--color-border); color:var(--color-heading) !important; background:#fff; }
.hx-btn--ghost:hover{ border-color:#141414; transform:translateY(-1px); }
.hx-btn--accent{ background:linear-gradient(135deg,#ea2b2b,#9e0a04); color:#fff !important; }
.hx-btn--accent:hover{ transform:translateY(-1px); }
.hx-burger{ display:none; }

/* mega panel (shared) */
.hx-nav .mega{ position:absolute; top:calc(100% + 2px); left:50%; right:auto; transform:translateX(-50%) translateY(8px); background:#fff; border:1px solid var(--color-border); border-radius:16px; box-shadow:0 30px 70px -24px rgba(20,20,20,.28); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:210; }
.hx-navwrap .has-mega{ position:static; }
.hx-navwrap .has-mega:hover .mega, .hx-navwrap .has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hx-nav .mega::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.hx-nav .mega-inner{ display:grid; }
.hx-nav .mega-eyebrow{ font-family:var(--font-heading); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-text); margin:0 0 .9rem; }

/* promo */
.hx-nav .mega-promo{ background:linear-gradient(150deg,#1c1c1c,#000); color:#fff; border-radius:12px; padding:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.hx-nav .mega-promo .rate{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:#eaeaea; }
.hx-nav .mega-promo h4{ font-family:var(--font-heading); color:#fff; margin:.3rem 0 .1rem; font-size:1.15rem; }
.hx-nav .mega-promo p{ margin:0 0 .6rem; color:#bdbdbd; font-size:.88rem; line-height:1.5; }
.hx-nav .mega-promo .hx-phone{ font-family:var(--font-mono); font-weight:700; font-size:1.25rem; color:#fff !important; display:inline-flex; align-items:center; gap:.4rem; margin:.1rem 0 .5rem; }
.hx-nav .mega-promo .hx-phone svg{ width:18px; height:18px; color:#ff5b5b; }
.hx-nav .mega-promo .hx-btn--accent{ justify-content:center; }

/* Concept A grid. Sized for the 4-5 item megas ("El & installation", "Grøn energi") —
   one column of items plus the promo. It was 3 columns / 920px back when a single
   "Ydelser" mega had to hold all 9 services. */
.hx-nav .mega--a .mega-inner{ grid-template-columns:minmax(0,1fr) 260px; gap:.35rem 1.4rem; padding:1.6rem; width:660px; max-width:calc(100vw - 40px); }
.hx-nav .mega--a .mega-eyebrow{ grid-column:1; margin-bottom:.3rem; }
/* Pin the links to column 1 so they can never wrap into the promo column, whatever
   the item count. Without this, auto-placement fills any row the promo doesn't cover. */
.hx-nav .mega--a .m-item{ grid-column:1; }
.hx-nav .mega--a .m-item{ display:flex; gap:.8rem; padding:.65rem .7rem; border-radius:12px; align-items:flex-start; transition:background .15s ease; }
.hx-nav .mega--a .m-item:hover{ background:var(--color-surface-alt); }
.hx-nav .mega--a .m-ic{ flex:none; width:40px; height:40px; border-radius:10px; background:var(--color-surface-alt); color:var(--color-accent); display:grid; place-items:center; transition:background .15s ease, color .15s ease; }
.hx-nav .mega--a .m-item:hover .m-ic{ background:var(--color-accent); color:#fff; }
.hx-nav .mega--a .m-ic svg{ width:21px; height:21px; }
.hx-nav .mega--a .m-item > span:last-child{ display:flex; flex-direction:column; }
.hx-nav .mega--a .m-tt{ display:block; font-family:var(--font-heading); font-weight:600; font-size:.96rem; color:var(--color-heading); line-height:1.2; }
.hx-nav .mega--a .m-ds{ display:block; font-size:.8rem; color:var(--color-muted); margin-top:.1rem; line-height:1.3; }
/* Span, not "1 / -1": -1 counts back from the last line of the EXPLICIT grid, and these
   rows are implicit (one per menu item), so -1 collapses the promo into row 1 and pushes
   every link underneath it. "span 6" covers the eyebrow + up to 5 services; a shorter
   mega just leaves one empty zero-height row. */
.hx-nav .mega--a .mega-promo{ grid-row:1 / span 6; grid-column:2; align-self:start; }

/* Områder mega */
.hx-nav .mega--areas .mega-inner{ grid-template-columns:1fr 230px; gap:1.4rem; padding:1.5rem; width:560px; max-width:calc(100vw - 40px); }
.hx-nav .mega--areas .a-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.hx-nav .mega--areas .a-grid a{ display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; border-radius:10px; color:var(--color-heading) !important; font-family:var(--font-heading); font-weight:500; font-size:.96rem; transition:background .15s; }
.hx-nav .mega--areas .a-grid a:hover{ background:var(--color-surface-alt); color:var(--color-accent-text) !important; }
.hx-nav .mega--areas .a-grid svg{ width:17px; height:17px; color:var(--color-accent); flex:none; }
.hx-nav .mega--areas .a-note{ font-size:.82rem; color:var(--color-muted); margin:.9rem .3rem 0; }
.hx-nav .mega--areas .mega-promo .rate svg{ width:16px; height:16px; color:#ff5b5b; }

/* ===== dark full-screen MOBILE menu ===== */
.hx-mobile{ position:fixed; inset:0; z-index:9999; background:#0f0f0f; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; visibility:hidden; }
.hx-mobile.open{ transform:translateX(0); visibility:visible; }
.hx-mobile-top{ display:flex; align-items:center; justify-content:space-between; padding:1rem 22px; border-bottom:1px solid #242424; }
.hx-mobile-top .hx-logo img{ height:38px; }
.hx-mobile-close{ background:#1e1e1e; border:0; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; }
.hx-mobile-close svg{ width:22px; height:22px; color:#fff; }
.hx-quick{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:.9rem 22px 1rem; border-bottom:1px solid #242424; }
.hx-quick .hx-btn{ justify-content:center; padding:.9rem; font-size:1rem; }
.hx-quick .hx-btn--ghost{ background:transparent; border-color:#3a3a3a; color:#fff !important; }
.hx-mobile-body{ flex:1; overflow-y:auto; padding:.5rem 14px 1.5rem; }
.hx-macc > a, .hx-macc > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-family:var(--font-heading); font-weight:600; font-size:1.35rem; color:#fff !important; background:none; border:0; border-bottom:1px solid #1f1f1f; cursor:pointer; padding:1rem 10px; text-align:left; }
.hx-macc > button .chev{ display:inline-flex; opacity:.55; transition:transform .25s ease; }
.hx-macc > button .chev svg{ width:22px; height:22px; }
.hx-macc.exp > button .chev{ transform:rotate(180deg); }
.hx-macc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.hx-macc.exp .hx-macc-panel{ grid-template-rows:1fr; }
.hx-macc-panel > div{ overflow:hidden; }
.hx-macc-panel a{ display:flex; align-items:center; gap:.7rem; padding:.7rem 10px; color:#c9c9c9 !important; font-size:1.02rem; }
.hx-macc-panel a .mi{ width:34px; height:34px; border-radius:9px; background:#1e1e1e; color:#ff5b5b; display:grid; place-items:center; flex:none; }
.hx-macc-panel a .mi svg{ width:18px; height:18px; }
.hx-macc-panel a:last-child{ margin-bottom:.6rem; }
.hx-mobile-foot{ padding:1.1rem 22px calc(1.1rem + env(safe-area-inset-bottom)); background:#000; border-top:1px solid #242424; display:grid; gap:.7rem; }
.hx-mobile-foot .mrow{ display:flex; align-items:center; gap:.5rem; color:#bdbdbd; font-size:.85rem; }
.hx-mobile-foot .mrow svg{ width:16px; height:16px; }
.hx-mobile-foot .mphone{ font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:#fff !important; display:inline-flex; align-items:center; gap:.5rem; }
.hx-mobile-foot .mphone svg{ width:22px; height:22px; color:#ff5b5b; }
.hx-mobile-foot .hx-btn--accent{ justify-content:center; font-size:1.05rem; padding:.9rem; }

/* collapse to burger */
@media (max-width:1024px){
  .hx-nav{ display:none; }
  /* hide the Divi CTA buttons in the header on mobile — replaced by the compact call icon + burger */
  .et_pb_section[class*="_tb_header"] .et_pb_button_module_wrapper{ display:none !important; }
  .hx-navwrap{ justify-content:flex-end; gap:.55rem; }
  .hx-callbtn{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#ea2b2b,#9e0a04); color:#fff; }
  .hx-callbtn svg{ width:22px; height:22px; }
  .hx-burger{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; border:0; background:var(--color-surface-alt); cursor:pointer; }
  .hx-burger svg{ width:24px; height:24px; color:var(--color-heading); }
}
@media (min-width:1025px){ .hx-mobile{ display:none; } }
body.hx-menu-open{ overflow:hidden; }
/* while the mobile menu is open, hide the (sticky) Divi header so it can't paint over the
   menu's close button — the overlay carries its own logo + X. Bulletproof across iOS sticky stacking. */
body.hx-menu-open .et-l--header{ visibility:hidden !important; }
/* touch/click-open for the mega (hover handled above for mouse) */
.hx-navwrap .has-mega.tap-open .mega{ opacity:1 !important; visibility:visible !important; transform:translateX(-50%) translateY(0) !important; }

/* ============ LEGAL PAGES (Privatlivspolitik / Cookiepolitik) ============
   One Text module with CSS Class hel-legal holds the whole policy. */
#page-container .hel-legal { max-width:820px !important; margin:0 auto !important; padding:1rem 0 1.5rem !important; }
#page-container .hel-legal h1 { font-size:clamp(2rem,4vw,2.8rem) !important; margin:0 0 .4rem !important; }
#page-container .hel-legal .updated { color:var(--color-muted) !important; font-size:var(--fs-small) !important; margin:0 0 2.2rem !important; }
#page-container .hel-legal h2 { font-size:1.35rem !important; margin:2.4rem 0 .6rem !important; }
#page-container .hel-legal p, #page-container .hel-legal li { color:#2a2a2a !important; line-height:1.75 !important; font-size:1.05rem !important; }
#page-container .hel-legal ul { padding-left:1.15rem !important; margin:.4rem 0 1rem !important; }
#page-container .hel-legal li { margin-bottom:.5rem !important; }
#page-container .hel-legal .lead { font-size:1.15rem !important; color:var(--color-ink) !important; }
#page-container .hel-legal a { color:var(--color-accent-text) !important; }
#page-container .hel-legal .box { background:var(--color-surface-alt) !important; border:1px solid var(--color-border) !important; border-radius:14px !important; padding:1.1rem 1.3rem !important; margin:.6rem 0 !important; }
#page-container .hel-legal .foot { margin-top:2.6rem !important; padding-top:1.2rem !important; border-top:1px solid var(--color-border) !important; color:var(--color-muted) !important; font-size:var(--fs-small) !important; }

/* ============================================================
   PHOTO SERVICE CARDS
   100% CSS-driven — nothing in the page content, nothing in the database.
   Each card picks its photo from its own href, so:
     • change a photo    → edit ONE line in the image map below
     • add a service     → add ONE line to the map
     • go-live URL swap  → unaffected (paths are root-relative)
   Applies to .hel-card-link (cards that LINK to a service page).
   The .hel-svc-card task cards ("Hvad vi hjælper med") keep their icons.
   ============================================================ */

/* ---- IMAGE MAP: the only part you normally edit ---- */
#page-container a.hel-card-link[href="/el-arbejde/"]                  { --img:url('/wp-content/uploads/2026/07/el-arbejde-1-768x573.jpg'); }
#page-container a.hel-card-link[href="/eltavler/"]                    { --img:url('/wp-content/uploads/2026/07/eltavle-1-768x429.jpg'); }
#page-container a.hel-card-link[href="/ladeboks/"]                    { --img:url('/wp-content/uploads/2026/07/ladestander-1-768x573.jpg'); }
#page-container a.hel-card-link[href="/varmepumper/"]                 { --img:url('/wp-content/uploads/2026/07/varmepumpe-2-768x429.jpg'); }
#page-container a.hel-card-link[href="/solceller/"]                   { --img:url('/wp-content/uploads/2026/07/solceller-1-768x573.jpg'); }
#page-container a.hel-card-link[href="/noedforsyning/"]               { --img:url('/wp-content/uploads/2026/08/noedforsyning-generator-trailer-768x429.jpg'); }
#page-container a.hel-card-link[href="/netvaerksinstallation/"]       { --img:url('/wp-content/uploads/2026/08/netvaerk-patchpanel-768x429.jpg'); }
#page-container a.hel-card-link[href="/intelligente-installationer/"] { --img:url('/wp-content/uploads/2026/08/intelligente-installationer-vaegpanel-768x429.jpg'); }
#page-container a.hel-card-link[href="/energioptimering/"]            { --img:url('/wp-content/uploads/2026/08/energioptimering-forbrug-app-768x429.jpg'); }

/* ---- CARD STYLING (shared by every service card) ---- */
#page-container a.hel-card-link{
  position:relative; justify-content:flex-end; gap:0; isolation:isolate; overflow:hidden;
  min-height:260px; padding:1.25rem 1.3rem !important; border:0 !important; border-radius:16px !important;
  background:#1a1a1a !important; box-shadow:0 12px 30px -14px rgba(20,20,20,.45);
}
#page-container a.hel-card-link::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--img); background-size:cover;
  background-position:var(--img-pos, center 32%);   /* bias upward so faces aren't cropped */
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
#page-container a.hel-card-link::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.70) 32%, rgba(10,10,10,.22) 62%, rgba(10,10,10,.04) 100%);
}
#page-container a.hel-card-link:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -18px rgba(20,20,20,.55); border-color:transparent; }
#page-container a.hel-card-link:hover::before{ transform:scale(1.06); }
#page-container a.hel-card-link .ic{ display:none !important; }
#page-container a.hel-card-link .ttl{ color:#fff !important; font-size:1.14rem; margin:0 0 .15rem;
  overflow-wrap:break-word; hyphens:auto; text-wrap:balance; }
#page-container a.hel-card-link .desc{ color:#dcdcdc !important; font-size:.9rem; line-height:1.4; max-width:34ch; }
#page-container a.hel-card-link .more{ margin-top:.55rem; padding-top:0; color:#ff6b6b !important; }
#page-container a.hel-card-link:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:980px){ #page-container a.hel-card-link{ min-height:220px; } }
/* per-image crop nudges (optional — same map style as the images) */
#page-container a.hel-card-link[href="/el-arbejde/"]  { --img-pos:center 22%; }
#page-container a.hel-card-link[href="/solceller/"]   { --img-pos:center 40%; }
/* tighter gutters on service-card rows → wider cards (Divi default gutter is 5.5%).
   Divi hard-codes each column's width from that gutter, so flex-grow lets them
   absorb the freed space. Works at every breakpoint: when columns already fill
   the row (tablet/phone) there is nothing left to grow into. */
#page-container .et_pb_row:has(a.hel-card-link){ column-gap:1.4rem !important; row-gap:1.4rem !important; }
#page-container .et_pb_row:has(a.hel-card-link) > .et_pb_column{ flex-grow:1 !important; }

/* ============================================================
   KUNDEUDTALELSER — one Divi Text module, one <article> per udtalelse.

   MAINTENANCE (this is the whole job):
     add one      → paste another <article> block, anywhere in the module
     remove one   → delete its <article>
     promote one  → move its <article> to the top; first = the big one
     no limit     → article 2..n flow into the two-column rail automatically

   Nothing lives in PHP. The text is normal Divi Text-module content, so
   Jesper can edit a word in the visual editor without touching code.

   Deliberately NOT a ratings widget: no stars, no score, no count. These
   are written testimonials. Keep it that way (markedsføringsloven).

   Spacing is the token scale: 64 plate / 24 quote-to-byline / 48 either
   side of the rule. Type: 32px lead, 18px rail (1.8x step).
   ============================================================ */
#page-container .hel-udtalelser {
  background: var(--brand-black, #141414) !important;
  border-radius: 16px !important;
  padding: 64px !important;
  color: #fff !important;
}
#page-container .hel-udtalelser .et_pb_text_inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 48px;
}
/* the first article is the lead: full width, larger, and carries the rule */
#page-container .hel-udtalelser article:first-child {
  grid-column: 1 / -1;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
#page-container .hel-udtalelser article:first-child blockquote p {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.38 !important;      /* light on dark reads lighter; extra leading */
  letter-spacing: -.022em !important;
  max-width: 34ch;
}
/* Divi ships `blockquote { border-left: 5px solid #2ea3f2; padding-left: 20px }`.
   That blue stripe is Divi's, not ours, and a coloured side-stripe is exactly the
   decoration this design avoids. Reset all three, not just the margin. */
#page-container .hel-udtalelser blockquote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
#page-container .hel-udtalelser blockquote p {
  color: #c9c9c9 !important;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  margin: 0 0 .75rem !important;
}
#page-container .hel-udtalelser blockquote p:last-child { margin-bottom: 0 !important; }
/* the red opening mark, set to hang so the text edge stays optically straight */
#page-container .hel-udtalelser .mark { color: var(--color-accent, #EA2B2B); margin-left: -.5em; }

/* byline: name plus the job type as metadata, never a stacked uppercase kicker */
#page-container .hel-udtalelser .by {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: 24px;
  font-family: var(--font-heading); font-weight: 600; font-size: .98rem; color: #fff;
}
#page-container .hel-udtalelser .by span {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: #9d9d9d;
}
#page-container .hel-udtalelser .by span::before {
  content: ""; display: inline-block; width: 14px; height: 2px; border-radius: 2px;
  background: var(--color-accent, #EA2B2B); margin-right: .6rem; vertical-align: .28em;
}

@media (max-width: 820px) {
  #page-container .hel-udtalelser { padding: 32px !important; }
  #page-container .hel-udtalelser .et_pb_text_inner {
    grid-template-columns: 1fr; column-gap: 0; row-gap: 32px;
  }
  #page-container .hel-udtalelser article:first-child { padding-bottom: 32px; }
  #page-container .hel-udtalelser .by { margin-top: 16px; }
  /* the clamp floor and the rail meet at this width; step the rail down so the
     lead keeps its rank (1.16 -> 1.41) */
  #page-container .hel-udtalelser blockquote p { font-size: var(--fs-body) !important; }
  #page-container .hel-udtalelser article:first-child blockquote p { font-size: 1.5rem !important; }
}

/* ============================================================
   BRANCHEMÆRKER — TEKNIQ Medlem + El-mærket

   Only marks Hørlykke EL is actually entitled to. TEKNIQ's own terms:
   "Logoerne må kun bruges af dem, der står anført i beskrivelsen under
   hvert enkelt logo. Misbrug vil blive retsforfulgt."
   -> Medlem af TEKNIQ is licensed to all members.
   -> TEKNIQ Garanti is a separate scheme: do NOT add it without
      confirming Jesper is enrolled.
   -> Use the "Medlem af TEKNIQ" sub-logo, never the bare TEKNIQ symbol;
      the symbol is the corporate mark and is not cleared for member use.

   Heights are set per mark, not shared: El-mærket is a square badge and
   reads visually larger than a wide lockup at the same height, so it is
   sized down to match optically rather than mathematically.
   ============================================================ */
/* The class sits on the Divi MODULE, but the content lives in .et_pb_text_inner and
   wpautop wraps it in a <p>. Flexing the module alone just makes that wrapper the single
   flex item, so the marks stack. Flex the inner AND the paragraph, and cover the case
   where each image ends up in its own <p>. */
/* 14px, not 28: the inner and its <p> are both flex containers, so the gap applies
   twice and renders at double the declared value. */
#page-container .hel-marks .et_pb_text_inner,
#page-container .hel-marks .et_pb_text_inner > p {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0;
}
#page-container .hel-marks img {
  display: block; width: auto; height: auto; flex: none;
}
#page-container .hel-marks .m-tekniq { height: 40px; }
#page-container .hel-marks .m-el     { height: 46px; }
/* Hero pill: the Q symbol sits inline with the words "Medlem af TEKNIQ".
   Sized to the cap height of the text next to it and nudged onto the baseline,
   so it reads as part of the line rather than an icon bolted in front of it. */
#page-container .hel-hero .hel-marks .m-tekniq { height: 30px; }
#page-container .m-q {
  height: 18px; width: auto; display: inline-block; vertical-align: -3px;
  margin-right: .5rem;
}
@media (max-width: 600px) {
  #page-container .hel-marks .et_pb_text_inner,
  #page-container .hel-marks .et_pb_text_inner > p { gap: 10px; }
  #page-container .hel-marks .m-tekniq { height: 34px; }
  #page-container .hel-marks .m-el     { height: 40px; }
}

/* ============================================================
   KVITTERING — /tak-for-din-besked/ (redirect-mål efter formular)

   MAINTENANCE: one Divi Text module with class `hel-kvittering`. Everything is
   ordinary Text-module content, so Jesper can change a line in the visual editor.
     ret en linje   → rediger teksten i modulet
     ny række       → kopier en <div class="row">…</div>
     skift billede  → udskift src på <img>

   Svartiden "inden for 24 timer på hverdage" matcher forsidens formular. Må ikke
   love hurtigere. Ingen døgnvagt. Teksten taler som firmaet, ikke som en person:
   et navngivet løfte er et personligt løfte, og firmaet skal kunne holde det,
   også når Jesper er på en opgave.
   ============================================================ */
#page-container .hel-kvittering { max-width: 620px; margin: 0 auto; }
#page-container .hel-kvittering .et_pb_text_inner {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden;
}
#page-container .hel-kvittering .bar {
  padding: 1rem 1.5rem; border-bottom: 1px dashed var(--color-border);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted); background: var(--color-surface-alt);
}
#page-container .hel-kvittering .bar .ok { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-heading); }
#page-container .hel-kvittering .bar .ok i {
  width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; font-style: normal;
  box-shadow: 0 0 0 4px rgba(61,220,132,.16);
}
#page-container .hel-kvittering .head { padding: clamp(1.8rem,3.4vw,2.6rem) clamp(1.5rem,3vw,2.2rem) 1.4rem; }
#page-container .hel-kvittering .head h1 {
  margin: 0 0 .6rem !important; font-size: clamp(1.75rem,3.4vw,2.4rem) !important;
  line-height: 1.15 !important; letter-spacing: -.02em; text-wrap: balance;
}
#page-container .hel-kvittering .head p {
  margin: 0 !important; color: var(--color-ink) !important; line-height: 1.65 !important;
  max-width: 46ch; text-wrap: pretty;
}
#page-container .hel-kvittering .rows { padding: 0 clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem); margin: 0; }
#page-container .hel-kvittering .row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .7rem 0;
  border-top: 1px solid var(--color-border);
}
#page-container .hel-kvittering .row dt {
  font-family: var(--font-mono); color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .06em; font-size: .72rem; padding-top: .15rem;
}
#page-container .hel-kvittering .row dd {
  margin: 0; color: var(--color-heading); font-weight: 500; font-size: var(--fs-small);
}
/* the face sits in its own row inside the grid, never floating at a corner where it
   has nothing to anchor to and collides with the status text on mobile */
#page-container .hel-kvittering .who {
  display: flex; align-items: center; gap: .9rem; margin: 0;
  padding: 1.1rem clamp(1.5rem,3vw,2.2rem); border-top: 1px solid var(--color-border);
}
#page-container .hel-kvittering .who img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 12%;
  flex: none; display: block;
}
#page-container .hel-kvittering .who b {
  display: block; font-family: var(--font-heading); font-weight: 600;
  color: var(--color-heading); font-size: .97rem; line-height: 1.3;
}
#page-container .hel-kvittering .who em {
  display: block; font-size: var(--fs-small); color: var(--color-muted); font-style: normal;
}
#page-container .hel-kvittering .cta {
  border-top: 1px dashed var(--color-border); background: var(--color-surface-alt);
  padding: 1.2rem clamp(1.5rem,3vw,2.2rem); display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
#page-container .hel-kvittering .cta span { font-size: var(--fs-small); color: var(--color-muted); }
#page-container .hel-kvittering .cta a {
  font-family: var(--font-mono) !important; font-weight: 600; color: var(--color-heading) !important;
  text-decoration: none; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .5rem;
}
@media (max-width: 640px) {
  #page-container .hel-kvittering .row { grid-template-columns: 1fr; gap: .15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #page-container .hel-kvittering .et_pb_text_inner { animation: helKvitRise 420ms cubic-bezier(.16,1,.3,1) both; }
  #page-container .hel-kvittering .bar .ok i { animation: helKvitPulse 2.4s ease-in-out infinite; }
  @keyframes helKvitRise { from { opacity:0; transform: translateY(10px) } to { opacity:1; transform:none } }
  @keyframes helKvitPulse { 0%,100% { box-shadow:0 0 0 4px rgba(61,220,132,.16) } 50% { box-shadow:0 0 0 7px rgba(61,220,132,.06) } }
}

/* ============================================================
   COOKIEBOT — consent banner
   Cookiebot ships a royal-blue template (#1032CF) set in a system
   sans, which is off-brand on every page it appears on. The dialog
   renders in the normal DOM (not an iframe), so it is styleable
   from here rather than needing anything in the Cookiebot account.

   COMPLIANCE — do not "improve" this away: "Afvis" is kept at the
   same size, padding and solidity as "Tillad alle", differing only
   in hue. Under GDPR and Datatilsynet's guidance, rejecting must be
   as easy and as prominent as accepting, so Afvis must never be
   downgraded to a ghost/outline button. "Tillad valgte" is the
   customise path and is allowed to be the quiet one.

   The Cookiebot attribution logo is kept (their terms), only the
   dead space around it is reclaimed.
   ============================================================ */

#CybotCookiebotDialog {
  font-family: var(--font-body) !important;
  border-radius: 18px !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-ink) !important;
}
#CybotCookiebotDialog * { font-family: var(--font-body) !important; }

/* Header band: ~100px of empty space around a tiny logo. */
#CybotCookiebotDialogHeader {
  padding: 12px 22px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-bottom: 0 !important;
}
#CybotCookiebotDialogPoweredbyImage { max-height: 13px !important; opacity: .45 !important; }

/* Tabs */
#CybotCookiebotDialogNav { border-bottom: 1px solid var(--color-border) !important; }
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink {
  color: var(--color-muted) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink:hover { color: var(--color-heading) !important; }
#CybotCookiebotDialog .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: var(--color-heading) !important;
  border-bottom-color: var(--color-accent) !important;
}

/* Copy */
#CybotCookiebotDialogBodyContentTitle {
  color: var(--color-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
#CybotCookiebotDialogBodyContentText { color: var(--color-ink) !important; }
#CybotCookiebotDialogBodyEdgeMoreDetailsLink,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink { color: var(--color-accent-text) !important; }

/* Category toggles — brand red when on, neutral grey when off */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { background-color: #B9B9B9 !important; }
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--color-accent) !important; }
#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider {
  outline: 2px solid var(--color-ring) !important;
  outline-offset: 2px;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper label { color: var(--color-heading) !important; }

/* Action buttons */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: .8rem 1.35rem !important;
  border: 2px solid transparent !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* Accept.
   #E02525 og ikke brand-roed --color-accent (#EA2B2B): hvid tekst paa #EA2B2B
   giver 4,30:1, og knappens tekst er 15 px, hvor WCAG AA kraever 4,5:1. #E02525
   giver 4,71:1. Forskellen er ikke til at se, og den gaelder KUN denne knap —
   brand-roeden er uaendret alle andre steder paa sitet.
   Knappen beholder samme stoerrelse, vaegt og form som afvis-knappen; det er et
   lovkrav, at de to valg fremstaar lige tilgaengelige. */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background: #E02525 !important;
  border-color: #E02525 !important;
  color: var(--color-on-accent) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}
/* Reject — same weight as accept by law, brand black */
#CybotCookiebotDialogBodyButtonDecline {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}
#CybotCookiebotDialogBodyButtonDecline:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
/* Customise — secondary. Needs a fill: a light border alone on white
   read as plain text rather than a button. */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-heading) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover {
  border-color: var(--color-heading) !important;
  background: var(--color-surface-alt) !important;
}

/* Phone: the dialog filled the viewport and the body copy faded out
   mid-sentence. Cap it and let the content scroll instead. */
@media (max-width: 600px) {
  #CybotCookiebotDialog {
    max-height: 88vh !important;
    border-radius: 16px !important;
  }
  #CybotCookiebotDialogBodyContent { overflow-y: auto !important; }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton { padding: .75rem 1.1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton { transition: none; }
}

/* --- Desktop: corner card instead of a 900px centred modal -------------
   The centred dialog covered the hero and the quote form. As a small
   bottom-left card the page stays readable while consent is pending.
   (This is a UX/conversion change, not a Core Web Vitals one — the
   dialog is position:fixed and injected late, so it never affected
   LCP or CLS.) Phone keeps the full-width sheet styled above. */
@media (min-width: 993px) {
  #CybotCookiebotDialog {
    top: auto !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    transform: none !important;
    width: 410px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    flex-direction: column !important;
  }
  /* Long consent copy scrolls inside the card rather than growing it. */
  #CybotCookiebotDialogBodyContent { max-height: 132px !important; overflow-y: auto !important; }

  /* The four categories sit 4-across in this flex row by default, which
     collides at 410px — 2x2 instead. (Grid must go on the inner
     container: putting it on the SelectPane above squeezes this element
     and the labels overlap.) */
  #CybotCookiebotDialogBodyFieldsetInnerContainer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 8px !important;
  }
  /* Each cell must fill its grid track: the wrappers are ~50px wide
     (sized to the toggle), so centred labels like "Nødvendig" overflow
     and get clipped by the card edge. Also drops the old table dividers. */
  #CybotCookiebotDialogBodyFieldsetInnerContainer .CybotCookiebotDialogBodyLevelButtonWrapper {
    width: 100% !important;
    align-items: center !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Actions: Afvis and Tillad alle share row 1 at identical width —
     equal prominence, and shorter than three stacked buttons.
     Tillad valgte spans row 2 as the quieter customise path. */
  #CybotCookiebotDialogBodyButtonsWrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: auto !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton { width: 100% !important; margin: 0 !important; }
  #CybotCookiebotDialogBodyButtonDecline { grid-column: 1 !important; grid-row: 1 !important; }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { grid-column: 2 !important; grid-row: 1 !important; }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }
}

/* ============================================================
   PROCES-SEKTION SOM SPLIT  (.hel-proces-split på sektionen)
   Billede til venstre, overskrift og de fire trin lodret til højre.

   Bruger IKKE .hel-split-section: den tvinger background:#fff, hvilket
   gør hvid tekst usynlig på det mørke procesbånd. Se commit-historik,
   det kostede en live-fejl at finde ud af.

   Vedligehold i Divi: klassen sættes på SEKTIONEN. Hvert trin er sit eget
   Text-modul med <span class="hel-step-num">, billedet er et rigtigt
   Image-modul. Ingen :nth-child, så moduler kan flyttes i builderen
   uden at layoutet knækker.
   ============================================================ */

#page-container .hel-proces-split .et_pb_row {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center !important;
  max-width: 1320px !important;
}
#page-container .hel-proces-split .et_pb_row > .et_pb_column {
  width: auto !important; max-width: none !important;
  margin: 0 !important; flex: none !important;
}
#page-container .hel-proces-split .et_pb_image,
#page-container .hel-proces-split .et_pb_image .et_pb_image_wrap { width: 100% !important; }
#page-container .hel-proces-split .et_pb_image img {
  width: 100% !important; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px;
}

/* Højre kolonne bliver selv et gitter: overskrift og lead i fuld bredde,
   de fire trin i 2x2 nedenunder.

       BILLEDE      Overskrift
                    Lead
                    01   02
                    03   04

   Trinnene beholder deres nuvaerende udseende, det store outline-nummer
   oeverst med titel og tekst under. De flyttes kun, de laves ikke om. */
#page-container .hel-proces-split .et_pb_row > .et_pb_column:has(.hel-step) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 2.25rem;
  align-content: start;
}
/* alt der ikke er et trin, altsaa overskrift og lead, fylder begge spalter */
#page-container .hel-proces-split .et_pb_column > .et_pb_text:not(.hel-step) {
  grid-column: span 2;
  margin: 0 !important;
}
#page-container .hel-proces-split .hel-step { margin: 0 !important; }

/* Overskriften i højre kolonne skal ikke have procesbåndets centrering */
#page-container .hel-proces-split .et_pb_text,
#page-container .hel-proces-split .et_pb_text .et_pb_text_inner { text-align: left !important; }

@media (max-width: 900px) {
  #page-container .hel-proces-split .et_pb_row {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  /* billedet først på mobil */
  #page-container .hel-proces-split .et_pb_row > .et_pb_column:has(.et_pb_image) { order: -1; }
}
/* under 560 px giver 2x2 for lidt plads, saa trinnene stables */
@media (max-width: 560px) {
  #page-container .hel-proces-split .et_pb_row > .et_pb_column:has(.hel-step) {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }
  #page-container .hel-proces-split .et_pb_column > .et_pb_text:not(.hel-step) { grid-column: span 1; }
}

/* Tilgængelighed: telefonlinket i topbaren stod hvidt midt i hvid broedtekst og
   var derfor kun adskilt af farve — 1,55:1 mod teksten omkring, hvilket dumper
   auditten [link-in-text-block]. En understregning goer det synligt uden farve.
   Kun i topbaren; telefonlinks i knapper er allerede tydelige som knapper. */
#page-container .hel-topbar a[href^="tel:"],
.hx-topbar a[href^="tel:"],
#top-header a[href^="tel:"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}