/* ========================================
   Blocksy / WP compat overrides
   ======================================== */
html, body {
  background: #050608 !important;
}
body.csprocoat-body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}
/* Blocksy injects a site-wrapper with padding — kill it since we render full-bleed sections. */
body.csprocoat-body #main-container,
body.csprocoat-body .ct-container,
body.csprocoat-body [class*="ct-site"] {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.csprocoat-body img:not(.logo-img):not(.nav .logo img):not(.foot-col .logo img) {
  height: auto;
  max-width: 100%;
}
/* Lock down logo sizing — must beat the broad img reset above. Covers manual <img>, the_custom_logo() output, and footer logo. */
body.csprocoat-body .nav .logo,
body.csprocoat-body .nav .custom-logo-link,
body.csprocoat-body .foot-col .logo {
  display: inline-flex;
  align-items: center;
  height: 78px;
  line-height: 0;
}
@media (max-width: 768px) {
  body.csprocoat-body .nav .logo,
  body.csprocoat-body .nav .custom-logo-link { height: 52px; }
}
body.csprocoat-body .nav .logo img,
body.csprocoat-body .nav .custom-logo,
body.csprocoat-body .nav .custom-logo-link img,
body.csprocoat-body .foot-col .logo img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  filter: none;
}
body.csprocoat-body .foot-col .logo {
  height: 56px;
}
body.csprocoat-body a { text-decoration: none; }

/* Force light text on dark BG — Blocksy theme defaults paint headings dark blue. */
body.csprocoat-body,
body.csprocoat-body h1,
body.csprocoat-body h2,
body.csprocoat-body h3,
body.csprocoat-body h4,
body.csprocoat-body h5,
body.csprocoat-body h6,
body.csprocoat-body p,
body.csprocoat-body li,
body.csprocoat-body span,
body.csprocoat-body .section-title,
body.csprocoat-body .service-name,
body.csprocoat-body .project-title,
body.csprocoat-body .cta-huge {
  color: #f4f6fa;
}
body.csprocoat-body .section-lead,
body.csprocoat-body .service-desc,
body.csprocoat-body .service-list,
body.csprocoat-body .hero-sub,
body.csprocoat-body .stat-label,
body.csprocoat-body .project-meta,
body.csprocoat-body .foot-col p,
body.csprocoat-body .foot-link {
  color: #8a93a3;
}
body.csprocoat-body .section-title .it,
body.csprocoat-body .cta-huge .it,
body.csprocoat-body .eyebrow {
  color: #1c8df0;
}
body.csprocoat-body .hero h1 .stroke,
body.csprocoat-body .cta-huge .stroke {
  color: transparent;
  -webkit-text-stroke: 1px #f4f6fa;
}

/* Admin-bar fix: WordPress nudges html down by 32px when admin-bar is shown — keep our fixed nav below it. */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* ========================================
   Site styles
   ======================================== */
