/*
Theme Name: sited
Theme URI: https://sited.dk/
Author: Sited I/S
Description: Tema for sited.dk. CSS er kopieret ordret fra forsiden (index.html). Ret ikke design her uden også at rette forsiden.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: sited
*/

/* Skrifttyper hostet selv (før Google Fonts: to ekstra forbindelser, der blokerede visningen).
   Inter og Space Grotesk, SIL Open Font License 1.1. Variable woff2-filer fra Google Fonts, latin + latin-ext.
   De to latin-filer preloades i header.php. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ================================================================
   1) CSS kopieret ordret fra den nuværende forside (index.html)
   ================================================================ */
  :root{
    --ink:#0E1013;
    --surface:#171A21;
    --surface-2:#1D212A;
    --paper:#FFFFFF;
    --paper-dim:#F6F6F8;
    --text:#14161A;
    --text-muted:#666B74;
    --on-dark:#F3F3F5;
    --on-dark-muted:#9497A0;
    --line:#E7E7EA;
    --line-dark:rgba(255,255,255,0.09);
    --accent:#FF6B3D;
    --accent-soft:#FFB088;
    --ok:#22A55B;
    --radius-sm:8px;
    --radius:14px;
    --maxw:1160px;
    --tap:48px;
  }

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

  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--paper);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    font-size:16px;
  }

  h1,h2,h3,h4{
    margin:0;
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1.1;
  }

  a{color:inherit;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2.5px solid var(--accent);
    outline-offset:3px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .eyebrow-on-dark{color:var(--accent-soft);}

  /* ===== NAV ===== */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:var(--ink);
    border-bottom:1px solid var(--line-dark);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto;
    padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between;
    height:56px;
  }
  .brand{display:flex; align-items:center; text-decoration:none; color:#fff;}
  .brand-mark{width:34px; height:auto; flex-shrink:0; display:block; transition:transform 0.5s ease;}
  .brand-mark.spinning{transform:rotate(360deg);}
  @keyframes logo-spin-once{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .brand-mark.spin-once{animation:logo-spin-once 0.6s ease;}
  .brand-mark-footer{width:28px;}

  nav.links{display:flex; align-items:center; gap:30px;}
  nav.links a{color:#D4D4D9; text-decoration:none; font-size:0.92rem; font-weight:500; transition:color .15s ease;}
  nav.links a:not(.cta-link):hover{color:#fff;}
  nav.links a.cta-link{
    background:var(--accent); color:#0E1013;
    padding:10px 18px; border-radius:999px; font-weight:700;
    transition:background .15s ease, transform .15s ease;
  }
  @media (hover:hover){
    nav.links a.cta-link:hover{background:var(--accent-soft); transform:translateY(-1px);}
  }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:var(--tap); height:var(--tap);
    background:none; border:none; cursor:pointer; margin-right:-12px;
  }
  .menu-toggle span{
    display:block; position:relative; width:20px; height:16px;
  }
  .menu-toggle span::before, .menu-toggle span::after, .menu-toggle .mid{
    content:""; position:absolute; left:0; right:0; height:2px;
    background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;
  }
  .menu-toggle span::before{top:0;}
  .menu-toggle span .mid{top:7px;}
  .menu-toggle span::after{top:14px;}
  .menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}
  .menu-toggle[aria-expanded="true"] span .mid{opacity:0;}

  @media (max-width:820px){
    nav.links{
      position:fixed; top:56px; left:0; right:0; bottom:0;
      background:var(--ink);
      flex-direction:column; align-items:stretch;
      padding:18px 20px 32px; gap:4px;
      transform:translateX(100%);
      transition:transform .25s ease;
      overflow-y:auto;
    }
    nav.links.open{transform:translateX(0);}
    nav.links a{
      padding:15px 4px; font-size:1.05rem;
      border-bottom:1px solid var(--line-dark);
      min-height:var(--tap); display:flex; align-items:center;
    }
    nav.links a.cta-link{
      margin-top:14px; justify-content:center; border-bottom:none;
    }
    .menu-toggle{display:flex;}
  }
  @media (min-width:821px){.menu-toggle{display:none;}}

  /* ===== HERO ===== */
  .hero{
    position:relative;
    background:var(--ink);
    margin-top:-57px;
    padding:121px 0 56px;
    overflow:hidden;
  }
  .hero-wrap{display:block;}
  .hero-inner{position:relative; max-width:560px;}
  @media (min-width:900px){
    .hero-wrap{display:flex; align-items:stretch; gap:24px;}
    .hero-inner{flex-shrink:0; display:flex; flex-direction:column; justify-content:center;}
  }
  .hero-network{
    display:none; flex:1; min-height:340px;
    -webkit-mask-image:radial-gradient(ellipse at center, black 35%, transparent 78%);
    mask-image:radial-gradient(ellipse at center, black 35%, transparent 78%);
  }
  @media (min-width:900px){.hero-network{display:block;}}
  .hero h1{
    font-size:clamp(2.1rem, 8vw, 3.4rem);
    color:var(--on-dark);
  }
  .hero h1 .accent, .lp-hero-photo h1 .accent{
    background:linear-gradient(100deg, #F0783E 0%, #F0783E 40%, #FFCBA0 50%, #F0783E 60%, #F0783E 100%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:shine-sweep 7s linear infinite;
  }
  @keyframes shine-sweep{
    from{background-position:0% 0;}
    to{background-position:-200% 0;}
  }
  @media (prefers-reduced-motion:reduce){
    .hero h1 .accent, .lp-hero-photo h1 .accent{animation:none; background-position:50% 0;}
  }
  .hero p.lede{
    margin-top:20px;
    font-size:1.05rem;
    color:var(--on-dark-muted);
    max-width:46ch;
    line-height:1.65;
  }
  .hero-ctas{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:var(--tap);
    padding:0 24px;
    border-radius:999px;
    font-weight:700; font-size:0.95rem;
    text-decoration:none; border:1.5px solid transparent;
    cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-arrow{width:13px; height:13px; flex-shrink:0; transition:transform .2s ease;}
  .btn-solid{background:var(--accent); color:#100C08;}
  .btn-outline{border-color:rgba(243,243,245,0.3); color:var(--on-dark);}
  .btn-outline-light{border-color:var(--line); color:var(--text);}
  @media (hover:hover){
    .btn:hover{transform:translateY(-2px);}
    .btn:hover .btn-arrow{transform:translateX(3px);}
    .btn-solid:hover{background:var(--accent-soft);}
    .btn-outline:hover{border-color:rgba(243,243,245,0.6);}
    .btn-outline-light:hover{border-color:var(--text-muted);}
  }
  /* .btn-fill: en outline-knap, der fyldes med hvidt fra venstre ved hover (sort tekst) */
  .btn-fill{position:relative; isolation:isolate; overflow:hidden; transition:transform .15s ease, border-color .35s ease, color .35s ease;}
  .btn-fill::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:#fff; transform:scaleX(0); transform-origin:left center;
    transition:transform .4s cubic-bezier(.22,.8,.3,1);
  }
  .btn-fill:focus-visible::before{transform:scaleX(1);}
  .btn-fill:focus-visible{color:#000; border-color:#fff;}
  @media (hover:hover){
    .btn-fill:hover::before{transform:scaleX(1);}
    .btn.btn-fill:hover{color:#000; border-color:#fff;}
  }
  @media (prefers-reduced-motion:reduce){.btn-fill, .btn-fill::before{transition:none;}}


  /* ===== TRUST STRIP ===== */
  .trust-strip{
    background:var(--paper-dim);
    border-bottom:1px solid var(--line);
  }
  .trust-strip-inner{
    display:flex; flex-wrap:wrap;
    gap:10px 28px;
    padding:16px 20px;
    justify-content:center;
  }
  .trust-item{
    display:flex; align-items:center; gap:8px;
    font-size:0.85rem; font-weight:600; color:var(--text-muted);
    white-space:nowrap;
  }
  .trust-item svg{width:14px; height:14px; flex-shrink:0; color:var(--accent);}
  @media (max-width:760px){.trust-strip{display:none;}}

  /* ===== SECTION SHELL ===== */
  section{padding:60px 0;}
  @media (min-width:640px){section{padding:88px 0;}}
  .section-head{max-width:560px; margin-bottom:36px;}
  @media (min-width:640px){.section-head{margin-bottom:48px;}}
  .section-head h2{font-size:clamp(1.6rem, 5vw, 2.1rem); margin-top:12px;}
  .section-head p{margin-top:14px; color:var(--text-muted); font-size:1rem;}

  /* ===== IKON-BOKS (bruges i Kunder) ===== */
  .svc-icon{
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .svc-icon svg{width:18px; height:18px;}


  /* ===== KUNDER ===== */
  .cases-section{background:var(--paper-dim);}
  .cases-fork{
    display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    border:1px solid var(--line); border-radius:20px; overflow:hidden;
    box-shadow:0 1px 2px rgba(14,16,19,0.04);
  }
  .case-col{padding:32px; display:flex; flex-direction:column; min-width:0;}
  .case-col--quote{background:var(--ink); color:var(--on-dark);}
  .case-col--list{background:var(--paper); color:var(--text);}
  .case-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px;}
  .case-label{font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding-top:9px;}
  .case-col--quote .case-label{color:var(--on-dark-muted);}
  .case-col--list .case-label{color:var(--text-muted);}
  .case-col--quote .svc-icon{background:rgba(255,255,255,0.08);}
  .case-col--quote .svc-icon svg{color:var(--accent-soft);}
  .case-col--list .svc-icon{background:rgba(14,16,19,0.06);}
  .case-col--list .svc-icon svg{color:var(--accent);}
  blockquote.case-quote{
    margin:0 0 26px; flex-grow:1;
    font-family:'Space Grotesk',sans-serif; font-weight:500;
    font-size:18px; line-height:1.55; letter-spacing:-0.005em; color:var(--on-dark);
  }
  .case-quote .hl, .lp-quote .hl{color:var(--accent-soft);}
  .case-author{padding-top:20px; border-top:1px solid var(--line-dark);}
  .case-author strong{display:block; font-size:0.95rem; font-weight:700;}
  .case-author a{display:inline-flex; align-items:center; gap:7px; font-size:0.83rem; color:var(--on-dark-muted); text-decoration:none; transition:color .15s ease;}
  .case-author a:hover{color:var(--accent-soft);}
  .case-author a svg{width:11px; height:11px;}

  .showcase{display:grid; grid-template-columns:1fr 1fr; gap:22px; flex-grow:1; align-content:center;}
  .show-item{display:block; text-decoration:none; color:var(--text); min-width:0;}
  .show-stage{position:relative; padding:0 18px 22px 0;}
  .browser{
    background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden;
    box-shadow:0 1px 2px rgba(14,16,19,0.05), 0 12px 28px -12px rgba(14,16,19,0.28);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .browser-bar{display:flex; align-items:center; gap:5px; padding:7px 9px; border-bottom:1px solid var(--line); background:#FBFBFC;}
  .browser-bar i{width:7px; height:7px; border-radius:50%; background:#DCDCE0; flex-shrink:0;}
  .browser-url{
    flex:1; margin-left:6px; min-width:0;
    font-size:10px; font-weight:500; color:var(--text-muted);
    background:var(--paper-dim); border-radius:5px; padding:2px 8px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .browser img{width:100%; height:auto; aspect-ratio:800/505; object-fit:cover; object-position:top;}
  .phone{
    position:absolute; right:0; bottom:0; width:23%;
    background:var(--ink); border-radius:12px; padding:3px;
    box-shadow:0 14px 28px -10px rgba(14,16,19,0.45);
    transition:transform .25s ease;
  }
  .phone img{width:100%; height:auto; aspect-ratio:220/440; object-fit:cover; object-position:top; border-radius:9px;}
  .show-meta{display:flex; align-items:center; gap:10px; margin-top:12px;}
  .show-meta div{flex:1; min-width:0;}
  .show-meta strong{display:block; font-size:0.96rem; font-weight:700; line-height:1.3;}
  .show-meta div span{display:block; font-size:0.83rem; color:var(--text-muted);}
  .show-arrow{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:var(--paper); border:1px solid var(--line); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .show-arrow svg{width:12px; height:12px;}
  @media (hover:hover){
    .show-item:hover .browser{transform:translateY(-4px); box-shadow:0 1px 2px rgba(14,16,19,0.05), 0 20px 36px -14px rgba(14,16,19,0.35);}
    .show-item:hover .phone{transform:translateY(-8px) rotate(2deg);}
    .show-item:hover .show-arrow{background:var(--accent); border-color:var(--accent); color:#100C08;}
  }
  @media (max-width:760px){
    .cases-fork{grid-template-columns:minmax(0,1fr);}
    .case-col{padding:36px 24px;}
    blockquote.case-quote{font-size:17.5px;}
    .showcase{grid-template-columns:1fr; gap:30px;}
  }

  /* ===== PRICING ===== */
  .pricing-section{background:var(--paper);}
  .pricing-section .section-head{margin-bottom:18px;}
  .pricing-panel{
    background:var(--ink); color:var(--on-dark);
    border-radius:20px; padding:16px;
    display:grid; grid-template-columns:1fr; gap:16px;
    box-shadow:0 1px 2px rgba(14,16,19,0.04);
  }
  @media (min-width:640px){.pricing-panel{grid-template-columns:1fr 1fr;}}
  @media (min-width:980px){.pricing-panel{grid-template-columns:1.15fr 1fr 1fr;}}

  .price-intro{padding:20px 12px 12px;}
  @media (min-width:640px){.price-intro{grid-column:1 / -1; padding:24px 20px 8px;}}
  @media (min-width:980px){.price-intro{grid-column:auto; padding:28px 24px 24px 20px;}}
  .price-intro h2{font-size:clamp(1.6rem, 5vw, 2.1rem); margin-bottom:22px;}
  .price-intro p{color:var(--on-dark-muted); font-size:0.98rem; margin:0 0 16px; max-width:52ch;}
  .price-intro p:last-child{margin-bottom:0;}

  .price-card{
    background:var(--paper); color:var(--text);
    border-radius:var(--radius); padding:28px 24px 22px;
    display:flex; flex-direction:column; min-width:0;
  }
  .price-card h3{
    font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600;
    letter-spacing:-0.01em; margin:0;
  }
  .price-amount{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px;
    margin:18px 0 16px;
  }
  .price-amount .num{
    font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:clamp(2.2rem, 6vw, 2.5rem); line-height:1; letter-spacing:-0.03em; white-space:nowrap;
  }
  .price-amount .pre, .price-amount .post{font-size:0.88rem; font-weight:600; color:var(--text-muted);}
  .price-card .price-desc{color:var(--text-muted); font-size:0.95rem; margin:0 0 20px;}
  .price-list{list-style:none; padding:0; margin:0 0 26px; flex-grow:1;}
  .price-list li{
    display:flex; gap:12px; align-items:flex-start;
    padding:11px 0; border-top:1px solid var(--line);
    font-size:0.94rem; line-height:1.5;
  }
  .price-list li:first-child{border-top:none; padding-top:0;}
  .price-list .chk{
    flex-shrink:0; width:20px; height:20px; border-radius:50%; margin-top:1px;
    background:rgba(34,165,91,0.14); color:var(--ok);
    display:flex; align-items:center; justify-content:center;
  }
  .price-list .chk svg{width:11px; height:11px; display:block;}
  .price-card .btn{width:100%;}

  /* Fremhævet kort: kant-glow der kører rundt om kortet */
  @property --beam{syntax:'<angle>'; initial-value:0deg; inherits:false;}
  @keyframes beam-spin{to{--beam:360deg;}}
  .price-feature{position:relative; isolation:isolate; display:flex; min-width:0;}
  .price-feature > .price-card{flex:1;}
  .price-feature::before, .price-feature::after{
    content:""; position:absolute; inset:-2px; z-index:-1;
    border-radius:calc(var(--radius) + 2px);
    background:conic-gradient(from var(--beam),
      transparent 0deg 220deg,
      rgba(255,107,61,0.4) 275deg,
      var(--accent) 330deg,
      var(--accent-soft) 350deg,
      transparent 360deg);
    animation:beam-spin 6s linear infinite;
  }
  .price-feature::before{filter:blur(12px); opacity:0.95;}

  .nowrap{white-space:nowrap;}

  .price-note{
    display:flex; gap:10px; margin:18px 4px 0;
    font-size:0.85rem; color:var(--text-muted);
  }

  /* ===== ABOUT ===== */
  #om-os{background:var(--paper-dim);}
  .about-grid{display:grid; grid-template-columns:1fr; gap:36px;}
  @media (min-width:820px){.about-grid{grid-template-columns:0.85fr 1.15fr; gap:56px;}}
  .about-copy p{color:var(--text-muted); font-size:1rem; margin-bottom:16px;}
  .people{display:flex; flex-direction:column; gap:14px;}
  .person-card{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:20px;
  }
  .person-card-head{display:flex; align-items:center; gap:14px;}
  .person-photo, .person-photo-fallback{
    width:64px; height:64px; border-radius:50%; flex-shrink:0;
  }
  .person-photo{object-fit:cover; background:var(--ink); display:block;}
  .person-photo-fallback{
    background:var(--ink); color:var(--accent-soft);
    align-items:center; justify-content:center;
    font-weight:800; font-size:1.05rem;
  }
  .person-info{flex:1; min-width:0;}
  .person-card h4{font-size:1.05rem; font-weight:700; margin:0;}
  .person-card .role{color:var(--accent); font-size:0.85rem; font-weight:600; display:block; margin-top:2px;}
  .person-card p{color:var(--text-muted); font-size:0.9rem; margin:14px 0 0;}

  /* ===== CONTACT ===== */
  .contact-section{background:var(--ink); color:var(--on-dark);}
  .contact-grid{display:grid; grid-template-columns:1fr; gap:32px;}
  @media (min-width:820px){.contact-grid{grid-template-columns:0.9fr 1.1fr; gap:56px;}}
  .contact-info h2{font-size:clamp(1.6rem,5vw,2rem); margin-top:12px; margin-bottom:14px;}
  .contact-info p{color:var(--on-dark-muted); font-size:0.98rem; margin-bottom:26px;}
  .contact-detail{padding:13px 0; border-top:1px solid var(--line-dark); font-size:0.94rem;}
  .contact-detail:first-of-type{border-top:none;}
  .contact-detail .k{color:var(--on-dark-muted); margin-right:8px;}

  form.contact-form{
    background:var(--surface); border:1px solid var(--line-dark);
    border-radius:var(--radius); padding:24px;
    display:flex; flex-direction:column; gap:16px;
  }
  .field{display:flex; flex-direction:column; gap:7px;}
  .field label{font-size:0.83rem; color:var(--on-dark-muted);}
  .field input, .field textarea{
    background:var(--ink); border:1px solid var(--line-dark);
    border-radius:var(--radius-sm); padding:13px 14px;
    color:var(--on-dark); font-family:inherit; font-size:1rem;
    min-height:var(--tap); resize:vertical;
  }
  .field textarea{min-height:100px;}
  .field input:focus, .field textarea:focus{border-color:var(--accent);}
  form.contact-form .btn{margin-top:2px;}

  /* ===== FOOTER ===== */
  footer{background:var(--ink); border-top:1px solid var(--line-dark); padding:32px 0;}
  .footer-inner{display:flex; flex-direction:column; gap:20px;}
  @media (min-width:640px){.footer-inner{flex-direction:row; justify-content:space-between; align-items:center;}}
  .footer-links{display:flex; flex-wrap:wrap; align-items:center; gap:20px;}
  .footer-links a{color:var(--on-dark-muted); text-decoration:none; font-size:0.88rem;}
  .footer-copy{color:#4A4D54; font-size:0.8rem; margin-top:18px;}
  /* ===== COOKIE-BANNER ===== */
  .cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
    max-width:520px; margin-left:auto;
    background:var(--ink); color:var(--on-dark);
    border:1px solid var(--line-dark); border-radius:var(--radius);
    padding:20px; box-shadow:0 18px 40px -12px rgba(0,0,0,0.45);
  }
  .cookie-banner[hidden]{display:none;}
  .cookie-banner p{margin:0 0 16px; font-size:0.9rem; color:var(--on-dark-muted); line-height:1.55;}
  .cookie-banner strong{color:var(--on-dark);}
  .cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .cookie-actions .btn{min-height:42px; padding:0 20px; font-size:0.9rem;}
  .cookie-actions .btn-outline{background:transparent;}

/* ================================================================
   2) CSS kopieret ordret fra den tidligere forside, til sektioner
      der kun findes på undersiderne (Ydelser + Sådan foregår det)
   ================================================================ */
  /* ===== SERVICES ===== */
  .svc-fork{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
  }
  .svc-path{position:relative; padding:32px 32px 30px; display:flex; flex-direction:column;}
  .svc-path--existing{background:var(--ink); color:var(--on-dark);}
  .svc-path--new{background:var(--paper-dim); color:var(--text);}
  .svc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px;}
  .svc-icon{
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .svc-path--existing .svc-icon{background:rgba(255,255,255,0.08);}
  .svc-path--new .svc-icon{background:rgba(14,16,19,0.06);}
  .svc-icon svg{width:18px; height:18px;}
  .svc-path--existing .svc-icon svg{color:var(--accent-soft);}
  .svc-path--new .svc-icon svg{color:var(--accent);}
  .svc-label{
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase; padding-top:9px;
  }
  .svc-path--existing .svc-label{color:var(--on-dark-muted);}
  .svc-path--new .svc-label{color:var(--text-muted);}
  .svc-path h3{
    font-family:'Space Grotesk',sans-serif; font-size:27px; font-weight:600;
    letter-spacing:-0.01em; margin:0 0 16px;
  }
  .svc-path p.svc-desc{
    font-family:'Inter',sans-serif; font-size:15.5px; line-height:1.65;
    margin:0 0 26px; flex-grow:1;
  }
  .svc-path--existing p.svc-desc{color:var(--on-dark-muted);}
  .svc-path--new p.svc-desc{color:var(--text-muted);}
  .svc-cta{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
    padding:13px 22px; border-radius:100px;
    background:var(--accent); color:#100C08; text-decoration:none;
    transition:background .15s ease, transform .15s ease;
  }
  .svc-cta:hover{background:var(--accent-soft); transform:translateY(-1px);}
  .svc-cta svg{width:13px; height:13px; transition:transform .15s ease;}
  .svc-cta:hover svg{transform:translateX(2px);}
  .svc-divider{
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:var(--line); z-index:2;
  }
  .svc-divider-badge{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:var(--paper); border:1px solid var(--line); color:var(--text-muted);
    font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:760px){
    .svc-fork{grid-template-columns:1fr;}
    .svc-divider{left:0; right:0; top:50%; bottom:auto; width:auto; height:1px;}
    .svc-divider-badge{top:50%; left:50%;}
    .svc-path{padding:44px 28px;}
  }


  /* ===== YDELSER: seks kort (/ydelser/) ===== */
  .svc-grid{display:grid; gap:16px; grid-template-columns:1fr;}
  @media (min-width:640px){.svc-grid{grid-template-columns:repeat(2, 1fr);}}
  @media (min-width:980px){.svc-grid{grid-template-columns:repeat(3, 1fr);}}
  .svc-card{
    position:relative; display:flex; flex-direction:column;
    padding:28px 28px 26px; border-radius:20px;
    background:var(--paper-dim); color:var(--text);
    border:1px solid var(--line);
    transition:border-color .15s ease, transform .15s ease;
  }
  .svc-card .svc-icon{background:rgba(14,16,19,0.06);}
  .svc-card .svc-icon svg{color:var(--accent);}
  .svc-card .svc-label{color:var(--text-muted);}
  .svc-card h2{
    font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:600;
    letter-spacing:-0.01em; margin:0 0 12px;
  }
  .svc-card p.svc-desc{font-size:15px; line-height:1.65; margin:0 0 22px; flex-grow:1; color:var(--text-muted);}
  /* Fremhævet kort (Ny hjemmeside): samme grå som de andre kort, med samme kant-glow som "Funktionel prototype" på forsiden */
  .svc-feature{position:relative; isolation:isolate; display:flex; min-width:0;}
  .svc-feature > .svc-card{flex:1; border-color:transparent;}
  .svc-feature::before, .svc-feature::after{
    content:""; position:absolute; inset:-2px; z-index:-1; border-radius:22px;
    background:conic-gradient(from var(--beam),
      transparent 0deg 220deg,
      rgba(255,107,61,0.4) 275deg,
      var(--accent) 330deg,
      var(--accent-soft) 350deg,
      transparent 360deg);
    animation:beam-spin 6s linear infinite;
  }
  .svc-feature::before{filter:blur(12px); opacity:0.95;}
  /* Hele kortet er klikbart */
  .svc-card .svc-cta::after{content:""; position:absolute; inset:0; border-radius:20px;}
  @media (hover:hover){
    .svc-card:hover{border-color:var(--accent); transform:translateY(-2px);}
  }

  /* ===== FORLØBET: tidslinje med seks trin (/ydelser/) ===== */
  .timeline-section{background:var(--paper);}
  .steps{margin:0 auto; max-width:960px; position:relative;}
  .steps-list{list-style:none; margin:0; padding:0;}
  /* Linjen mellem trinene: prikket (ikke nået) + solid (passeret) + markør ved skærmens midte.
     --line-top / --line-bottom / --fill sættes af main.js ud fra første og sidste prik. */
  .steps{--line-x:50%; --line-top:40px; --line-bottom:40px; --fill:0px;}
  .steps-line, .steps-fill, .steps-head{position:absolute; left:var(--line-x); pointer-events:none;}
  .steps-line{
    top:calc(var(--line-top) + var(--fill)); bottom:var(--line-bottom);
    width:3px; margin-left:-1.5px;
    background-image:radial-gradient(circle, rgba(255,107,61,0.38) 1.3px, transparent 1.6px);
    background-size:3px 12px; background-repeat:repeat-y;
  }
  .steps-fill{
    top:var(--line-top); height:var(--fill);
    width:2px; margin-left:-1px; border-radius:2px;
    background:linear-gradient(to bottom, var(--accent) calc(100% - 48px), var(--accent-soft));
  }
  .steps-head{
    top:calc(var(--line-top) + var(--fill));
    width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--paper), 0 0 0 4px rgba(255,107,61,0.25);
    opacity:0; transition:opacity .3s ease; z-index:2;
  }
  .steps-head::after{
    content:""; position:absolute; inset:-3px; border-radius:50%;
    background:rgba(255,107,61,0.35);
    animation:head-pulse 2.2s ease-out infinite; z-index:-1;
  }
  @keyframes head-pulse{0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(2.6); opacity:0;}}
  .steps.is-tracking .steps-head{opacity:1;}
  .step{
    position:relative; display:grid; grid-template-columns:1fr 64px 1fr;
    align-items:center; padding:44px 0;
  }
  .step-dot{
    grid-column:2; grid-row:1; justify-self:center;
    width:14px; height:14px; border-radius:50%;
    background:var(--paper); border:2.5px solid var(--accent);
    box-shadow:0 0 0 6px var(--paper);
    position:relative; z-index:1;
    transition:background-color .25s ease, scale .25s ease, box-shadow .25s ease;
  }
  .step.is-passed .step-dot{background:var(--accent);}
  .step.is-current .step-dot{scale:1.25; box-shadow:0 0 0 6px var(--paper), 0 0 0 9px rgba(255,107,61,0.18);}
  .step-text, .step-media{grid-row:1; width:100%; max-width:380px;}
  .step-media{display:flex; justify-content:center;}
  .step-media img{height:auto; width:100%; filter:drop-shadow(0 18px 28px rgba(14,16,19,0.14));}
  .step:nth-child(odd) .step-text{grid-column:1; justify-self:end; padding-right:12px;}
  .step:nth-child(odd) .step-media{grid-column:3; justify-self:start; padding-left:12px;}
  .step:nth-child(even) .step-text{grid-column:3; justify-self:start; padding-left:12px;}
  .step:nth-child(even) .step-media{grid-column:1; justify-self:end; padding-right:12px;}
  .step-num{font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent);}
  .step-text h3{
    font-family:'Space Grotesk',sans-serif; font-size:clamp(1.45rem, 3.5vw, 1.75rem);
    font-weight:700; letter-spacing:-0.02em; margin-top:6px;
  }
  .step-text p{margin:14px 0 0; color:var(--text-muted); font-size:0.98rem;}
  .step-text p + p{margin-top:10px;}
  .step-text strong{color:var(--text); font-weight:600;}
  .step-text .nowrap{white-space:nowrap; color:var(--text); font-weight:600;}
  .ill-wide{max-width:340px;}
  .ill-mid{max-width:260px;}
  .ill-small{max-width:210px;}
  .ill-envelope{max-width:220px;}
  @media (max-width:760px){
    .steps{--line-x:7px;}
    .step{grid-template-columns:14px 1fr; column-gap:22px; row-gap:22px; align-items:start; padding:30px 0;}
    .step-dot{grid-column:1; grid-row:1; margin-top:4px;}
    .step:nth-child(n) .step-text{grid-column:2; grid-row:1; justify-self:start; padding:0; max-width:none;}
    .step:nth-child(n) .step-media{grid-column:2; grid-row:2; justify-self:start; justify-content:flex-start; padding:0; max-width:none;}
    .ill-wide{max-width:300px;}
    .ill-mid{max-width:240px;}
    .ill-small{max-width:170px;}
    .ill-envelope{max-width:190px;}
  }
  .timeline-cta{
    margin:40px auto 0; max-width:960px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
    padding-top:36px; border-top:1px solid var(--line);
  }
  .timeline-cta p{margin:0; color:var(--text-muted); font-size:1rem; max-width:44ch;}


  /* ===== PROCESS ===== */
  .process-section{background:var(--paper-dim);}
  .process-list{display:flex; flex-direction:column; gap:0;}
  @media (min-width:900px){
    .process-list{flex-direction:row; gap:16px;}
    .process-item{flex:1;}
  }
  .process-item{
    padding:20px 0;
    border-top:1px solid var(--line);
    display:flex; gap:16px; align-items:flex-start;
  }
  @media (min-width:900px){
    .process-item{
      flex-direction:column; gap:14px; border-top:none;
      border-left:2px solid var(--line); padding:0 0 0 18px;
    }
  }
  .process-item .step-no{
    flex-shrink:0; color:var(--accent); font-weight:800; font-size:0.95rem;
  }
  .process-item h3{font-size:1.02rem; margin-bottom:6px; font-weight:700;}
  .process-item p{color:var(--text-muted); margin:0; font-size:0.92rem;}


/* ================================================================
   3) Undersider
   ================================================================ */
  /* Sidens hovedoverskrift er <h1> på undersiderne (SEO), men skal se ud
     præcis som <h2> gør på forsiden. Reglerne er spejlet fra h2-reglerne. */
  .section-head h1{font-size:clamp(1.6rem, 5vw, 2.1rem); margin-top:12px;}
  .price-intro h1{font-size:clamp(1.6rem, 5vw, 2.1rem); margin-bottom:22px;}
  .contact-info h1{font-size:clamp(1.6rem,5vw,2rem); margin-top:12px; margin-bottom:14px;}

  /* Eyebrow-teksterne er afsnit (<p>) i editoren i stedet for <span>. Sektionernes afsnits-regler
     (fx .section-head p) må ikke ændre dem, så her sættes eyebrow-værdierne igen med højere specificitet. */
  .wrap p.eyebrow{margin:0; max-width:none; font-size:0.78rem; color:var(--accent);}
  .wrap p.eyebrow-on-dark{color:var(--accent-soft);}

  /* Om os-overskriften havde inline style på forsiden – nu en klasse, så teksten kan redigeres i editoren */
  .about-title{margin-top:12px; margin-bottom:16px; font-size:clamp(1.6rem,5vw,2.1rem);}

  /* Prislisterne er almindelige lister i editoren; flueben-ikonet tilføjes af assets/main.js */
  .price-list{list-style:none;}


/* ================================================================
   4) Søgeords-sider, blog, brødkrummer, relaterede links
   ================================================================ */
  /* Brødkrummer øverst på søgeords-sider og blogindlæg */
  .breadcrumbs{background:var(--paper-dim); border-bottom:1px solid var(--line); font-size:0.82rem;}
  .breadcrumbs ol{list-style:none; margin:0; padding:12px 0; display:flex; flex-wrap:wrap; gap:4px 8px;}
  .breadcrumbs li{color:var(--text-muted);}
  .breadcrumbs li + li::before{content:"/"; margin-right:8px; color:var(--line);}
  .breadcrumbs a{color:var(--text-muted); text-decoration:none;}
  .breadcrumbs a:hover{color:var(--accent);}
  .breadcrumbs [aria-current]{color:var(--text); font-weight:600;}

  /* Hero: eyebrow + H1 + indledning + knapper (kort, lys sektion) */
  .kw-hero{padding-bottom:0;}
  .kw-hero .section-head{max-width:720px; margin-bottom:0;}
  .kw-hero .section-head h1{font-size:clamp(1.9rem, 6vw, 2.8rem);}
  .kw-hero .section-head p:not(.eyebrow){font-size:1.08rem;}
  .kw-hero .hero-ctas{margin-top:24px;}

  /* Brødtekst: almindelige blokke fra editoren */
  .prose > *{max-width:760px;}  /* venstrestillet ligesom hero, men med læsevenlig linjelængde */
  .prose > * + *{margin-top:16px;}
  .prose h2{font-size:clamp(1.4rem, 4vw, 1.75rem); margin-top:48px;}
  .prose h3{font-size:1.15rem; margin-top:28px;}
  .prose h2 + *, .prose h3 + *{margin-top:12px;}
  .prose p, .prose li{color:#3A3E46; font-size:1.02rem; line-height:1.75;}
  .prose ul, .prose ol{padding-left:1.25em;}
  .prose li + li{margin-top:6px;}
  .prose a{color:#B23F0E; text-decoration:underline; text-underline-offset:2px;}  /* mørkere orange: 5,8:1 kontrast på hvid */
  .prose a:hover{color:var(--text);}
  .prose strong{color:var(--text);}
  .prose > :first-child{margin-top:0;}
  .prose .wp-block-table table{width:100%; border-collapse:collapse; font-size:0.95rem;}
  .prose .wp-block-table th, .prose .wp-block-table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left;}

  /* Kunde-case i brødteksten */
  .prose .case-box{background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
  .prose .case-box p{margin:0;}
  .prose .case-box p + p{margin-top:10px;}

  /* Kort i brødteksten (fx "Hvad vi gør" på /ydelser/seo/): gruppe "feature-grid" med grupper "feature-card" (H3 + afsnit).
     WordPress lægger (klassisk tema, ingen theme.json) en div.wp-block-group__inner-container ind i hver gruppe – den tæller ikke med i layoutet. */
  .prose .feature-grid .wp-block-group__inner-container{display:contents;}
  .prose .feature-grid{display:grid; gap:16px; counter-reset:feature;}
  @media (min-width:760px){.prose .feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
  .prose .feature-grid .feature-card{margin:0; background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
  .prose .feature-card::before{counter-increment:feature; content:counter(feature, decimal-leading-zero); display:block; margin-bottom:10px; font-size:0.8rem; font-weight:700; letter-spacing:0.08em; color:var(--accent);}
  .prose .feature-card h3, .prose .feature-card p{margin:0;}
  .prose .feature-card h3 + p{margin-top:8px;}
  .prose .feature-card p{font-size:0.97rem; line-height:1.65;}

  /* Relaterede sider / blogoversigt */
  .related-section{background:var(--paper-dim); border-top:1px solid var(--line);}
  .related-grid{list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:1fr;}
  @media (min-width:640px){.related-grid{grid-template-columns:repeat(2, 1fr);}}
  @media (min-width:980px){.related-grid{grid-template-columns:repeat(3, 1fr);}}
  .related-card{
    display:flex; flex-direction:column; gap:8px; height:100%;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; text-decoration:none; transition:border-color .15s ease, transform .15s ease;
  }
  .related-card strong{font-size:1.05rem; letter-spacing:-0.01em;}
  .related-card span{color:var(--text-muted); font-size:0.92rem; line-height:1.55;}
  .related-card time{color:var(--accent); font-size:0.78rem; font-weight:600;}
  @media (hover:hover){.related-card:hover{border-color:var(--accent); transform:translateY(-2px);}}
  .related-back{display:inline-block; margin-top:24px; font-weight:600; color:#B23F0E; text-decoration:none;}
  .related-back:hover{text-decoration:underline;}
  .kw-body .nav-links{display:flex; gap:16px; margin-top:28px;}
  .kw-body .nav-links a{color:var(--accent);}

  /* Footer: link-kolonner */
  .footer-sitemap{
    display:grid; gap:24px; grid-template-columns:repeat(2, 1fr);
    margin-top:28px; padding-top:28px; border-top:1px solid var(--line-dark);
  }
  @media (min-width:900px){.footer-sitemap{grid-template-columns:repeat(4, 1fr);}}
  .footer-sitemap ul{list-style:none; margin:10px 0 0; padding:0;}
  .footer-sitemap li + li{margin-top:6px;}
  .footer-sitemap a{color:var(--on-dark-muted); text-decoration:none; font-size:0.86rem;}
  .footer-sitemap a:hover{color:var(--accent);}
  .footer-sitemap .footer-col-title{color:var(--on-dark); font-weight:700; font-size:0.9rem;}

/* ================================================================
   5) Landingssider (Google Ads): pris i hero, tilbudsformular, referencer
   ================================================================ */
  /* Prisen i hero: fremhævet tekst (ikke en knap) */
  .kw-hero .section-head p.hero-price{
    margin-top:16px; padding-left:12px; border-left:3px solid var(--accent);
    color:var(--text); font-weight:700; font-size:1.05rem;
  }

  /* Tilbudsformular ([sited_tilbud]) – genbruger kontakt-sektionens mørke layout */
  .lp-promises{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px;}
  .lp-promises li{position:relative; padding-left:26px; color:var(--on-dark); font-size:0.98rem;}
  .lp-promises li::before{
    content:""; position:absolute; left:2px; top:0.45em; width:12px; height:7px;
    border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg);
  }
  .contact-detail a{color:var(--on-dark); text-decoration:none; display:inline-block; min-height:24px;}
  .contact-detail a:hover{color:var(--accent-soft);}
  .field .optional{color:var(--on-dark-muted); font-weight:400;}

  /* Pris-boks i brødteksten */
  .prose .lp-price{background:var(--paper-dim); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:22px 24px;}
  .prose .lp-price > * + *{margin-top:10px;}
  .prose .lp-price p:first-child{font-size:1.4rem; font-weight:800; color:var(--text); letter-spacing:-0.02em;}

  /* Referencer ([sited_referencer]): udtalelse + rigtige skærmbilleder i browser-/telefonramme (genbruger .show-item fra forsiden) */
  .lp-trust{background:var(--paper-dim); border-top:1px solid var(--line);}
  .lp-trust-grid{display:grid; gap:20px; grid-template-columns:1fr;}
  @media (min-width:980px){.lp-trust-grid{grid-template-columns:0.9fr 1.4fr; align-items:center;}}
  .lp-quote{margin:0; background:var(--ink); color:var(--on-dark); border-radius:var(--radius); padding:28px; position:relative;}
  .lp-quote blockquote{margin:0; font-size:1.02rem; line-height:1.7; color:var(--on-dark);}
  .lp-quote figcaption{margin-top:16px; font-size:0.9rem; color:var(--on-dark-muted);}
  .lp-quote figcaption strong{color:var(--on-dark);}
  .lp-projects{display:grid; gap:22px; grid-template-columns:1fr;}
  @media (min-width:560px){.lp-projects{grid-template-columns:1fr 1fr;}}
  .lp-projects-title{grid-column:1 / -1; margin:0; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted);}
  .lp-projects .phone img, .lp-projects .browser img{height:auto;}

  /* Hero med animeret illustration */
  .lp-hero-grid{display:grid; gap:28px; grid-template-columns:1fr; align-items:center;}
  @media (min-width:900px){.lp-hero-grid{grid-template-columns:1.05fr 0.95fr; gap:48px;}}
  .lp-hero-visual{margin:0; max-width:360px;}
  @media (min-width:900px){.lp-hero-visual{max-width:none;}}
  .lp-hero-visual img{width:100%; height:auto; border-radius:18px; box-shadow:0 2px 4px rgba(14,16,19,0.06), 0 28px 48px -22px rgba(14,16,19,0.45);}

  /* Hero med foto som banner: billedet fylder hele sektionen og gøres mørkere, så teksten står lyst ovenpå */
  .lp-hero.lp-hero-photo{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:var(--on-dark); padding:72px 0 80px;}
  @media (min-width:640px){.lp-hero.lp-hero-photo{padding:120px 0 128px;}}
  .lp-hero-photo .lp-hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 60%;}
  .lp-hero-photo::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg, rgba(14,16,19,0.86) 0%, rgba(14,16,19,0.72) 50%, rgba(14,16,19,0.5) 100%);
  }
  @media (max-width:899px){.lp-hero-photo::before{background:rgba(14,16,19,0.74);}}
  .lp-hero-photo .section-head h1{color:#fff;}
  .lp-hero-photo .section-head p:not(.eyebrow){color:var(--on-dark);}
  .lp-hero-photo .section-head p.hero-price{color:#fff;}
  .lp-hero-photo .wrap p.eyebrow{color:var(--accent-soft);}
  .lp-hero.lp-hero-photo + .kw-body{padding-top:60px;}   /* ophæver ".lp-hero + .kw-body", da fotoet ikke er hvidt */
  @media (min-width:640px){.lp-hero.lp-hero-photo + .kw-body{padding-top:88px;}}

  /* "Sådan foregår det" med illustrationer */
  .lp-step{flex-direction:column; gap:10px;}
  .lp-step .step-img{width:100%; max-width:200px; height:auto; aspect-ratio:auto; margin-bottom:6px;}
  @media (max-width:899px){
    .lp-step{display:grid; grid-template-columns:96px 1fr; column-gap:16px; align-items:start;}
    .lp-step .step-img{grid-row:span 2; max-width:96px; margin:0;}
  }


/* ================================================================
   6) Mega-menu i toppen (Apple-stil)
   ================================================================ */
  .mm-trigger{display:inline-flex; align-items:center; gap:8px;}
  .mm-chevron{display:none; width:10px; height:16px; opacity:.55;}
  .mm-back{display:none;}
  .mm-label{margin:0 0 14px; font-size:0.75rem; font-weight:500; color:var(--on-dark-muted); letter-spacing:0.01em;}
  .mm-panel ul{list-style:none; margin:0; padding:0;}
  nav.links .mm-big a{display:inline-block; font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:#F3F3F5;}
  nav.links .mm-small a{display:inline-block; font-size:0.86rem; font-weight:600; color:#E4E4E8;}
  nav.links .mm-panel a:hover{color:#fff;}
  .mm-big li + li{margin-top:10px;}
  .mm-small li + li{margin-top:10px;}
  .mm-panel li{opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease; transition-delay:calc(var(--i, 0) * 22ms);}
  .mm-item.open .mm-panel li, .mm-item.sub-open .mm-panel li{opacity:1; transform:none;}

  /* Sløret baggrund bag et åbent panel */
  .mm-backdrop{
    position:fixed; left:0; right:0; top:56px; bottom:0; z-index:99;
    background:rgba(14,16,19,0.35); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s .25s;
  }
  body.mm-active .mm-backdrop{opacity:1; visibility:visible; transition:opacity .25s ease;}

  @media (min-width:821px){
    nav.links{gap:28px; height:100%;}
    .mm-item{display:flex; align-items:center; height:56px;}
    .mm-item.open > .mm-trigger, nav.links .mm-trigger[aria-current]{color:#fff;}
    .mm-panel{
      position:absolute; left:0; right:0; top:100%;
      background:var(--ink); border-bottom:1px solid var(--line-dark);
      visibility:hidden; clip-path:inset(0 0 100% 0);
      transition:clip-path .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
    }
    .mm-item.open .mm-panel{visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .38s cubic-bezier(.4,0,.2,1);}
    .mm-inner{max-width:var(--maxw); margin:0 auto; padding:40px 20px 56px; display:flex; gap:64px;}
    .mm-col-main{min-width:280px;}
  }

  @media (max-width:820px){
    /* Hovedmenuen: store links som på Apple.com */
    nav.links{gap:0; padding:12px 24px 40px;}
    nav.links .mm-trigger, nav.links > a.nav-plain{
      justify-content:space-between; font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; color:#F3F3F5;
      border-bottom:none; padding:12px 0;
    }
    .mm-chevron{display:block;}
    nav.links.in-sub{overflow:hidden;}
    /* Undermenuen glider ind fra højre og dækker hovedmenuen */
    .mm-panel{
      position:absolute; inset:0; z-index:2; background:var(--ink); overflow-y:auto;
      transform:translateX(100%); visibility:hidden;
      transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
    }
    .mm-item.sub-open .mm-panel{transform:none; visibility:visible; transition:transform .3s cubic-bezier(.4,0,.2,1);}
    .mm-inner{padding:8px 24px 40px; display:flex; flex-direction:column; gap:30px;}
    .mm-back{
      display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
      min-height:var(--tap); padding:0; margin-left:-2px;
      background:none; border:none; color:var(--on-dark-muted); font:inherit; font-size:0.95rem; cursor:pointer;
    }
    .mm-back svg{width:9px; height:14px;}
    nav.links .mm-panel a{border-bottom:none; padding:6px 0; min-height:0; display:inline-flex;}
    nav.links .mm-big a{font-size:1.6rem; padding:7px 0;}
    nav.links .mm-small a{font-size:1rem;}
    .mm-big li + li, .mm-small li + li{margin-top:2px;}
    nav.links a.cta-link{margin-top:22px;}
  }
  @media (prefers-reduced-motion:reduce){
    .mm-panel, .mm-panel li, .mm-backdrop{transition:none !important;}
  }
  @media (max-width:820px){ nav.links .mm-trigger{display:flex; width:100%;} }

/* ================================================================
   7) Luft og rytme på landingssiderne
   Sektionerne skifter mellem hvid og lysegrå, så to ens sektioner aldrig støder op til hinanden:
   hero (hvid) → banner → indhold (hvid) → proces (grå) → referencer (hvid) → FAQ (grå) → links (hvid) → formular (mørk)
   ================================================================ */
  .lp-hero{padding-bottom:56px;}
  @media (min-width:640px){.lp-hero{padding-bottom:88px;}}
  .lp-trust{background:var(--paper); border-top:none;}
  /* Forsidens pris-sektion (hvid) efterfulgt af processen: processen bliver også hvid, så FAQ'en (grå) ikke støder op til grå */
  .pricing-section + .process-section{background:var(--paper); padding-top:0;}
  .kw-body.lp-faq{background:var(--paper-dim);}
  .related-section.lp-links{background:var(--paper); border-top:none;}
  /* To hvide sektioner i træk (fx brødtekst → links): ingen dobbelt luft */
  .kw-body:not(.lp-faq) + .related-section.lp-links{padding-top:0;}
  /* Sider med illustration i hero: brødteksten følger direkte uden dobbelt luft */
  .lp-hero + .kw-body{padding-top:0;}
  /* Prissektionen (hvid) lige efter hero eller før brødteksten: ingen dobbelt luft */
  .lp-hero + .pricing-section, .pricing-section + .kw-body{padding-top:0;}
  /* Brødtekst lige før prissektionen (fx Få lavet hjemmeside): ingen dobbelt luft */
  .kw-body.lp-before-price{padding-bottom:0;}
  body.mm-active header.site-nav{border-bottom-color:transparent;}

/* ================================================================
   8) Tilbudsformular i bunden + små bannere, der scroller ned til den
   ================================================================ */
  #tilbud, #forloeb, #priser, #om-os, #kontakt{scroll-margin-top:56px;}   /* plads til den faste menulinje */
  .lp-banner-section{padding:0;}
  .lp-banner{
    display:flex; flex-direction:column; gap:18px;
    background:var(--paper-dim); border:1px solid var(--line); border-left:4px solid var(--accent);
    border-radius:var(--radius); padding:22px 24px;
  }
  @media (min-width:760px){.lp-banner{flex-direction:row; align-items:center; justify-content:space-between; padding:24px 32px;}}
  .wrap p.lp-banner-title{margin:0; font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; color:var(--text);}
  .wrap p.lp-banner-text{margin:6px 0 0; font-size:0.9rem; color:var(--text-muted);}
  .lp-banner-btn{flex-shrink:0; align-self:flex-start;}
  @media (min-width:760px){.lp-banner-btn{align-self:center;}}
  .lp-banner-btn .btn-arrow{width:11px; height:13px;}
  @media (hover:hover){.lp-banner-btn:hover .btn-arrow{transform:translateY(3px);}}

/* ================================================================
   9) Guides og gode råd (parts/guides.php) – relevante blogindlæg
   ================================================================ */
  .guides-section{background:var(--paper-dim); border-top:1px solid var(--line);}
  /* Efter en grå "Relaterede sider"-sektion bliver guides hvid, så to grå sektioner ikke står i træk */
  .related-section:not(.lp-links) + .guides-section{background:var(--paper);}
  .guide-card .guide-tag{
    align-self:flex-start; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:#B23F0E; background:rgba(255,107,61,0.12); border-radius:999px; padding:3px 10px;
  }

/* ================================================================
   10) FAQ som harmonika på alle sider (bygges af assets/main.js)
   Kun spørgsmålet ses; svaret foldes ud, når man klikker på det.
   ================================================================ */
  .prose h2 + .faq{margin-top:20px;}
  .prose > .faq{max-width:none;}   /* hele bredden, så plus-ikonerne står i højre kant; svarene holder læsevenlig linjelængde */
  .faq{border-top:1px solid var(--line);}
  .faq-a > div > *{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .prose .faq h3{margin:0; font-size:1.1rem;}
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    width:100%; min-height:var(--tap); padding:20px 0;
    background:none; border:none; font:inherit; color:var(--text); text-align:left; cursor:pointer;
  }
  .faq-icon{
    position:relative; flex-shrink:0; width:32px; height:32px;
    border:1px solid #CFCFD6; border-radius:50%;
    transition:border-color .2s ease, color .2s ease;
  }
  .faq-icon::before, .faq-icon::after{
    content:""; position:absolute; top:50%; left:50%; width:11px; height:1.5px; margin:-0.75px 0 0 -5.5px;
    background:currentColor; transition:transform .3s ease;
  }
  .faq-icon::after{transform:rotate(90deg);}
  .faq-item.open .faq-icon::after{transform:rotate(0deg);}
  .faq-item.open .faq-icon{border-color:var(--accent); color:#B23F0E;}
  @media (hover:hover){.faq-q:hover .faq-icon{border-color:var(--accent); color:#B23F0E;}}
  /* Højden animeres med grid (0fr → 1fr); visibility holder links i lukkede svar ude af tab-rækkefølgen */
  .faq-a{display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .3s ease, visibility .3s;}
  .faq-item.open .faq-a{grid-template-rows:1fr; visibility:visible;}
  .faq-a > div{overflow:hidden; min-height:0;}
  .faq-a > div > * + *{margin-top:12px;}
  .faq-a > div > :last-child{padding-bottom:22px;}
  @media (prefers-reduced-motion:reduce){.faq-a, .faq-icon, .faq-icon::before, .faq-icon::after{transition:none;}}