/* =========================================================
   Grønne Linjer — Design tokens (fra Brand Guidelines PDF)
   ========================================================= */
:root{
  /* Brand primary */
  --lime-tint:   #F4FFE8;
  --charcoal:    #2E2E2E;
  --lime:        #8EE030;
  --lime-deep:   #6FBE1E;

  /* Grayscale */
  --cloud:    #EDEFF7;
  --smoke:    #D3D6E0;
  --steel:    #BCBFCC;
  --space:    #9DA2B3;
  --graphite: #6E7180;
  --arsenic:  #40424D;
  --phantom:  #1E1E24;
  --black:    #000000;

  --white: #FFFFFF;

  /* Semantic */
  --bg:            var(--white);
  --bg-tint:       var(--lime-tint);
  --bg-dark:       var(--charcoal);
  --text:          var(--charcoal);
  --text-muted:    var(--graphite);
  --text-on-dark:  #F5F6F2;
  --text-on-dark-muted: var(--steel);
  --border:        var(--smoke);
  --accent:        var(--lime);

  /* Type */
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Fluid type scale (mobile -> desktop), rooted in brand's 64/48/32/24/18/16 */
  --fs-h1:  clamp(2.75rem, 6.2vw + 1rem, 4.75rem);
  --fs-h2:  clamp(2.1rem, 3.6vw + 1rem, 3.2rem);
  --fs-sub1: clamp(1.375rem, 1.4vw + 1rem, 2rem);
  --fs-sub2: clamp(1.15rem, .6vw + 1rem, 1.5rem);
  --fs-p1:  1.125rem;
  --fs-p2:  1rem;

  /* Spacing scale */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 140px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --container: 1320px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 180ms;
  --dur-med: 320ms;

  --header-h: 72px;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-p1);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; padding: 0; }
input, textarea{ font: inherit; color: inherit; }
:focus-visible{ outline: 2.5px solid var(--charcoal); outline-offset: 3px; }

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

h1,h2,h3{ font-weight: 800; text-wrap: balance; }
/* Tracking and leading follow size: the bigger the type, the tighter. */
h1{ letter-spacing: -0.03em; line-height: 1.02; }
h2{ font-size: var(--fs-h2); letter-spacing: -0.025em; line-height: 1.08; }
h3{ font-size: var(--fs-sub2); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
p{ text-wrap: pretty; }

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 640px){ .wrap{ padding-inline: var(--sp-5); } }

.section{ padding-block: var(--sp-7); }
.section--tint{ background: var(--bg-tint); }
.section--dark{
  background: var(--charcoal);
  color: var(--text-on-dark);
}
@media (max-width: 640px){ .section{ padding-block: var(--sp-6); } }

.section-head{ max-width: 760px; margin-bottom: var(--sp-6); }
.section-head--dark p{ color: var(--text-on-dark-muted); }
.section-lede{
  margin-top: var(--sp-2);
  font-size: var(--fs-p1);
  color: var(--text-muted);
  max-width: 60ch;
}
.section--dark .section-lede{ color: var(--text-on-dark-muted); }