:root{
    --bg:#050608;
    --bg-2:#0b0d12;
    --bg-3:#12161e;
    --ink:#f4f6fa;
    --ink-dim:#8a93a3;
    --ink-faint:#4a5260;
    --blue:#1c8df0;
    --blue-deep:#0a5fb8;
    --blue-glow:rgba(28,141,240,.35);
    --line:rgba(255,255,255,.07);
    --line-strong:rgba(255,255,255,.14);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{
    scroll-behavior:smooth;
    background:#050608;
  }
  body{
    background:#050608;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  /* ===== NAV ===== */
  /* Background spans full viewport (sticky bar) but content stays within 1400px
     via dynamic horizontal padding. On <1400px viewports this resolves to 2.5rem. */
  .nav{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    padding:.85rem max(2.5rem, calc((100% - 1400px) / 2));
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(8,10,14,.85);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-bottom:1px solid var(--line-strong);
  }
  .logo{
    display:flex;align-items:center;
    height:62px;
    position:relative;
  }
  .logo img{
    height:100%;
    width:auto;
    display:block;
    filter:
      drop-shadow(0 0 12px rgba(28,141,240,.5))
      drop-shadow(0 0 4px rgba(255,255,255,.3));
  }
  .nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none;margin:0;padding:0}
  .nav-links li{display:flex;align-items:center}
  .nav-links a{
    color:var(--ink-dim);
    text-decoration:none;
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    transition:color .2s;
    position:relative;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{
    content:'';position:absolute;bottom:-6px;left:0;right:0;
    height:1px;background:var(--blue);
  }
  .nav-cta{
    background:var(--blue);
    color:#fff;
    padding:.7rem 1.6rem;
    border-radius:2px;
    text-decoration:none;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    transition:all .2s;
    box-shadow:0 0 0 0 var(--blue-glow);
  }
  .nav-cta,
  body.csprocoat-body .nav-cta,
  body.csprocoat-body .nav-cta:link,
  body.csprocoat-body .nav-cta:visited,
  body.csprocoat-body .nav-cta:hover,
  body.csprocoat-body .nav-cta:focus,
  body.csprocoat-body .nav-cta:active{
    color:#fff;
  }
  .nav-cta:hover{
    background:var(--blue-deep);
    box-shadow:0 0 30px var(--blue-glow);
  }

  /* ===== HERO ===== */
  .hero{
    min-height:100vh;
    position:relative;
    display:flex;align-items:center;
    overflow:hidden;
    padding:0 3rem;
  }
  .hero-bg{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 70% 50%, rgba(28,141,240,.18) 0%, transparent 50%),
      radial-gradient(ellipse at 30% 80%, rgba(10,95,184,.12) 0%, transparent 60%);
    z-index:0;
  }
  .hero-bg::before{
    content:'';position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  }
  .hero-grain{
    position:absolute;inset:0;
    opacity:.4;mix-blend-mode:overlay;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
  .hero-inner{
    position:relative;z-index:2;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:5rem;
    width:100%;max-width:1400px;margin:0 auto;
    align-items:center;
  }
  .badge{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.5rem 1rem;
    border:1px solid var(--line-strong);
    border-radius:100px;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:2rem;
    background:rgba(28,141,240,.05);
  }
  .badge-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 12px var(--blue);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(1.3)}
  }
  .hero h1{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(2.2rem,6.5vw,6rem);
    line-height:.95;
    letter-spacing:-.03em;
    margin-bottom:1.5rem;
  }
  .hero h1 .accent{
    display:block;
    color:var(--blue);
    font-style:italic;
    text-shadow:0 0 40px var(--blue-glow);
  }
  .hero h1 .stroke{
    -webkit-text-stroke:1px var(--ink);
    color:transparent;
  }
  .hero-sub{
    font-size:1.15rem;
    color:var(--ink-dim);
    max-width:520px;
    margin-bottom:2.5rem;
    line-height:1.6;
  }
  .hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
  .btn{
    padding:1.1rem 2.2rem;
    text-decoration:none;
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    border-radius:2px;
    transition:all .25s;
    display:inline-flex;align-items:center;gap:.7rem;
  }
  .btn-primary,
  body.csprocoat-body .btn-primary,
  body.csprocoat-body .btn-primary:link,
  body.csprocoat-body .btn-primary:visited,
  body.csprocoat-body .btn-primary:hover,
  body.csprocoat-body .btn-primary:focus,
  body.csprocoat-body .btn-primary:active{
    color:#fff;
  }
  .btn-primary{
    background:var(--blue);
  }
  .btn-primary:hover{
    background:var(--blue-deep);
    box-shadow:0 0 40px var(--blue-glow);
    transform:translateY(-2px);
  }
  .btn-ghost{
    color:var(--ink);
    border:1px solid var(--line-strong);
  }
  .btn-ghost:hover{
    background:rgba(255,255,255,.05);
    border-color:var(--ink);
  }
  .btn-arrow{
    width:18px;height:1px;background:currentColor;position:relative;
    transition:width .2s;
  }
  .btn-arrow::after{
    content:'';position:absolute;right:0;top:-3px;
    width:7px;height:7px;
    border-top:1px solid currentColor;
    border-right:1px solid currentColor;
    transform:rotate(45deg);
  }
  .btn:hover .btn-arrow{width:26px}

  .hero-visual{
    position:relative;
    aspect-ratio:4/3;
  }
  .visual-frame{
    position:absolute;inset:0;
    border:1px solid var(--line-strong);
    border-radius:4px;
    overflow:hidden;
    background:linear-gradient(135deg,var(--bg-2),var(--bg-3));
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 60px -10px rgba(28,141,240,.25);
  }
  /* Fallback gradient glow only when no photo present */
  .visual-frame:not(.has-photo)::before{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(circle at 30% 40%, rgba(28,141,240,.4) 0%, transparent 50%),
      radial-gradient(circle at 70% 60%, rgba(10,95,184,.25) 0%, transparent 60%);
  }
  .visual-frame:not(.has-photo)::after{
    content:'';position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0%25' stop-color='%231c8df0' stop-opacity='.3'/%3E%3Cstop offset='100%25' stop-color='%231c8df0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23g)'/%3E%3C/svg%3E");
    background-size:cover;
    mix-blend-mode:screen;
  }
  /* Photo mode: real image fills frame, vignette + blue tint overlay keeps labels readable */
  .visual-frame.has-photo{
    background:#050608;
  }
  .hero-photo{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center;
    z-index:1;
    filter:contrast(1.05) saturate(.95);
    transition:transform 1.2s ease;
  }
  .visual-frame.has-photo::before{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(28,141,240,.18) 0%, transparent 55%),
      linear-gradient(180deg, rgba(5,6,8,.15) 0%, transparent 35%, transparent 60%, rgba(5,6,8,.55) 100%);
  }
  .visual-frame.has-photo::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    box-shadow:inset 0 0 120px rgba(0,0,0,.6);
  }
  .visual-frame.has-photo:hover .hero-photo{transform:scale(1.03)}

  .visual-label{
    position:absolute;
    font-family:'Bebas Neue',sans-serif;
    font-size:8rem;
    letter-spacing:.05em;
    line-height:.85;
    color:rgba(255,255,255,.06);
    -webkit-text-stroke:1px rgba(255,255,255,.18);
    pointer-events:none;
    z-index:4;
    mix-blend-mode:overlay;
  }
  .visual-label.tl{top:5%;left:5%}
  .visual-label.br{bottom:5%;right:5%;text-align:right}

  .hero-stats{
    position:absolute;
    bottom:3rem;
    left:max(3rem, calc((100% - 1400px) / 2));
    right:max(3rem, calc((100% - 1400px) / 2));
    display:flex;justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:2rem;
    z-index:2;
  }
  .stat-item{display:flex;flex-direction:column;gap:.3rem}
  .stat-num{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.8rem;
    color:var(--ink);
  }
  .stat-num .unit{color:var(--blue);font-size:1.1rem;margin-left:.2rem}
  .stat-label{
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }

  /* ===== SECTION SHARED ===== */
  /* Tight default block padding so consecutive sections don't compound dead-space. */
  .section{padding:4rem 3rem;position:relative}
  /* Section-lead margin reduced (was 5rem) so headers don't have a huge gap to content. */
  .section-lead{margin-bottom:2.5rem}

  /* Block-driven pages: first block under <main> needs padding to clear the fixed nav,
     UNLESS it's a hero block (which handles its own full-viewport layout). */
  body.csprocoat-body main#main-content > .wp-block-csprocoat-section-heading:first-child,
  body.csprocoat-body main#main-content > .wp-block-csprocoat-services-grid:first-child,
  body.csprocoat-body main#main-content > .wp-block-csprocoat-pricing-tiers:first-child,
  body.csprocoat-body main#main-content > .wp-block-csprocoat-process-steps:first-child,
  body.csprocoat-body main#main-content > .wp-block-csprocoat-feynlab-banner:first-child,
  body.csprocoat-body main#main-content > .wp-block-csprocoat-cta:first-child {
    padding-top: 8rem;
  }
  /* Add the page-hero look (subtle radial gradient + bottom border) to a section-heading
     block when it's the first thing on the page. The background extends edge-to-edge via
     a ::before pseudo-element so the content stays centered (max-width 1400px) but the
     visual band fills the viewport. */
  body.csprocoat-body main#main-content > .wp-block-csprocoat-section-heading:first-child {
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid var(--line);
  }
  body.csprocoat-body main#main-content > .wp-block-csprocoat-section-heading:first-child::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 100vw;
    z-index: -1;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(28,141,240,.10) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(10,95,184,.08) 0%, transparent 60%),
      var(--bg);
    pointer-events: none;
  }

  /* FEYNLAB page hero — logo above headline. */
  .feynlab-hero-logo{
    max-width:220px;
    height:auto;
    display:block;
    margin-bottom:2rem;
    filter: drop-shadow(0 0 30px rgba(28,141,240,.45));
  }

  /* ===== SUBPAGE HERO ("page-hero") — used on every subpage ===== */
  /* Tighter bottom so next section sits closer; top clears the fixed nav. */
  .page-hero{
    padding-top:9rem;
    padding-bottom:1.5rem;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(28,141,240,.10) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(10,95,184,.08) 0%, transparent 60%),
      var(--bg);
    border-bottom:1px solid var(--line);
  }
  .page-hero .services-head{margin-bottom:0}
  .page-hero .section-lead{margin-bottom:0}
  /* Tier intro band — sits between hero and first tier, gives orientation. */
  .tiers-intro{
    padding:3.5rem 3rem 0;
    background:var(--bg);
  }
  .tiers-intro-inner{
    max-width:1400px;margin:0 auto;
    display:flex;align-items:center;gap:2rem;
    padding-bottom:1rem;
  }
  .tiers-intro-line{
    flex:1;height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
  }
  .tiers-intro-label{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:.72rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .tiers-intro-label span{color:var(--blue)}
  /* Tier sections: tighter top spacing, accent border between tiers. */
  .tier-section{
    padding:5rem 3rem;
    position:relative;
  }
  .tier-section + .tier-section{
    border-top:1px solid var(--line);
  }
  .tier-section .showcase-grid{
    margin-top:0;
  }
  /* Big watermark numeral as background accent for each tier. */
  .tier-section::before{
    content:attr(data-tier-num);
    position:absolute;
    top:2rem;right:3rem;
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:9rem;
    line-height:1;
    color:rgba(255,255,255,.025);
    -webkit-text-stroke:1px rgba(255,255,255,.05);
    pointer-events:none;
    z-index:0;
    letter-spacing:-.05em;
  }
  .tier-section > .container{position:relative;z-index:1}
  /* Sammenligning section gets a subtle separator from last tier. */
  .section.sammenligning-section{
    background:var(--bg-2);
    border-top:1px solid var(--line);
    padding-top:6rem;
  }
  @media (max-width:960px){
    .page-hero{padding-top:7rem;padding-bottom:2rem}
    .tiers-intro{padding:2rem 1.25rem 0}
    .tier-section{padding:3.5rem 1.25rem}
    .tier-section::before{font-size:5rem;top:1rem;right:1.25rem}
    .section.sammenligning-section{padding-top:4rem}
  }
  @media (max-width:640px){
    .tier-section::before{display:none}
  }
  .container{max-width:1400px;margin:0 auto}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.8rem;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:1.5rem;
  }
  .eyebrow::before{
    content:'';width:30px;height:1px;background:var(--blue);
  }
  .section-title{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(2.2rem,4.5vw,4rem);
    line-height:1;
    letter-spacing:-.025em;
    margin-bottom:1.5rem;
    max-width:900px;
  }
  .section-title .it{font-style:italic;color:var(--blue)}
  .section-lead{
    font-size:1.1rem;
    color:var(--ink-dim);
    max-width:600px;
    margin-bottom:5rem;
  }

  /* ===== YDELSER ===== */
  .services{
    background:var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .services-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:3rem;
    gap:3rem;flex-wrap:wrap;
    /* Constrain to site max-width even when block is rendered outside a .container
       (e.g. csprocoat/section-heading at the top of a page). When already inside
       a .container (1400px), this is a no-op. */
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
  }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-grid.is-cols-2{grid-template-columns:repeat(2,1fr)}
  .service-grid.is-cols-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:900px){
    .service-grid.is-cols-3,
    .service-grid.is-cols-4{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:600px){
    .service-grid.is-cols-2,
    .service-grid.is-cols-3,
    .service-grid.is-cols-4{grid-template-columns:1fr}
  }
  /* keep legacy single-column rule from being overridden by the new specificity */
  .__service-grid-noop{
  }
  .service-card{
    background:var(--bg-2);
    padding:3rem 2.5rem;
    position:relative;
    overflow:hidden;
    transition:background .3s;
    cursor:pointer;
  }
  .service-card:hover{background:var(--bg-3)}
  .service-card::before{
    content:'';position:absolute;
    top:0;left:0;width:0;height:2px;
    background:var(--blue);
    transition:width .4s;
  }
  .service-card:hover::before{width:100%}
  .service-num{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:.85rem;
    color:var(--ink-faint);
    letter-spacing:.1em;
    margin-bottom:3rem;
  }
  .service-icon{
    width:48px;height:48px;
    margin-bottom:2rem;
    color:var(--blue);
  }
  .service-name{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.7rem;
    letter-spacing:-.015em;
    margin-bottom:1rem;
    line-height:1.1;
  }
  .service-desc{
    color:var(--ink-dim);
    font-size:.95rem;
    margin-bottom:2rem;
    min-height:5em;
  }
  .service-list{
    list-style:none;
    margin-bottom:2.5rem;
    border-top:1px solid var(--line);
    padding-top:1.5rem;
  }
  .service-list li{
    padding:.5rem 0;
    font-size:.85rem;
    color:var(--ink-dim);
    display:flex;align-items:center;gap:.7rem;
  }
  .service-list li::before{
    content:'';width:5px;height:5px;background:var(--blue);
    flex-shrink:0;
  }
  .service-cta{
    display:inline-flex;align-items:center;gap:.8rem;
    color:var(--ink);
    text-decoration:none;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  /* ===== FØR / EFTER ===== */
  .showcase{
    background:var(--bg);
    position:relative;overflow:hidden;
  }
  .showcase::before{
    content:'';position:absolute;
    top:-200px;right:-200px;
    width:600px;height:600px;
    background:radial-gradient(circle, rgba(28,141,240,.15) 0%, transparent 70%);
    pointer-events:none;
  }
  .ba-wrap{
    position:relative;
    aspect-ratio:16/9;
    border:1px solid var(--line-strong);
    border-radius:4px;
    overflow:hidden;
    background:var(--bg-3);
    cursor:ew-resize;
    user-select:none;
  }
  .ba-img{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
  }
  .ba-before{
    background:
      linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
  }
  .ba-before::after{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(circle at 30% 40%, rgba(255,255,255,.08) 0%, transparent 40%),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,.04) 0%, transparent 50%);
    opacity:.6;
  }
  .ba-after{
    background:
      linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);
    clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  }
  .ba-after::after{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(circle at 30% 40%, rgba(255,255,255,.25) 0%, transparent 30%),
      radial-gradient(circle at 70% 60%, rgba(28,141,240,.15) 0%, transparent 40%);
  }
  .ba-label{
    position:absolute;top:1.5rem;
    padding:.4rem 1rem;
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:.7rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(10px);
    border:1px solid var(--line-strong);
    z-index:3;
  }
  .ba-label.before{left:1.5rem;color:var(--ink-dim)}
  .ba-label.after{right:1.5rem;color:var(--blue);border-color:var(--blue)}
  .ba-divider{
    position:absolute;
    top:0;bottom:0;
    left:50%;
    width:2px;
    background:var(--blue);
    box-shadow:0 0 20px var(--blue-glow);
    z-index:4;
    pointer-events:none;
  }
  .ba-handle{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:48px;height:48px;
    background:var(--blue);
    border-radius:50%;
    box-shadow:0 0 30px var(--blue-glow);
    display:flex;align-items:center;justify-content:center;
    z-index:5;
  }
  .ba-handle::before,
  .ba-handle::after{
    content:'';position:absolute;top:50%;
    width:0;height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translateY(-50%);
  }
  .ba-handle::before{
    left:12px;
    border-right:8px solid #fff;
  }
  .ba-handle::after{
    right:12px;
    border-left:8px solid #fff;
  }

  .showcase-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    margin-top:5rem;
    align-items:center;
  }
  .showcase-info h3{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.8rem;
    margin-bottom:1rem;
    letter-spacing:-.02em;
  }
  .showcase-info p{
    color:var(--ink-dim);
    margin-bottom:2rem;
  }
  .spec-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    border-top:1px solid var(--line);
    padding-top:2rem;
  }
  .spec-item .label{
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:.4rem;
  }
  .spec-item .val{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:1rem;
  }

  /* ===== PROJEKTER ===== */
  .projects{
    background:var(--bg-2);
    border-top:1px solid var(--line);
  }
  /* Horizontal snap-slider with peek at edges so users see more projects exist. */
  .project-slider{
    position:relative;
    margin:0 -3rem; /* break out of section padding */
  }
  .project-slider::before,
  .project-slider::after{
    content:'';
    position:absolute;top:0;bottom:0;width:5rem;
    pointer-events:none;
    z-index:3;
  }
  .project-slider::before{
    left:0;
    background:linear-gradient(90deg,var(--bg-2) 0%,rgba(11,13,18,0) 100%);
  }
  .project-slider::after{
    right:0;
    background:linear-gradient(270deg,var(--bg-2) 0%,rgba(11,13,18,0) 100%);
  }
  .project-grid{
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:calc(3rem + 8vw);
    scroll-padding-right:calc(3rem + 8vw);
    padding:1rem calc(3rem + 8vw);
    scrollbar-width:thin;
    scrollbar-color:rgba(28,141,240,.4) transparent;
  }
  .project-grid::-webkit-scrollbar{height:8px}
  .project-grid::-webkit-scrollbar-track{background:transparent}
  .project-grid::-webkit-scrollbar-thumb{
    background:rgba(28,141,240,.35);
    border-radius:4px;
  }
  .project-grid::-webkit-scrollbar-thumb:hover{background:rgba(28,141,240,.6)}
  .project-card{
    position:relative;
    flex:0 0 420px;
    aspect-ratio:16/10;
    background:var(--bg-3);
    border:1px solid var(--line);
    overflow:hidden;
    cursor:pointer;
    transition:transform .4s,border-color .3s,box-shadow .4s;
    text-decoration:none;
    display:block;
    scroll-snap-align:center;
  }
  .project-card:hover{
    transform:translateY(-6px);
    border-color:var(--blue);
    box-shadow:0 24px 48px -16px rgba(0,0,0,.6),0 0 0 1px rgba(28,141,240,.4);
  }
  .project-card.large{
    flex:0 0 620px;
    aspect-ratio:16/10;
  }
  .slider-controls{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:1.5rem;padding:0 3rem;
    gap:1.5rem;
  }
  .slider-progress{
    flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;
  }
  .slider-progress-bar{
    position:absolute;top:0;left:0;height:100%;background:var(--blue);
    width:33%;transition:width .3s ease,transform .3s ease;
  }
  .slider-arrows{display:flex;gap:.6rem}
  .slider-arrow{
    width:44px;height:44px;
    border:1px solid var(--line-strong);
    background:var(--bg-3);
    color:var(--ink);
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .25s ease;
  }
  .slider-arrow:hover:not(:disabled){
    background:var(--blue);
    border-color:var(--blue);
  }
  .slider-arrow:disabled{opacity:.3;cursor:not-allowed}
  .slider-arrow svg{width:16px;height:16px}
  @media (max-width:900px){
    .project-card{flex-basis:300px;aspect-ratio:4/3}
    .project-card.large{flex-basis:340px;aspect-ratio:4/3}
    .slider-controls{padding:0 1.5rem}
    .project-grid{
      scroll-padding-left:1.5rem;
      scroll-padding-right:1.5rem;
      padding:1rem 1.5rem;
    }
    .project-slider{margin:0 -1.5rem}
    .project-slider::before,
    .project-slider::after{width:2rem}
  }
  .project-img{
    position:absolute;inset:0;
    background:linear-gradient(135deg,#1f2530 0%,#0a0d12 100%);
    transition:transform .8s ease;
  }
  .project-card:hover .project-img{transform:scale(1.04)}
  .project-img::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.55) 55%,
      rgba(0,0,0,.92) 100%);
  }
  .project-overlay{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:1.75rem 1.75rem 1.5rem;
    z-index:2;
    color:#fff;
  }
  .project-card.large .project-overlay{
    padding:2.5rem 2.75rem 2.25rem;
  }
  .project-tag{
    display:inline-block;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:.9rem;
    padding:.35rem .75rem;
    border:1px solid rgba(28,141,240,.7);
    background:rgba(28,141,240,.85);
    backdrop-filter:blur(6px);
  }
  body.csprocoat-body .project-card .project-title{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.35rem;
    letter-spacing:-.015em;
    line-height:1.15;
    margin-bottom:.4rem;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
  }
  .project-card.large .project-title{
    font-size:2rem;
  }
  body.csprocoat-body .project-card .project-meta{
    font-size:.82rem;
    color:rgba(255,255,255,.78);
    text-shadow:0 1px 6px rgba(0,0,0,.6);
    letter-spacing:.02em;
  }
  .project-card .project-arrow{
    position:absolute;
    top:1.25rem;right:1.25rem;
    width:38px;height:38px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(0,0,0,.4);
    backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    transition:background .25s,border-color .25s,transform .25s;
    z-index:2;
  }
  .project-card .project-arrow::after{
    content:'';
    width:8px;height:8px;
    border-top:1.5px solid #fff;
    border-right:1.5px solid #fff;
    transform:rotate(45deg) translate(-1px,1px);
  }
  .project-card:hover .project-arrow{
    background:var(--blue);
    border-color:var(--blue);
    transform:translate(2px,-2px);
  }
  .projects-cta{
    text-align:center;
    margin-top:4rem;
  }

  /* ===== PROJECT GALLERY (single) ===== */
  .project-gallery{}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
  }
  .gallery-item{
    position:relative;
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--bg-3);
    transition:transform .35s ease,border-color .25s ease;
  }
  .gallery-item:hover{
    transform:translateY(-4px);
    border-color:var(--blue);
  }
  .gallery-item img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
  }
  .gallery-item:hover img{transform:scale(1.05)}
  @media (max-width:900px){
    .gallery-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  }
  @media (max-width:560px){
    .gallery-grid{grid-template-columns:1fr}
  }

  /* ===== PROJECTS ARCHIVE (/projekter/) — proper grid, not the front-page slider ===== */
  .projects-archive-hero{padding-top:9rem;padding-bottom:1.5rem}
  .projects-archive{padding-top:2rem}
  .projects-filter{
    display:flex;flex-wrap:wrap;gap:.6rem;
    margin-bottom:1.5rem;
  }
  .projects-filter__pill{
    display:inline-flex;align-items:center;
    padding:.55rem 1.1rem;
    border:1px solid var(--line-strong);
    color:var(--ink-dim);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:2px;
    background:var(--bg-3);
    transition:color .2s,border-color .2s,background .2s;
  }
  .projects-filter__pill:hover{
    color:var(--ink);
    border-color:var(--ink-dim);
  }
  .projects-filter__pill.is-active{
    color:#fff;
    background:var(--blue);
    border-color:var(--blue);
  }
  .projects-count{
    font-size:.78rem;
    color:var(--ink-faint);
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:2rem;
  }
  /* Real CSS grid — overrides .project-grid flex-slider styles inherited from front-page. */
  .projects-archive-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.75rem;
  }
  /* Cards inside the archive grid: uniform size — no flex sizing, no scroll-snap, no large-variant. */
  .projects-archive-grid .project-card{
    flex:0 0 auto;
    width:auto;
    aspect-ratio:4/3;
    scroll-snap-align:none;
  }
  .projects-archive-pagination{
    margin-top:3rem;
    display:flex;justify-content:center;
  }
  .projects-archive-pagination .nav-links{
    display:flex;gap:.4rem;align-items:center;
    list-style:none;margin:0;padding:0;
  }
  .projects-archive-pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:42px;height:42px;
    padding:0 .8rem;
    border:1px solid var(--line-strong);
    background:var(--bg-3);
    color:var(--ink-dim);
    font-size:.85rem;
    text-decoration:none;
    transition:all .2s;
  }
  .projects-archive-pagination .page-numbers:hover{
    border-color:var(--ink-dim);
    color:var(--ink);
  }
  .projects-archive-pagination .page-numbers.current{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }
  .projects-empty{
    padding:3rem 0;
    text-align:center;
    color:var(--ink-dim);
  }
  .projects-empty p{margin-bottom:1.5rem}
  @media (max-width:900px){
    .projects-archive-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:1rem}
  }
  @media (max-width:560px){
    .projects-archive-grid{grid-template-columns:1fr}
  }

  /* ===== INFO-SECTION & FACT-LIST blocks ===== */
  .csprocoat-info-section.is-bg-subtle{background:var(--bg-2)}
  .csprocoat-info-section.is-bg-dark{
    background:var(--bg);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .csprocoat-info-section.is-compact{padding-top:2rem;padding-bottom:2rem}
  /* Direct children of an info-section get sensible spacing between them. */
  .csprocoat-info-section > .container > * + *{margin-top:2rem}
  .csprocoat-info-section .csprocoat-fact-list{margin-top:2rem}

  /* Fact list — key/value 2-col grid */
  body.csprocoat-body .csprocoat-fact-list{
    border:1px solid var(--line);
    background:var(--bg-3);
    padding:1.5rem 1.75rem;
  }
  body.csprocoat-body .csprocoat-fact-list__intro{
    color:var(--ink-dim);
    margin-bottom:1.25rem;
    font-size:.95rem;
  }
  body.csprocoat-body .csprocoat-fact-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.85rem 2rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  body.csprocoat-body .csprocoat-fact-grid li{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:.5rem 0;
    border-bottom:1px solid var(--line);
  }
  body.csprocoat-body .csprocoat-fact-grid li:nth-last-child(-n+2){border-bottom:0}
  body.csprocoat-body .csprocoat-fact-grid strong{
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-faint);
    font-weight:700;
  }
  body.csprocoat-body .csprocoat-fact-grid span{
    color:var(--ink);
    font-size:1rem;
  }
  /* Checklist mode */
  body.csprocoat-body .csprocoat-checklist{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.75rem;
  }
  body.csprocoat-body .csprocoat-checklist li{
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    color:var(--ink);
    font-size:.95rem;
    line-height:1.5;
  }
  body.csprocoat-body .csprocoat-checklist__dot{
    flex-shrink:0;
    width:8px;height:8px;
    margin-top:.5rem;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 12px var(--blue-glow);
  }
  @media (max-width:600px){
    body.csprocoat-body .csprocoat-fact-grid{grid-template-columns:1fr}
    body.csprocoat-body .csprocoat-fact-grid li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
    body.csprocoat-body .csprocoat-fact-grid li:last-child{border-bottom:0}
  }

  /* ===== FEYNLAB BANNER ===== */
  .feynlab{
    padding:5rem 3rem;
    background:var(--bg);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;overflow:hidden;
  }
  .feynlab-inner{
    max-width:1400px;margin:0 auto;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:4rem;
    align-items:center;
  }
  .feynlab-seal{
    width:140px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    gap:.6rem;
  }
  .feynlab-seal-logo{
    width:100%;
    height:auto;
    max-width:140px;
    display:block;
    filter: drop-shadow(0 0 30px rgba(28,141,240,.45));
  }
  .feynlab-seal-text{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:.7rem;
    letter-spacing:.2em;
    color:var(--blue);
  }
  .feynlab-seal-text.caption{
    color:var(--ink-dim);
    font-size:.62rem;
  }
  .feynlab-seal-text.big{
    font-size:1.1rem;
    letter-spacing:.05em;
    margin:.2rem 0;
    color:#fff;
  }
  .feynlab-text h3{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.7rem;
    margin-bottom:.6rem;
    letter-spacing:-.015em;
  }
  .feynlab-text p{
    color:var(--ink-dim);
    max-width:550px;
  }

  /* ===== CTA / KONTAKT ===== */
  .cta{
    padding:6rem 3rem;
    background:var(--bg-2);
    position:relative;overflow:hidden;
  }
  .cta::before{
    content:'';position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:120%;height:120%;
    background:radial-gradient(ellipse at center,rgba(28,141,240,.15) 0%,transparent 50%);
    pointer-events:none;
  }
  .cta-inner{
    max-width:900px;margin:0 auto;
    text-align:center;
    position:relative;z-index:2;
  }
  .cta-huge{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(2.5rem,6vw,5rem);
    line-height:.95;
    letter-spacing:-.03em;
    margin-bottom:2rem;
  }
  .cta-huge .stroke{
    -webkit-text-stroke:1px var(--ink);
    color:transparent;
    font-style:italic;
  }
  .cta p{
    color:var(--ink-dim);
    font-size:1.15rem;
    margin-bottom:3rem;
    max-width:600px;
    margin-left:auto;margin-right:auto;
  }
  .cta-row{
    display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  }

  /* ===== FOOTER ===== */
  footer{
    padding:4rem 3rem 2rem;
    background:var(--bg);
    border-top:1px solid var(--line);
  }
  .foot-grid{
    max-width:1400px;margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:4rem;
    margin-bottom:3rem;
  }
  .foot-col h4{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:.75rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:1.5rem;
  }
  .foot-col p,.foot-col li{
    color:var(--ink-dim);
    font-size:.9rem;
    margin-bottom:.6rem;
  }
  .foot-col ul{list-style:none}
  .foot-col a{color:var(--ink-dim);text-decoration:none;transition:color .2s}
  .foot-col a:hover{color:var(--blue)}
  .foot-bottom{
    max-width:1400px;margin:0 auto;
    padding-top:2rem;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;
    font-size:.78rem;
    color:var(--ink-faint);
    letter-spacing:.1em;
  }

  /* ===== BREADCRUMBS ===== */
  body.csprocoat-body .breadcrumbs{
    font-size:.78rem;
    color:var(--ink-faint);
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:1.5rem;
  }
  body.csprocoat-body .breadcrumbs a{
    color:var(--ink-dim);
    text-decoration:none;
    transition:color .2s;
  }
  body.csprocoat-body .breadcrumbs a:hover{ color:var(--blue); }
  body.csprocoat-body .breadcrumbs .bc-sep{
    color:var(--ink-faint);
    margin:0 .5rem;
  }

  /* ===== SCROLL TO TOP ===== */
  body.csprocoat-body .scroll-top{
    position:fixed;
    right:1.5rem;
    bottom:1.5rem;
    width:44px;height:44px;
    border:1px solid var(--line);
    background:var(--bg);
    color:var(--ink);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .25s, transform .25s, background .2s, border-color .2s;
    z-index:90;
  }
  body.csprocoat-body .scroll-top.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  body.csprocoat-body .scroll-top:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }
  body.csprocoat-body .scroll-top-arrow{
    display:inline-block;
    width:8px;height:8px;
    border-top:2px solid currentColor;
    border-left:2px solid currentColor;
    transform:rotate(45deg);
    margin-top:3px;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:960px){
    .nav{padding:.85rem 1.25rem}
    .nav-links{display:none}
    .nav-cta{padding:.55rem .95rem;font-size:.65rem;letter-spacing:.1em;white-space:nowrap}
    .logo{height:40px}
    .hero{padding:6rem 1.25rem 3rem;min-height:auto;display:block}
    .hero-inner{grid-template-columns:1fr;gap:3rem;display:block}
    .hero-inner > div:first-child{margin-bottom:2.5rem}
    .hero h1{font-size:clamp(1.7rem,7vw,2.8rem)}
    .hero h1 .stroke{-webkit-text-stroke-width:.5px}
    .hero-sub{font-size:1rem}
    .hero-visual{aspect-ratio:4/3;max-width:560px;width:100%;margin:0 auto}
    .visual-label{font-size:5rem}
    .hero-stats{position:static;flex-wrap:wrap;gap:1.5rem 2rem;margin-top:3rem;padding:2rem 0 0}
    .stat-item{flex:1 1 40%;min-width:120px}
    .stat-num{font-size:1.5rem}
    .section{padding:5rem 1.25rem}
    .section-title{font-size:clamp(1.8rem,7vw,2.8rem)}
    .service-grid{grid-template-columns:1fr}
    .service-card{padding:2.5rem 2rem}
    .showcase-grid{grid-template-columns:1fr;gap:2.5rem}
    .feynlab{padding:4rem 1.25rem}
    .feynlab-inner{grid-template-columns:1fr;text-align:center;gap:2rem}
    .feynlab-seal{margin:0 auto}
    .cta{padding:6rem 1.25rem}
    .cta-huge{font-size:clamp(1.8rem,8vw,3rem)}
    footer{padding:3rem 1.25rem 1.5rem}
    .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
    .foot-bottom{flex-direction:column;gap:1rem;text-align:center}
    .services-head{flex-direction:column;align-items:flex-start;margin-bottom:3rem}
    .ba-handle{width:40px;height:40px}
    .btn{padding:.95rem 1.6rem;font-size:.75rem}
  }
  @media (max-width:600px){
    .foot-grid{grid-template-columns:1fr}
    .hero-actions{flex-direction:column}
    .hero-actions .btn{width:100%;justify-content:center}
    .cta-row{flex-direction:column}
    .cta-row .btn{width:100%;justify-content:center}
  }

  /* Tall-viewport guard — keeps hero from blowing up on screenshot tools */
  @media (min-height: 1400px) {
    .hero { min-height: auto !important; padding: 7rem 3rem 5rem !important; display: block !important; }
    .hero-stats { position: static !important; margin-top: 4rem; padding-top: 2rem; }
  }

  /* ===== INTRO ANIMATION ===== */
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }
  .reveal{animation:fadeUp .8s ease-out both}
  .d1{animation-delay:.1s}
  .d2{animation-delay:.25s}
  .d3{animation-delay:.4s}
  .d4{animation-delay:.55s}

  /* ===== KONTAKT FORM ===== */
  .kontakt-form{display:grid;gap:1.25rem}
  .kontakt-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
  .kontakt-field{display:flex;flex-direction:column;gap:.5rem}
  .kontakt-field label{
    font-family:'Archivo',sans-serif;
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--ink-dim);
  }
  .kontakt-field input,
  .kontakt-field textarea,
  .kontakt-field select{
    background:var(--bg-3);
    border:1px solid var(--line-strong);
    color:var(--ink);
    padding:1rem 1.1rem;
    font-family:inherit;
    font-size:1rem;
    border-radius:0;
    outline:none;
    transition:border-color .25s ease, box-shadow .25s ease;
    width:100%;
  }
  .kontakt-field textarea{min-height:160px;resize:vertical;line-height:1.55}
  .kontakt-field input:focus,
  .kontakt-field textarea:focus,
  .kontakt-field select:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px var(--blue-glow);
  }
  .kontakt-field input::placeholder,
  .kontakt-field textarea::placeholder{color:var(--ink-faint)}
  .kontakt-form .form-actions{
    display:flex;align-items:center;gap:1.5rem;
    flex-wrap:wrap;margin-top:.5rem;
  }
  .kontakt-form .form-note{
    color:var(--ink-dim);font-size:.85rem;max-width:32ch;
  }
  .kontakt-phone-card{
    border:1px solid var(--line-strong);
    background:var(--bg-3);
    padding:3rem 2.5rem;
    display:flex;flex-direction:column;gap:1.5rem;
  }
  .kontakt-phone-link{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(2rem,5vw,3.4rem);
    line-height:1;
    color:var(--ink);
    text-decoration:none;
    letter-spacing:-.02em;
    transition:color .25s ease;
    word-break:break-word;
  }
  .kontakt-phone-link:hover{color:var(--blue)}
  .kontakt-mail-link{
    color:var(--blue);
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:1.15rem;
    text-decoration:none;
    letter-spacing:.02em;
  }
  .kontakt-mail-link:hover{text-decoration:underline}
  .kontakt-info-card{
    border:1px solid var(--line);
    background:var(--bg-3);
    padding:2.5rem;
  }
  .kontakt-info-list{list-style:none;padding:0;margin:0}
  .kontakt-info-list li{
    padding:1rem 0;
    border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;gap:1rem;
    color:var(--ink-dim);
    font-size:.95rem;
  }
  .kontakt-info-list li:last-child{border-bottom:0}
  .kontakt-info-list li strong{
    color:var(--ink);
    font-family:'Archivo',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.72rem;
  }
  .kontakt-notice{
    margin-top:1.5rem;padding:1rem 1.25rem;
    border-left:2px solid var(--blue);
    background:rgba(28,141,240,.06);
    color:var(--ink-dim);font-size:.9rem;
  }
  @media (max-width:768px){
    .kontakt-row{grid-template-columns:1fr}
    .kontakt-phone-card{padding:2rem 1.5rem}
    .kontakt-info-card{padding:1.75rem}
  }

  /* ===== KONTAKT: SPLIT-LAYOUT (kort venstre, formular højre) ===== */
  .kontakt-split{
    display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
    align-items:start;
  }
  .kontakt-split__cards{display:flex;flex-direction:column;gap:1.25rem}
  .kontakt-split__cards .kontakt-phone-card,
  .kontakt-split__cards .kontakt-info-card{margin:0}
  .kontakt-split__form{
    background:var(--bg-3);
    border:1px solid var(--line-strong);
    padding:2.5rem;
  }
  .kontakt-split__form-heading{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(1.5rem,2.4vw,2rem);
    line-height:1.1;letter-spacing:-.02em;
    margin:0 0 1.5rem;color:var(--ink);
  }
  .kontakt-split__form-inner .fluentform .ff-el-input--label label,
  .kontakt-split__form-inner .ff-el-form-control{
    font-family:'Archivo',sans-serif !important;
  }
  /* Snap Fluent Forms into the dark theme inside the split layout. */
  .kontakt-split__form-inner .fluentform input[type="text"],
  .kontakt-split__form-inner .fluentform input[type="email"],
  .kontakt-split__form-inner .fluentform input[type="tel"],
  .kontakt-split__form-inner .fluentform input[type="url"],
  .kontakt-split__form-inner .fluentform select,
  .kontakt-split__form-inner .fluentform textarea{
    background:var(--bg-2) !important;
    border:1px solid var(--line-strong) !important;
    color:var(--ink) !important;
    border-radius:0 !important;
  }
  .kontakt-split__form-inner .fluentform .ff-btn-submit{
    background:var(--blue) !important;
    color:#fff !important;
    border-radius:0 !important;
    font-family:'Archivo',sans-serif !important;
    text-transform:uppercase;letter-spacing:.12em;
    font-weight:700;
  }
  @media (max-width:900px){
    .kontakt-split{grid-template-columns:1fr;gap:1rem}
    .kontakt-split__form{padding:1.75rem}
  }

  /* ===== KONTAKT: LOKATION (Find os) ===== */
  .kontakt-location{padding-top:5rem;padding-bottom:5rem}
  .kontakt-location-grid{
    display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;
    align-items:stretch;
  }
  .kontakt-location-grid.is-map-left{grid-template-columns:1.4fr 1fr}
  .kontakt-location-grid.is-map-left .kontakt-location-map{order:0}
  .kontakt-location-grid.is-map-left .kontakt-location-text{order:1}
  .kontakt-location-text{
    background:var(--bg-3);
    border:1px solid var(--line);
    padding:2.5rem;
    color:var(--ink-dim);
    line-height:1.7;
    display:flex;flex-direction:column;gap:1rem;
  }
  .kontakt-location-text p{margin:0;color:var(--ink-dim)}
  .kontakt-location-map{
    position:relative;
    min-height:380px;
    border:1px solid var(--line-strong);
    background:var(--bg-3);
    overflow:hidden;
  }
  .kontakt-location-map iframe{
    display:block;width:100%;height:100%;
    min-height:380px;border:0;
    filter:grayscale(.4) contrast(1.05);
  }
  .kontakt-location-map--placeholder{
    display:flex;align-items:center;justify-content:center;
    text-align:center;
  }
  .kontakt-location-map__hint{
    padding:2rem;color:var(--ink-faint);
    font-family:'Archivo',sans-serif;
    font-size:.85rem;
    text-transform:uppercase;letter-spacing:.18em;
    max-width:32ch;line-height:1.6;
  }
  @media (max-width:900px){
    .kontakt-location-grid,
    .kontakt-location-grid.is-map-left{grid-template-columns:1fr}
    .kontakt-location-grid.is-map-left .kontakt-location-map,
    .kontakt-location-grid.is-map-left .kontakt-location-text{order:initial}
    .kontakt-location-map{min-height:320px}
    .kontakt-location-text{padding:1.75rem}
  }

  /* ===== A11Y: SKIP LINK ===== */
  .skip-link{
    position:absolute;left:-9999px;top:auto;
    width:1px;height:1px;overflow:hidden;
    z-index:10000;
  }
  .skip-link:focus{
    left:1rem;top:1rem;width:auto;height:auto;
    padding:.75rem 1.25rem;
    background:var(--blue);color:#fff;
    font-family:'Archivo',sans-serif;
    font-size:.78rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    text-decoration:none;
    box-shadow:0 0 0 3px var(--blue-glow);
    border-radius:2px;
  }

  /* ===== A11Y: MAIN ===== */
  main#main-content:focus{outline:none}

  /* ===== ACTIVE MENU STATE ===== */
  .nav-links .current-menu-item > a,
  .nav-links .current-menu-ancestor > a,
  .nav-links .current_page_item > a,
  .nav-links .current_page_parent > a{
    color:var(--blue);
  }
  .nav-links .current-menu-item > a::after,
  .nav-links .current-menu-ancestor > a::after,
  .nav-links .current_page_item > a::after,
  .nav-links .current_page_parent > a::after{
    content:'';position:absolute;bottom:-6px;left:0;right:0;
    height:1px;background:var(--blue);
  }

  /* ===== A11Y: FOCUS RINGS ===== */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
  }

  /* ===== MOBILE NAV: COLLAPSE WRAPPER (DESKTOP DEFAULT) ===== */
  .nav-collapse{
    display:flex;align-items:center;gap:2.5rem;
  }
  .nav-toggle{
    display:none;
    background:transparent;border:0;cursor:pointer;
    padding:.5rem;margin:0;
    width:44px;height:44px;
    flex-direction:column;justify-content:center;align-items:center;gap:5px;
    color:var(--ink);
  }
  .nav-toggle-bar{
    display:block;width:24px;height:2px;
    background:var(--ink);
    transition:transform .25s ease, opacity .2s ease;
  }
  body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
  body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ===== MOBILE NAV: < 768px ===== */
  @media (max-width:768px){
    .nav-toggle{display:inline-flex}
    .nav-collapse{
      display:none;
      position:fixed;top:0;right:0;bottom:0;
      width:min(82vw,360px);
      height:100vh;height:100dvh;
      flex-direction:column;align-items:stretch;justify-content:flex-start;
      gap:0;
      padding:6rem 1.5rem 2rem;
      background:rgba(8,10,14,.98);
      backdrop-filter:blur(20px) saturate(150%);
      -webkit-backdrop-filter:blur(20px) saturate(150%);
      border-left:1px solid var(--line-strong);
      transform:translateX(100%);
      transition:transform .3s ease;
      z-index:99;
      overflow-y:auto;
    }
    body.nav-open .nav-collapse{
      display:flex;
      transform:translateX(0);
    }
    body.nav-open{overflow:hidden}
    .nav-collapse .nav-links{
      display:flex !important;
      flex-direction:column;align-items:stretch;
      gap:0;width:100%;
      list-style:none;margin:0;padding:0;
    }
    .nav-collapse .nav-links li{
      display:block;
      border-bottom:1px solid var(--line);
    }
    .nav-collapse .nav-links a{
      display:block;
      padding:1.1rem .25rem;
      font-size:.95rem;
      letter-spacing:.18em;
    }
    .nav-collapse .nav-links a:hover::after,
    .nav-collapse .nav-links .current-menu-item > a::after,
    .nav-collapse .nav-links .current-menu-ancestor > a::after,
    .nav-collapse .nav-links .current_page_item > a::after,
    .nav-collapse .nav-links .current_page_parent > a::after{
      display:none;
    }
    .nav-collapse .nav-cta{
      margin-top:1.5rem;
      text-align:center;
      padding:.95rem 1.25rem;
      font-size:.78rem;letter-spacing:.18em;
    }
  }

  /* ===== NO-JS PROGRESSIVE ENHANCEMENT =====
     If JS fails on mobile the .nav-collapse stays display:none, so we expose
     a CSS-only :target fallback: clicking the toggle anchors to #primary-nav. */
  @media (max-width:768px){
    html:not(.has-js) .nav-toggle{display:none}
    html:not(.has-js) .nav-collapse{
      display:flex;position:static;width:auto;
      transform:none;padding:0;background:transparent;border:0;
      flex-direction:row;align-items:center;gap:1rem;
    }
    html:not(.has-js) .nav-collapse .nav-links{
      flex-direction:row;flex-wrap:wrap;gap:1rem;
    }
    html:not(.has-js) .nav-collapse .nav-links li{border:0}
    html:not(.has-js) .nav-collapse .nav-links a{padding:.4rem 0}
  }
  .d5{animation-delay:.7s}

  /* Legal / informational pages (Privatlivspolitik, Handelsbetingelser). */
  .legal-content{max-width:720px;color:var(--ink-dim);line-height:1.7;font-size:1rem;margin-top:2rem}
  .legal-content h2{color:var(--ink);font-family:Archivo,sans-serif;font-weight:800;font-size:1.4rem;margin:2.5rem 0 1rem;letter-spacing:.01em}
  .legal-content h3{color:var(--ink);font-family:Archivo,sans-serif;font-weight:600;font-size:1.1rem;margin:1.75rem 0 .75rem}
  .legal-content p{margin:0 0 1rem}
  .legal-content ul,.legal-content ol{margin:0 0 1.25rem;padding-left:1.4rem}
  .legal-content li{margin:0 0 .5rem}
  .legal-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
  .legal-content a:hover{color:var(--ink)}
  .legal-content strong{color:var(--ink)}

  /* ===== FLUENT FORMS — dark theme overrides =====
     Replaces the legacy mailto-form styling on the Kontakt page.
     Scoped under body.csprocoat-body so we never affect wp-admin or
     other plugins/themes. */
  body.csprocoat-body .fluentform{
    font-family:inherit;
  }
  body.csprocoat-body .fluentform .ff-el-group{
    margin-bottom:1.25rem;
  }
  body.csprocoat-body .fluentform .ff-el-input--label label,
  body.csprocoat-body .fluentform .ff-el-input--label{
    color:var(--ink-dim) !important;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-family:'Archivo',sans-serif;
    font-weight:600;
    margin-bottom:.5rem;
  }
  body.csprocoat-body .fluentform .ff-el-form-control,
  body.csprocoat-body .fluentform input[type="text"],
  body.csprocoat-body .fluentform input[type="email"],
  body.csprocoat-body .fluentform input[type="tel"],
  body.csprocoat-body .fluentform input[type="number"],
  body.csprocoat-body .fluentform input[type="url"],
  body.csprocoat-body .fluentform select,
  body.csprocoat-body .fluentform textarea{
    background:var(--bg-2) !important;
    border:1px solid var(--line-strong) !important;
    color:var(--ink) !important;
    padding:.95rem 1rem !important;
    font-family:inherit !important;
    font-size:1rem !important;
    border-radius:0 !important;
    width:100%;
    box-shadow:none !important;
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  body.csprocoat-body .fluentform textarea{
    min-height:140px;
    resize:vertical;
  }
  body.csprocoat-body .fluentform .ff-el-form-control:focus,
  body.csprocoat-body .fluentform select:focus,
  body.csprocoat-body .fluentform textarea:focus{
    outline:none !important;
    border-color:var(--blue) !important;
    box-shadow:0 0 0 1px var(--blue) !important;
  }
  body.csprocoat-body .fluentform .ff-el-form-control::placeholder,
  body.csprocoat-body .fluentform textarea::placeholder{
    color:var(--ink-dim);
    opacity:.6;
  }
  /* Submit button — match .btn .btn-primary */
  body.csprocoat-body .fluentform .ff-btn,
  body.csprocoat-body .fluentform .ff-btn-submit,
  body.csprocoat-body .fluentform button[type="submit"]{
    background:var(--blue) !important;
    color:#fff !important;
    border:none !important;
    padding:1.05rem 2.2rem !important;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-family:'Archivo',sans-serif !important;
    font-weight:700 !important;
    font-size:.82rem !important;
    border-radius:0 !important;
    cursor:pointer;
    transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
  }
  body.csprocoat-body .fluentform .ff-btn:hover,
  body.csprocoat-body .fluentform .ff-btn-submit:hover,
  body.csprocoat-body .fluentform button[type="submit"]:hover{
    background:var(--blue-deep,var(--blue)) !important;
    box-shadow:0 0 30px var(--blue-glow,rgba(30,144,255,.35));
  }
  /* Required-asterisk + error messages */
  body.csprocoat-body .fluentform .ff-el-is-required label::after,
  body.csprocoat-body .fluentform .asterisk-right label::after{
    color:var(--blue);
  }
  body.csprocoat-body .fluentform .error,
  body.csprocoat-body .fluentform .text-danger,
  body.csprocoat-body .fluentform .ff-el-is-error .text-danger{
    color:#ff6b6b !important;
    font-size:.85rem;
    margin-top:.35rem;
  }
  body.csprocoat-body .fluentform .ff-message-success,
  body.csprocoat-body .ff-message-success{
    background:var(--bg-2) !important;
    border:1px solid var(--blue) !important;
    color:var(--ink) !important;
    padding:1.25rem !important;
    border-radius:0 !important;
  }
  /* Native select arrow visibility on dark background */
  body.csprocoat-body .fluentform select{
    appearance:none;
    -webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%) !important;
    background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px) !important;
    background-size:5px 5px,5px 5px !important;
    background-repeat:no-repeat !important;
    padding-right:2.5rem !important;
  }

/* ============================================================
   KUNDE-ANMELDELSER (testimonials)
   ============================================================ */
.testimonials{
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.testimonial-card{
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 2.25rem 2rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  transition: border-color .25s, transform .25s;
}
.testimonial-card:hover{
  border-color: var(--blue);
  transform: translateY(-3px);
}
.testimonial-stars{
  display:flex;
  gap:.2rem;
  color: var(--blue);
}
.testimonial-stars svg{
  width:16px;
  height:16px;
}
.testimonial-quote{
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin: 0;
  flex: 1;
}
.testimonial-meta{
  border-top:1px solid var(--line);
  padding-top:1rem;
}
.testimonial-name{
  font-family:'Archivo',sans-serif;
  font-weight:700;
  color: var(--ink);
  font-size: .9rem;
}
.testimonial-car{
  font-size:.78rem;
  color: var(--ink-dim);
  margin-top:.2rem;
  letter-spacing:.05em;
}
@media (max-width:900px){
  .testimonial-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
}
@media (max-width:600px){
  .testimonial-grid{ grid-template-columns:1fr; }
}