.text-muted{ color: var(--text-muted); }

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--charcoal); color: #fff;
  padding: 14px 22px; z-index: 999; border-radius: 0 0 10px 0;
}
.skip-link:focus{ left: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 15px 28px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.btn svg{ transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg{ transform: translateX(3px); }
.btn:active{ transform: scale(.97); }

.btn-primary{ background: var(--lime); color: var(--charcoal); }
.btn-primary:hover{ background: var(--charcoal); color: var(--lime); }

.btn-ghost{
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover{ border-color: var(--charcoal); background: var(--charcoal); color: #fff; }
.section--dark .btn-ghost{ color: #fff; border-color: var(--arsenic); }
.section--dark .btn-ghost:hover{ background: #fff; color: var(--charcoal); border-color: #fff; }

.btn-lg{ padding: 17px 32px; font-size: 1.02rem; }
.btn-sm{ padding: 11px 20px; font-size: 0.92rem; }
.btn-block{ width: 100%; }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--charcoal);
  border-bottom: 2px solid var(--lime);
  padding-bottom: 3px;
  margin-top: var(--sp-3);
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.link-arrow:hover{ gap: 13px; color: var(--lime-deep); }
.section--dark .link-arrow{ color: #fff; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* A dedicated dark wash independent of the hero's own scrim, so nav
     text/icons stay legible no matter which frame of the looping video
     is behind them, not just wherever the hero gradient happens to be
     darkest. Fades to nothing once scrolled past the hero. */
  color: #fff;
  transition: color var(--dur-med);
}
/* Two layers behind the header content, crossfaded on scroll: the dark wash
   (over the video) and a translucent glass layer. The glass fades out into the
   page below instead of ending in a hairline. */
.site-header::before,
.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--dur-med);
}
.site-header::before{
  background: linear-gradient(180deg, rgba(8,9,8,0.55) 0%, rgba(8,9,8,0.28) 70%, rgba(8,9,8,0) 100%);
}
.site-header::after{
  bottom: -14px;
  opacity: 0;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}
.site-header.is-scrolled{ color: var(--charcoal); }
.site-header.is-scrolled::before{ opacity: 0; }
.site-header.is-scrolled::after{ opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header::after{ background: rgba(255,255,255,0.96); }
}
@media (prefers-reduced-transparency: reduce){
  .site-header::after{ background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more){
  .site-header::after{
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    bottom: 0; -webkit-mask-image: none; mask-image: none;
    border-bottom: 1px solid var(--charcoal);
  }
}
.header-inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.logo{ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark{
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  transition: filter var(--dur-med);
}
.site-header.is-scrolled .logo-mark{ filter: none; }
.logo-word{ font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }

.main-nav ul{ display: flex; gap: var(--sp-4); }
.main-nav a{
  font-weight: 600;
  font-size: 0.96rem;
  position: relative;
  padding: 6px 0;
}
.main-nav a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--lime);
  transition: right var(--dur-med) var(--ease-out);
}
.main-nav a:hover::after{ right: 0; }

.header-actions{ display: flex; align-items: center; gap: var(--sp-3); }
.header-phone{
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem;
}
.header-phone svg{ color: var(--lime-deep); }

.nav-toggle{
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  cursor: pointer;
}
.nav-toggle span{
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast), background var(--dur-med);
  margin-inline: auto;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .main-nav{
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--white);
    color: var(--charcoal);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    padding: var(--sp-5) var(--sp-3);
    z-index: 90;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; gap: var(--sp-3); }
  .main-nav a{ font-size: 1.4rem; }
  .header-phone span{ display: none; }
  .nav-toggle{ display: flex; }
  body.nav-open{ overflow: hidden; }
}
@media (max-width: 560px){
  .header-phone{ display: none; }
}
@media (max-width: 480px){
  .header-actions .btn-primary.btn-sm{ display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  /* Deliberately not full height: the next section peeks in below the fold. */
  min-height: min(78svh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: var(--header-h);
  isolation: isolate;
}
.hero-media{
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-video{
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.62) saturate(0.92);
}
.hero-video.is-loaded{ opacity: 1; transition: opacity 600ms ease; }
.hero-media-fallback{
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  filter: brightness(0.62) saturate(0.92);
}
.hero-scrim{
  position: absolute; inset: 0;
  /* Strong, consistent darkening from top to bottom so header icons and
     hero copy stay readable no matter what's happening in the footage
     behind them, not just a thin gradient that only helps at the very
     bottom. */
  background: linear-gradient(180deg, rgba(14,15,13,0.5) 0%, rgba(13,14,12,0.58) 35%, rgba(11,12,10,0.74) 65%, rgba(9,10,9,0.88) 100%);
}

.hero-inner{
  position: relative;
  padding-bottom: var(--sp-6);
  color: #fff;
  display: grid;
  gap: var(--sp-5);
  align-items: end;
}
@media (min-width: 1000px){
  .hero-inner{
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    padding-bottom: 36px;
  }
}

.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  margin-bottom: var(--sp-3);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.trust-badge:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.trust-badge-stars{ display: flex; gap: 2px; color: #00B67A; flex-shrink: 0; }
.trust-badge-copy{ display: flex; flex-direction: column; line-height: 1.3; font-size: 0.82rem; color: rgba(255,255,255,0.88); }
.trust-badge-copy strong{ font-size: 0.98rem; font-weight: 800; color: #fff; }

.hero-title{
  font-size: var(--fs-h1);
  color: #fff;
  max-width: 16ch;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.hero-title .line{
  display: block;
  /* No overflow:hidden here: the entrance animation is fully carried by
     the simultaneous opacity fade, so the text is already invisible
     early on regardless of its slide offset. Clipping was cropping the
     text-shadow's soft blur into a hard-edged rectangle. */
  padding-bottom: 0.08em;
}
.hero-title em{ font-style: normal; color: var(--lime); }

/* Hero entrance: pure CSS keyframes, gated behind html.js-anim (added
   synchronously in <head>) so content is visible by default if JS never
   runs, and never depends on requestAnimationFrame ticking to reveal. */
html.js-anim .hero .trust-badge,
html.js-anim .hero-title .line,
html.js-anim .hero-lede,
html.js-anim .hero-actions{
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s var(--ease-out) forwards;
}
html.js-anim .hero-title .line{ transform: translateY(100%); }
html.js-anim .hero .trust-badge{ animation-delay: .05s; }
html.js-anim .hero-title .line:nth-of-type(1){ animation-delay: .2s; }
html.js-anim .hero-title .line:nth-of-type(2){ animation-delay: .34s; }
html.js-anim .hero-lede{ animation-delay: .5s; }
html.js-anim .hero-actions{ animation-delay: .64s; }
@keyframes heroFadeUp{ to{ opacity: 1; transform: none; } }

.hero-lede{
  margin-top: var(--sp-3);
  max-width: 46ch;
  font-size: var(--fs-sub2);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.hero-actions{ margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hero-actions .btn-ghost{
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.hero-actions .btn-ghost:hover{ background: #fff; color: var(--charcoal); }

/* =========================================================
   USP strip (quick trust signals, sourced from real reviews)
   ========================================================= */
.usp-strip{
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.usp-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.usp-list li{
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
}
.usp-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--lime-tint);
  color: var(--lime-deep);
}
.usp-icon svg{ width: 22px; height: 22px; }
@media (min-width: 861px){
  .usp-list li + li{ padding-left: var(--sp-3); border-left: 1px solid var(--border); }
}
@media (max-width: 860px){
  .usp-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .usp-list{ grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* =========================================================
   Bento grid (Ydelser)
   ========================================================= */
.bento{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.bento-card{
  grid-column: span 2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.bento-card--wide{ grid-column: span 4; flex-direction: row; }
.bento-card--wide .bento-media{ flex: 1 1 50%; min-height: 320px; }
.bento-card--wide .bento-body{ flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; }
.bento-card--accent{
  background: var(--charcoal);
  color: #fff;
  justify-content: center;
}
.bento-card--accent .bento-icon{ background: var(--lime); color: var(--charcoal); }
.bento-card--accent p{ color: var(--text-on-dark-muted); }
.bento-card--accent .link-arrow{ color: var(--lime); border-color: var(--lime); }

.bento-media{ position: relative; min-height: 220px; overflow: hidden; }
.bento-media .media-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bento-body{ padding: var(--sp-4); }
.bento-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--lime-tint);
  color: var(--lime-deep);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.bento-body h3{ margin-bottom: 10px; }
.bento-body p{ color: var(--text-muted); font-size: 0.98rem; }

@media (max-width: 900px){
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .bento-card{ grid-column: span 2; }
  .bento-card--wide{ flex-direction: column; }
}
@media (max-width: 560px){
  .bento{ grid-template-columns: 1fr; }
}

/* =========================================================
   Process timeline
   ========================================================= */
.process{ position: relative; }
.process-line{
  display: none;
  width: 100%; height: 2px;
  color: var(--smoke);
  margin-bottom: var(--sp-4);
}
@media (min-width: 900px){ .process-line{ display: block; } }
.process-line path{
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0; /* visible by default, no JS required */
}
html.js-anim .process-line path{
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
html.js-anim .process.is-visible .process-line path{ stroke-dashoffset: 0; }

.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.process-step{ position: relative; padding-top: var(--sp-3); border-top: 2px solid var(--border); }
.process-num{
  display: inline-block;
  font-size: 0.85rem; font-weight: 800;
  color: var(--lime-deep);
  background: var(--white);
  margin-bottom: var(--sp-2);
}
.process-step h3{ margin-bottom: 8px; }
.process-step p{ color: var(--text-muted); font-size: 0.98rem; }

@media (max-width: 900px){
  .process-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .process-steps{ grid-template-columns: 1fr; }
}

/* =========================================================
   Video section
   ========================================================= */
.video-section-inner{ text-align: left; }
.video-frame{
  margin-top: var(--sp-5);
  max-width: 920px;
  margin-inline: auto;
}
.video-frame-inner{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-0.6deg);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5);
}
.play-btn{
  position: relative; z-index: 2;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.play-btn svg{ margin-left: 4px; }
.play-btn--sm{ width: 56px; height: 56px; }

/* =========================================================
   Video triggers (welcome video + testimonials) and lightbox
   ========================================================= */
.video-trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  background-color: var(--phantom);
  background-size: cover;
  background-position: center;
}
.video-trigger:focus-visible .play-btn{ transform: scale(1.08); }

.video-lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.video-lightbox[hidden]{ display: none; }
.video-lightbox-backdrop{
  position: absolute; inset: 0;
  background: rgba(18,18,20,0.92);
}
.video-lightbox-panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
}
.video-lightbox-video{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border-radius: var(--radius-md);
  background: #000;
}
.video-lightbox-video::cue{
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05em;
}
.video-lightbox-close{
  position: absolute;
  top: -48px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.video-lightbox-close:hover{ background: rgba(255,255,255,0.24); }
body.lightbox-open{ overflow: hidden; }
.video-lightbox-backdrop{ touch-action: none; }
/* Handle above the video: something to take hold of when dragging down to close. */
.video-lightbox-grab{
  display: none;
  height: 28px;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.video-lightbox-grab span{ width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.4); }
@media (pointer: coarse){
  .video-lightbox-grab{ display: flex; }
  .video-lightbox-close{ top: -52px; }
}
@media (prefers-reduced-transparency: reduce){
  .video-lightbox-backdrop{ background: #121214; }
}

/* =========================================================
   Gallery
   ========================================================= */
/* Works for any number of projects: the first one is featured (2x2),
   the rest fill a 3-column grid with no gaps. */
.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(200px, 19vw, 270px);
  grid-auto-flow: dense;
  gap: var(--sp-3);
}
.gallery-item{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gallery-item .media-photo{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.media-caption{
  flex: 0 0 auto;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.gallery-item:first-child{ grid-column: span 2; grid-row: span 2; }


.gallery-item .media-photo{
  transition: transform 700ms var(--ease-out);
}

@media (max-width: 900px){
  /* Below the desktop bento layout, the 4-col grid has no room to work
     with, so it becomes a horizontal swipe carousel instead of a long
     stack: one consistent aspect ratio per photo, a peek of the next
     card to signal there's more, native scroll-snap (no JS needed).
     The decorative leaf clip only reads well at the wider desktop
     proportions, so it reverts to a plain rounded corner here. */
  .gallery{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--sp-3);
    padding-bottom: var(--sp-1);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar{ display: none; }
  .gallery-item{
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .gallery-item:first-child{ grid-column: auto; grid-row: auto; }
  /* height:auto is required here: the <img height="788"> HTML attribute
     otherwise gives the element a definite height, which blocks
     aspect-ratio from having any effect at all (it only fills in a
     dimension that's still auto). */
  .gallery-item .media-photo{ flex: none; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px){
  .gallery-item{ flex-basis: 85%; }
}

/* =========================================================
   Anmeldelser (reviews)
   ========================================================= */
/* A rounded card, not a pill: a true pill shape only looks right on a
   single line, and this row wraps onto two lines on narrow screens.
   Wrapped text inside a fully-round pill produced a warped, broken
   looking shape, this radius stays clean at any number of lines. */
.trustpilot-strip{
  display: flex;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  flex-wrap: wrap;
  width: fit-content;
  padding: 16px 22px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.trustpilot-rating{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.trustpilot-stars{ display: flex; gap: 2px; color: #00B67A; flex-shrink: 0; }
.trustpilot-score{ font-weight: 800; font-size: 1.15rem; color: var(--charcoal); }
.trustpilot-copy{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.trustpilot-copy strong{ color: var(--charcoal); font-weight: 700; }
.trustpilot-word{ font-weight: 800; color: var(--charcoal); }
.trustpilot-arrow{
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
@media (max-width: 560px){
  .trustpilot-strip{ width: 100%; padding: 16px 18px; }
}

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: 760px;
}
.review-card{ margin: 0; }
.review-video{
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(46,46,46,0.28);
}
.review-card figcaption{
  margin-top: var(--sp-2);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-muted);
}
@media (max-width: 640px){
  .reviews-grid{ grid-template-columns: 1fr; max-width: 420px; }
}

/* =========================================================
   Om os
   ========================================================= */
.om-os-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.om-os-media .media-photo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.om-os-content p{ color: var(--text-muted); margin-top: var(--sp-2); max-width: 52ch; }
.om-os-content h2{ margin-bottom: var(--sp-1); }
@media (max-width: 860px){
  .om-os-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .om-os-media{ order: -1; }
}

/* =========================================================
   Følg med (social)
   ========================================================= */
.social-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.social-photo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform 500ms var(--ease-out);
}

.social-follow{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.social-btn{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lime-tint);
  color: var(--charcoal);
}
.social-btn-copy{ display: flex; flex-direction: column; gap: 2px; }
.social-btn-copy strong{ font-size: 0.98rem; }
.social-btn-copy small{ font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }

@media (max-width: 900px){
  .social-grid{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--sp-3);
    scrollbar-width: none;
  }
  .social-grid::-webkit-scrollbar{ display: none; }
  .social-photo{ flex: 0 0 40%; scroll-snap-align: start; }
}
@media (max-width: 560px){
  .social-photo{ flex-basis: 56%; }
}

/* =========================================================
   Kontakt
   ========================================================= */
.kontakt-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.kontakt-details{ margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 14px; }
.kontakt-details li{ display: flex; align-items: center; gap: 12px; font-weight: 600; }
.kontakt-details svg{ color: var(--lime-deep); flex-shrink: 0; }

.kontakt-form{
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row--split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.form-row--split > div{ display: flex; flex-direction: column; gap: 8px; }
.kontakt-form label{ font-weight: 700; font-size: 0.92rem; }
.kontakt-form input, .kontakt-form textarea{
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  resize: vertical;
}
.kontakt-form input:focus, .kontakt-form textarea:focus{
  border-color: var(--lime-deep);
  outline: none;
  box-shadow: 0 0 0 4px rgba(142,224,48,0.25);
}
.form-status{ font-weight: 600; font-size: 0.95rem; min-height: 1.2em; }
.form-status.is-success{ color: var(--lime-deep); }
.form-status.is-error{ color: #c0392b; }
.form-privacy-note{
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.form-privacy-note a{ text-decoration: underline; color: var(--text); }
/* Honeypot: present in the DOM for spam bots to fill in, invisible and
   unreachable for real visitors (off-screen, not just display:none,
   since some bots skip fields hidden that way). */
.hidden-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 860px){
  .kontakt-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .form-row--split{ grid-template-columns: 1fr; }
}

/* =========================================================
   Legal pages (privacy policy) — simple readable content page
   ========================================================= */
.legal-page{ padding-top: var(--header-h); padding-bottom: var(--sp-7); }
.legal-page .wrap{ max-width: 760px; }
.legal-page h1{ font-size: var(--fs-h2); margin-top: var(--sp-6); }
.legal-page h2{
  font-size: var(--fs-sub2);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.legal-page p{ color: var(--text-muted); margin-top: var(--sp-2); }
.legal-page h1 + p{ margin-top: var(--sp-3); }
.legal-page a{ text-decoration: underline; color: var(--text); }
.legal-list{
  list-style: disc;
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
}
.legal-list li{ color: var(--text-muted); margin-top: 4px; }
.legal-updated{ margin-top: var(--sp-6); font-size: 0.9rem; }
@media (max-width: 640px){ .legal-page{ padding-bottom: var(--sp-6); } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--charcoal);
  color: var(--text-on-dark);
  padding-top: var(--sp-6);
  overflow: hidden;
}
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--arsenic);
}
.footer-top nav ul{ display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-top nav a{ font-weight: 600; color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
.footer-top nav a:hover{ color: var(--lime); }

.footer-word{
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--arsenic);
  text-align: center;
  margin: var(--sp-4) 0 0;
  line-height: 1;
  user-select: none;
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-block: var(--sp-4);
  color: var(--text-on-dark-muted);
  font-size: 0.88rem;
}

/* =========================================================
   Reveal animation base states.
   Hidden state only applies once html.js-anim is present (added
   synchronously in <head>) AND is always paired with main.js's
   IntersectionObserver + setTimeout safety-net, so content can
   never stay permanently invisible if a browser throttles rAF
   or a script fails to run.
   ========================================================= */
/* :where() keeps this selector's specificity at just .reveal-up (0,1,0)
   instead of (0,2,1), so .reveal-up.is-visible below reliably wins
   regardless of source order. Without :where(), the extra `html` type
   selector made the hidden rule outrank the visible one, leaving
   content stuck invisible even after JS added .is-visible. */
:where(html.js-anim) .reveal-up{ opacity: 0; transform: translateY(14px); }
.reveal-up.is-visible{ opacity: 1; transform: translateY(0); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }


@media (prefers-reduced-motion: reduce){
  html.js-anim .reveal-up,
  html.js-anim .hero .trust-badge,
  html.js-anim .hero-title .line,
  html.js-anim .hero-lede,
  html.js-anim .hero-actions,
  html.js-anim .hero-form,
  html.js-anim .video-pop{
    opacity: 1; transform: none; animation: none;
  }
}

/* =========================================================
   Real photography
   ========================================================= */
.media-photo{
  display: block;
  background-color: var(--smoke);
}


/* =========================================================
   Hero quote form
   ========================================================= */
.hero-form{
  width: 100%;
  max-width: 460px;
  justify-self: start;
  padding: 22px 28px;
  gap: 9px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
  color: var(--text);
}
@media (min-width: 1000px){ .hero-form{ justify-self: end; } }
.hero-form-title{ font-size: var(--fs-sub2); line-height: 1.15; }
.hero-form-sub{ margin-top: -8px; font-size: 0.92rem; color: var(--text-muted); }
.hero-form .form-row{ gap: 6px; }
.hero-form .form-row--split{ grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 480px){ .hero-form .form-row--split{ grid-template-columns: 1fr; } }
.hero-form input, .hero-form textarea{ padding: 10px 14px; }
html.js-anim .hero-form{
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s var(--ease-out) .5s forwards;
}
@media (max-width: 480px){ .hero-form{ padding: var(--sp-3); } }

/* Reviews directly under the hero */
.reviews-home{ padding-block: var(--sp-6); }
.reviews-home-grid{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: var(--sp-6);
  align-items: center;
}
.reviews-grid--home{ max-width: none; }
@media (max-width: 900px){
  .reviews-home-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* =========================================================
   Welcome video pop-up (bottom corner, muted preview that
   opens the full video with sound and captions)
   ========================================================= */
.video-pop{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 28px 56px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(46,46,46,0.08);
}
.video-pop[hidden]{ display: none; }
html.js-anim .video-pop{
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.7s var(--ease-out) 1.3s forwards;
}
body.lightbox-open .video-pop{ visibility: hidden; }
.video-pop-open{
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.video-pop-video{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--phantom);
}
.video-pop-label{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--charcoal);
}
.video-pop-label .play-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-pop-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20,20,22,0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.video-pop-close:hover{ background: rgba(20,20,22,0.92); }
/* =========================================================
   Page hero (inner pages: photo header, same transparent
   header behaviour as the front page)
   ========================================================= */
.page-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 48svh, 480px);
  padding-top: var(--header-h);
  color: #fff;
}
.page-hero-media{ position: absolute; inset: 0; z-index: -1; }
.page-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.92);
}
.page-hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,15,13,0.45) 0%, rgba(11,12,10,0.7) 100%);
}
.page-hero-inner{ width: 100%; padding-block: var(--sp-6); }
.page-hero h1{
  font-size: clamp(2.4rem, 4.4vw + 1rem, 4.2rem);
  max-width: 18ch;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.page-hero h1 em{ font-style: normal; color: var(--lime); }
.page-hero-lede{
  margin-top: var(--sp-2);
  max-width: 52ch;
  font-size: var(--fs-sub2);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* =========================================================
   Teasers on the front page
   ========================================================= */
.section-foot{ margin-top: var(--sp-5); }
.section-foot .link-arrow{ margin-top: 0; }

.gallery--teaser{
  grid-template-columns: 7fr 5fr;
  grid-auto-rows: clamp(200px, 20vw, 270px);
}
.gallery--teaser .gallery-item:nth-child(n){ grid-column: auto; grid-row: auto; }
.gallery--teaser .gallery-item:first-child{ grid-column: auto; grid-row: span 2; }

/* =========================================================
   Closing call-to-action band
   ========================================================= */
.cta-band-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cta-band h2{ max-width: 16ch; }
.cta-band p{ margin-top: var(--sp-2); color: var(--text-on-dark-muted); max-width: 44ch; }
.cta-band-actions{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.cta-band-phone{
  font-weight: 700;
  color: var(--text-on-dark);
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
}
.cta-band-phone:hover{ color: var(--lime); }

/* =========================================================
   Kontakt page: what happens after sending
   ========================================================= */
.next-steps{ margin-top: var(--sp-4); display: flex; flex-direction: column; }
.next-steps li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}
.next-steps li + li{ border-top: 1px solid var(--border); }
.next-steps .process-num{ margin: 0; background: none; padding-top: 2px; }
.next-steps h3{ font-size: 1.05rem; margin-bottom: 4px; }
.next-steps p{ color: var(--text-muted); font-size: 0.96rem; }
.kontakt-intro .video-frame{ margin-top: var(--sp-4); }

/* Active page in the main navigation */
.main-nav a[aria-current="page"]::after,
.main-nav a[aria-current="true"]::after{ right: 0; }
.sub-title{ font-size: var(--fs-sub1); margin-top: var(--sp-5); }

@media (max-width: 480px){
  .hero-inner{ gap: var(--sp-4); }
  .hero-actions{ gap: var(--sp-1); flex-wrap: nowrap; }
  .hero-actions .btn-lg{ padding: 15px 18px; font-size: 0.94rem; gap: 8px; }
}

body.is-typing .video-pop{ display: none; }

/* Desktop: pop-up sits bottom-left so it never overlaps the hero form. */
@media (min-width: 1000px){
  .video-pop{ left: 24px; right: auto; width: 340px; }
}
@media (min-width: 1000px) and (max-height: 820px){
  .video-pop{ width: 280px; }
}

/* Let form fields shrink inside their grid columns instead of overflowing. */
.kontakt-form input, .kontakt-form textarea{ width: 100%; min-width: 0; }
.form-row--split > div{ min-width: 0; }

/* =========================================================
   Process video ("what happens after you send")
   ========================================================= */
.process-block{
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  align-items: start;
}
@media (min-width: 560px){
  .process-block{ grid-template-columns: 210px 1fr; gap: var(--sp-5); }
}
.process-video{ margin: 0; max-width: 240px; }
.process-video-trigger{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 48px -24px rgba(46,46,46,0.35);
  transition: transform var(--dur-med) var(--ease-out);
}
.process-video-trigger .play-btn{ position: absolute; left: 14px; bottom: 14px; }
.process-video figcaption{
  margin-top: var(--sp-1);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
}
.process-block .sub-title{ margin-top: 0; }
.process-block .next-steps{ margin-top: var(--sp-2); }

/* Text link in the hero form that opens the same video */
.form-video-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--charcoal);
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.form-video-link:hover{ color: var(--lime-deep); }
.form-video-link .play-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--charcoal);
  flex-shrink: 0;
}

/* Portrait videos in the lightbox keep their own proportions */
.video-lightbox.is-portrait .video-lightbox-panel{ width: fit-content; max-width: 100%; }
.video-lightbox.is-portrait .video-lightbox-video{
  width: auto;
  aspect-ratio: 9 / 16;
  height: min(84vh, calc((100vw - 2 * var(--sp-3)) * 16 / 9));
  max-height: none;
  max-width: 100%;
  margin-inline: auto;
}

/* =========================================================
   Hero form as a bottom sheet on phones and tablets, so the
   background video stays visible. On desktop it stays inline.
   The sheet rules only apply once main.js has added html.has-sheet,
   so without JavaScript the form simply stays inline and usable.
   ========================================================= */
.sheet-close, .sheet-backdrop, .sheet-grab{ display: none; }
@media (min-width: 1000px){ .hero-cta-open{ display: none; } }

@media (max-width: 999px){
  html.has-sheet .hero-inner{ padding-bottom: 190px; gap: 0; }

  html.has-sheet .hero-form,
  html.js-anim.has-sheet .hero-form{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: 100%;
    max-width: none;
    max-height: 92svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -24px 60px -12px rgba(0,0,0,0.45);
    opacity: 1;
    animation: none;
    transform: translateY(105%);
    visibility: hidden;
    transition: none;
    will-change: transform;
  }
  /* Opening and closing are springs driven from main.js (WAAPI); these rules
     only describe the resting states. */
  html.has-sheet .hero-form.is-open,
  html.js-anim.has-sheet .hero-form.is-open{
    transform: none;
    visibility: visible;
  }
  html.has-sheet .sheet-grab{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html.has-sheet .sheet-grab span{ width: 40px; height: 5px; border-radius: 3px; background: rgba(46,46,46,0.2); }

  html.has-sheet .sheet-close{
    display: flex;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(46,46,46,0.08);
    color: var(--charcoal);
    cursor: pointer;
  }
  html.has-sheet .hero-form-title{ padding-right: 48px; }

  html.has-sheet .sheet-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(18,18,20,0.6);
  }
  html.has-sheet .sheet-backdrop[hidden]{ display: none; }
}
body.sheet-open{ overflow: hidden; }
body.sheet-open .video-pop{ display: none; }
.kontakt-sub{ display: block; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); }

/* =========================================================
   Service pages
   ========================================================= */
.service-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: var(--sp-6);
  align-items: start;
}
.service-copy p{ color: var(--text-muted); margin-top: var(--sp-2); max-width: 62ch; }
.service-copy h3{ margin-top: var(--sp-4); font-size: 1.15rem; }
.service-copy h3 + p{ margin-top: 6px; }
.fact-card{
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.fact-card dl{ margin: 0; display: grid; gap: var(--sp-3); }
.fact-card dt{ font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.fact-card dd{ margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }

.service-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.service-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.service-card h3{ margin-bottom: 8px; }
.service-card p{ color: var(--text-muted); }

.faq{ max-width: 820px; }
.faq-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}
.faq-item + .faq-item{ margin-top: var(--sp-1); }
.faq-item summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: 18px 22px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; font-size: 1.5rem; line-height: 1; color: var(--lime-deep); flex-shrink: 0; }
.faq-item[open] summary::after{ content: "\2212"; }
.faq-item p{ padding: 0 22px 20px; color: var(--text-muted); max-width: 64ch; }

.related-links{ display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); }
.related-links .link-arrow{ margin-top: 0; }

@media (max-width: 900px){
  .service-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .service-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   Project pages: gallery, before/after slider, clickable cards
   ========================================================= */
.service-grid--single{ grid-template-columns: minmax(0, 1fr); }
.service-grid--single .service-copy{ max-width: 720px; }

.photo-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.photo-item{ margin: 0; }
.photo-item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.photo-item .media-caption{ margin-top: 8px; }
@media (max-width: 900px){ .photo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .photo-grid{ grid-template-columns: 1fr; } }

/* Whole gallery card is clickable via the caption link. */
.gallery-item{ position: relative; }
.stretched::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.gallery-item:hover .stretched{ text-decoration: underline; }
.gallery-item:focus-within{ outline: 2.5px solid var(--charcoal); outline-offset: 4px; border-radius: var(--radius-md); }
.stretched:focus-visible{ outline: none; }

/* Before/after: without JavaScript the two photos simply sit side by side. */
.ba{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); max-width: 980px; }
.ba-pane{ margin: 0; position: relative; }
.ba-pane img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.ba-pane figcaption{
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(30,30,36,0.78);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.ba-range{ display: none; }

html.has-ba .ba{
  --pos: 50%;
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-inline: auto;
  touch-action: pan-y;
}
html.has-ba .ba-pane{ position: absolute; inset: 0; }
html.has-ba .ba-pane img{ height: 100%; aspect-ratio: auto; border-radius: 0; }
html.has-ba .ba-before{ z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
html.has-ba .ba-before figcaption{ left: 14px; }
html.has-ba .ba-after figcaption{ left: auto; right: 14px; }
html.has-ba .ba::before{
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(30,30,36,0.25);
  pointer-events: none;
}
html.has-ba .ba::after{
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--pos);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E2E2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  pointer-events: none;
}
html.has-ba .ba-range{
  display: block;
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
html.has-ba .ba:focus-within{ outline: 2.5px solid var(--charcoal); outline-offset: 3px; }

/* =========================================================
   Welcome pop-up label (short text so the purpose is clear)
   ========================================================= */
.video-pop-label{ padding: 11px 16px; gap: 10px; }
.video-pop-label .play-dot{ width: 28px; height: 28px; }
.video-pop-text{ display: flex; flex-direction: column; line-height: 1.25; }
.video-pop-text strong{ font-size: 0.92rem; font-weight: 800; color: var(--charcoal); }
.video-pop-text small{ font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }

@media (max-width: 640px){
  .video-pop{ right: 12px; bottom: 12px; width: 196px; }
  .video-pop-label{ padding: 9px 12px; gap: 8px; }
  .video-pop-label .play-dot{ width: 24px; height: 24px; }
  .video-pop-text strong{ font-size: 0.82rem; }
  .video-pop-text small{ font-size: 0.72rem; }
  .video-pop-close{ top: 6px; right: 6px; width: 28px; height: 28px; }
}
@media (max-width: 999px){
  .hero{ min-height: min(76svh, 640px); }
}

/* =========================================================
   Gallery captions: readable, with place on a second line
   ========================================================= */
.gallery-item .media-photo{ border-radius: var(--radius-md); }
.media-caption{ display: flex; flex-direction: column; gap: 2px; font-size: 0.98rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.media-caption span{ font-size: 0.86rem; font-weight: 500; color: var(--text-muted); }
.media-caption a{ color: inherit; }

/* =========================================================
   Kontakt page: form first, compact header, centred video on phones
   ========================================================= */
.page-hero--compact{ min-height: clamp(210px, 26svh, 280px); }
.page-hero--compact .page-hero-inner{ padding-block: var(--sp-4); }
.page-hero--compact .page-hero-lede{ max-width: 56ch; font-size: 1.05rem; }
.section--form{ padding-top: var(--sp-5); }

.kontakt-intro .sub-title{ margin-top: 0; font-size: var(--fs-sub2); }
.kontakt-intro .kontakt-details{ margin-top: var(--sp-2); }
.kontakt-intro .process-block{ margin-top: var(--sp-5); }
.process-block .sub-title{ grid-column: 1 / -1; font-size: var(--fs-sub2); }
.process-block .next-steps{ margin-top: 0; }
@media (max-width: 860px){
  .process-video{ margin-inline: auto; max-width: 260px; width: 100%; }
  .process-video figcaption{ text-align: center; }
}
@media (max-width: 559px){
  .process-block{ gap: var(--sp-3); }
}

/* Phones: while at the top of the page the pop-up rests inside the hero's free
   bottom area (so the peeking next section stays uncovered), then docks to the
   corner as soon as the page scrolls. main.js sets --pop-rest and toggles .is-resting. */
@media (max-width: 999px){
  .video-pop.is-resting{ translate: 0 calc(12px - var(--pop-rest, 12px)); }
}
@media (max-width: 560px){
  .kontakt-form{ padding: var(--sp-3); }
  .section--form{ padding-top: var(--sp-4); }
}
.page-hero--compact h1{ font-size: clamp(2.1rem, 3vw + 0.8rem, 3.1rem); max-width: 30ch; }
@media (min-width: 861px){
  .kontakt-form{ padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }
}


/* =========================================================
   Touch and press feedback
   Everything clickable answers the moment it is pressed (not on release).
   Lifts and zooms only exist for real hover devices, so a tap on a phone
   never leaves a card stuck in its hover state.
   ========================================================= */
html{ touch-action: manipulation; }
a, button, summary, [data-video]{ -webkit-tap-highlight-color: transparent; }

/* Cards animate in with .reveal-up; its transition would otherwise swallow the
   press, so cards that are also clickable list their own transition. */
.bento-card, .gallery-item, .review-card .video-trigger, .trustpilot-strip,
.social-btn, .process-video-trigger, .video-pop{
  --press-dur: 110ms;
}
.bento-card.reveal-up.is-visible, .gallery-item.reveal-up.is-visible{
  transition:
    opacity 420ms var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med);
}
.bento-card{ position: relative; cursor: pointer; }
.bento-card .stretched{ color: inherit; }
.bento-card:focus-within{ outline: 2.5px solid var(--charcoal); outline-offset: 4px; }

.bento-card:active,
.bento-card.reveal-up.is-visible:active{
  transform: scale(0.985);
  transition-duration: var(--press-dur);
}
.gallery-item:active .media-photo{ transform: scale(0.98); transition-duration: var(--press-dur); }
.review-card .video-trigger{ transition: transform var(--dur-med) var(--ease-out); border-radius: var(--radius-md); }
.review-card .video-trigger:active{ transform: scale(0.985); transition-duration: var(--press-dur); }
.video-trigger:active .play-btn, .play-btn:active{ transform: scale(0.92); }
.trustpilot-strip:active, .social-btn:active{ transform: scale(0.98); transition-duration: var(--press-dur); }
.process-video-trigger:active{ transform: scale(0.97); transition-duration: var(--press-dur); }
.video-pop{ transition: scale var(--dur-fast) var(--ease-out), translate var(--dur-med) var(--ease-out); }
.video-pop:has(.video-pop-open:active){ scale: 0.97; transition-duration: var(--press-dur); }
.video-pop-open:active .play-dot{ transform: scale(0.88); }
.video-pop-close:active, .sheet-close:active, .video-lightbox-close:active{ transform: scale(0.9); }
.link-arrow:active{ opacity: 0.7; }
.social-photo{ transition: transform 500ms var(--ease-out); }

@media (hover: hover) and (pointer: fine){
  .bento-card:hover,
  .bento-card.reveal-up.is-visible:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -20px rgba(46,46,46,0.22);
    border-color: transparent;
  }
  .bento-card:hover:active,
  .bento-card.reveal-up.is-visible:hover:active{ transform: translateY(-6px) scale(0.985); }
  .gallery-item:hover .media-photo{ transform: scale(1.06); }
  .gallery-item:hover:active .media-photo{ transform: scale(1.03); }
  .trustpilot-strip:hover, .social-btn:hover{
    border-color: transparent;
    box-shadow: 0 16px 32px -18px rgba(46,46,46,0.25);
    transform: translateY(-2px);
  }
  .trustpilot-strip:hover .trustpilot-arrow{ transform: translateX(3px); color: var(--charcoal); }
  .social-photo:hover{ transform: scale(1.04); }
  .process-video-trigger:hover{ transform: translateY(-4px); }
  .video-pop-open:hover .play-dot{ transform: scale(1.12); }
  .play-btn:hover, .video-trigger:hover .play-btn{ transform: scale(1.08); }
}

/* =========================================================
   Kontakt: form feedback, call row, compact video card
   ========================================================= */
.sr-only{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.optional{ font-weight: 500; color: var(--text-muted); }

/* Inline validation */
.kontakt-form input[aria-invalid="true"], .kontakt-form textarea[aria-invalid="true"]{
  border-color: #c0392b;
}
.kontakt-form input[aria-invalid="true"]:focus{ box-shadow: 0 0 0 4px rgba(192,57,43,0.18); }
.field-error{
  font-size: 0.88rem; font-weight: 600; color: #b3321f; line-height: 1.35;
  animation: fieldErrorIn 220ms var(--ease-out);
}
@keyframes fieldErrorIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.form-status a{ text-decoration: underline; }

/* Sending: the arrow gives way to a small spinner, the button stays put */
.btn.is-loading{ opacity: 0.85; cursor: progress; }
.btn.is-loading svg{ display: none; }
.btn.is-loading .btn-label::after{
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px;
  vertical-align: -3px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: btnSpin 700ms linear infinite;
}
@keyframes btnSpin{ to{ transform: rotate(360deg); } }

/* Confirmation: the form turns into this card, in the same place */
.kontakt-form.is-sent > *:not(.form-success):not(.sheet-close):not(.sheet-grab){ display: none; }
.form-success{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  outline: none;
  animation: successIn 460ms var(--ease-out);
}
.form-success[hidden]{ display: none; }
.success-check{ color: var(--lime-deep); }
.success-check circle{ stroke-dasharray: 190; stroke-dashoffset: 190; animation: drawIt 520ms var(--ease-out) 80ms forwards; }
.success-check path{ stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawIt 360ms var(--ease-out) 380ms forwards; }
@keyframes drawIt{ to{ stroke-dashoffset: 0; } }
@keyframes successIn{ from{ opacity: 0; transform: scale(0.97); } to{ opacity: 1; transform: none; } }
.success-title{ font-size: var(--fs-sub1); }
.form-success p{ max-width: 34ch; color: var(--text-muted); }
.form-success p a{ color: var(--charcoal); font-weight: 700; text-decoration: underline; }
.success-again{ margin-top: var(--sp-1); background: none; cursor: pointer; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce){
  .form-success, .field-error{ animation: none; }
  .success-check circle, .success-check path{ animation: none; stroke-dashoffset: 0; }
  .btn.is-loading .btn-label::after{ animation-duration: 1.6s; }
}

/* Trust line under the button */
.form-trust{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.9rem; line-height: 1.4; color: var(--text-muted);
}
.form-trust svg{ color: #00B67A; flex-shrink: 0; margin-top: 2px; }
.form-trust strong{ color: var(--charcoal); }

/* Phone row above the form (phones and tablets only) */
.call-row-wrap{ display: none; }
.call-row{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.92rem; color: var(--text-muted);
  transition: transform 180ms var(--ease-out);
}
.call-row:active{ transform: scale(0.98); transition-duration: 110ms; }
.call-row-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lime); color: var(--charcoal); flex-shrink: 0;
}
.call-row-text{ flex: 1; font-weight: 600; }
.call-row strong{ color: var(--charcoal); font-weight: 800; white-space: nowrap; }

@media (max-width: 860px){
  .call-row-wrap{ display: block; margin-bottom: var(--sp-2); }
  .section--form{ padding-top: var(--sp-3); }

  /* The video becomes a compact card after the steps instead of a tall poster. */
  .process-block{ display: flex; flex-direction: column; gap: var(--sp-3); }
  .process-block .sub-title{ order: 0; }
  .process-block .next-steps{ order: 1; }
  .process-block .process-video{ order: 2; }
  .process-video{
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; max-width: none; margin: 0;
    padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 180ms var(--ease-out);
  }
  .process-video:active{ transform: scale(0.985); transition-duration: 110ms; }
  .process-video-trigger{ width: 96px; flex-shrink: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-md); box-shadow: none; }
  .process-video-trigger .play-btn{ inset: 0; margin: auto; width: 40px; height: 40px; }
  .process-video figcaption{ margin: 0; text-align: left; font-size: 1rem; }
}

@media (max-width: 640px){
  .lede-extra{ display: none; }
  .page-hero--compact .page-hero-inner{ padding-block: var(--sp-3); }
  .kontakt-form{ gap: 18px; }
  .kontakt-form .form-row, .kontakt-form .form-row--split > div{ gap: 6px; }
  .kontakt-form input{ padding-block: 12px; }
}

@media (min-width: 861px){
  .kontakt-details li:first-child a{ font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
  .process-block{ grid-template-columns: 176px 1fr; gap: var(--sp-4); }
  .process-video{ max-width: 176px; }
}