/* ====================================
   THEME (Clean editorial)
==================================== */
:root{
  --bg:#F7F5EF;
  --text:#1C1C1A;
  --muted:#5F6257;

  --card:#EFEDE3;
  --border:rgba(104,112,90,0.18);

  --accent:#68705A;     /* muted olive */
  --accent2:#68705A;    /* muted olive */

  --maxw:1180px;

  /* Brand accent: dæmpet olivengrøn */
  --accent-soft: rgba(104,112,90,0.12);
  --accent-glow: rgba(104,112,90,0.20);
}

/* ====================================
   RESET + BASE
==================================== */
*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

img, video{ display:block; }

/* ====================================
   GLOBAL TINT OVER HELE SIDEN
==================================== */
body{
  position: relative;
  overflow-x: hidden;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background: transparent;

  z-index: 0;
}

/* Sørg for alt indhold ligger over tint */
body > *{
  position: relative;
  z-index: 1;
}

/* ====================================
   LAYOUT
==================================== */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px 28px;
}

.section-dark{ padding: 88px 0; }
.section-title{ font-size: 32px; margin-bottom: 8px; }
.section-sub{ color: var(--muted); margin-bottom: 22px; }

/* Accent line under section titles */
h2{
  position: relative;
  display: inline-block;
}
h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:42%;
  height:1px;
  border-radius:999px;
  background: var(--accent);
  opacity:0.9;
}

/* ====================================
   HEADER
==================================== */
.header-dark{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 28px;

    width: 100%;          /* NY */
  max-width: none;      /* NY */
  margin: 0;            /* NY */
  left: 0;   

  position: sticky;
  top: 0;
  z-index: 999;

  backdrop-filter: blur(10px);
  background: rgba(243,241,236,0.88);
  border-bottom: 1px solid rgba(23,23,23,0.05);
}

.header-left{ display:flex; align-items:center; }

.header-logo{ height:64px; width:auto; }

.header-logo-link{
  display:inline-block;
  transition: transform .2s ease, opacity .2s ease;
  padding:6px;
}
.header-logo-link:hover{ transform:scale(1.06); opacity:.85; }

.header-center{
  text-align:center;
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}

.header-title-link{
  display:inline-block;
  text-decoration:none;
  padding:6px;
  transition:.2s ease;
}
.header-title-link:hover{ transform:scale(1.06); opacity:.85; }

.header-title{
  font-size:20px;
  font-weight:700;
  color: var(--text);
  letter-spacing:1px;
}

/* NAV */
nav{
  display:flex;
  align-items:center;
  gap:16px;
}

nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight:600;
  padding-bottom:4px;
  position:relative;
}
nav a::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0%;
  height:2px;
  background: var(--text);
  transition: width .25s ease;
}
nav a:hover::after{ width:100%; }
html{
  scroll-behavior: smooth;
}
section{
  scroll-margin-top: 90px;
}


/* Burger */
.burger-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
}
.burger-btn span{
  width:28px;
  height:3px;
  background:#171717;
  border-radius:4px;
}

@media(max-width:760px){
  nav{
    display:none;
    position:absolute;
    right:20px;
    top:70px;
    background: rgba(255,255,255,0.97);
    border:1px solid var(--border);
    padding:20px;
    border-radius:12px;
    flex-direction:column;
    gap:12px;
  }
  nav.show{ display:flex; }
  .burger-btn{ display:flex; }
}
@media (max-width: 480px){
  .container{ padding: 28px 18px; }   /* lidt mere “safe area” */
  .header-dark{ padding: 16px 18px; } /* header matcher mobile spacing */
}


/* ====================================
   HERO
==================================== */
.hero-video{
  position:relative;
  height:70vh;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.92) contrast(1.02) saturate(1.00);
  transform: scale(1.02);
}



/* ====================================
   HERO – READABILITY OVERLAY
   Keeps the video visible while giving
   the headline a calm, high-contrast area.
==================================== */
.hero-readability{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(12,12,12,0.82) 0%,
      rgba(12,12,12,0.68) 22%,
      rgba(12,12,12,0.42) 42%,
      rgba(12,12,12,0.12) 62%,
      rgba(12,12,12,0) 78%
    );
}

.hero-content{

  position:relative;
  z-index:5;
  max-width: 650px;
}

.hero-content h1{
  color:#FFFFFF;
  font-size: clamp(30px, 5.4vw, 48px);
  margin-bottom:16px;
}

.hero-content p{
  color:#FFFFFF;
  margin-bottom:24px;
  line-height:1.5;
}

.buttons{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-primary{
  background: var(--text);
  color:#FFFFFF;
  padding:12px 20px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  transition: transform .2s ease, filter .2s ease;
}
.btn-primary:hover{ transform: translateY(-2px); filter: brightness(0.96); }

.btn-ghost{
  border:1px solid rgba(255,255,255,0.35);
  color:#1C1C1A;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
}

/* ====================================
   CARDS (fælles) + Hover (ikke CV)
==================================== */
.reel-wrapper,
.skill-card,
.kontakt-info,
.kontakt-form,
.video-modal-content{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow: 0 6px 22px rgba(23,23,23,0.045);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

/* Hover effect (premium) */

.skill-card:hover,
.kontakt-info:hover,
.kontakt-form:hover{
  transform: translateY(-2px);
  border-color: rgba(104,112,90,0.28);
  box-shadow: 0 8px 24px rgba(23,23,23,0.06), 0 0 28px var(--accent-soft);
}
.reel-wrapper{
  margin-bottom: 42px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}



/* ====================================
   ABOUT
==================================== */
.about-wrapper{
  display:flex;
  gap:70px;
  align-items:center;
}
.about-text{
  flex:1;
  color: var(--muted);
  line-height:1.6;
}
.about-image img{
  width:380px;
  height:auto;
  border-radius:22px;
  object-fit:cover;
  filter: none;
}

@media(max-width:800px){
  .hero-readability{
    background:
      linear-gradient(
        90deg,
        rgba(12,12,12,0.84) 0%,
        rgba(12,12,12,0.68) 48%,
        rgba(12,12,12,0.18) 78%,
        rgba(12,12,12,0) 100%
      );
  }


  .about-wrapper{ flex-direction:column-reverse; text-align:center; }
}

/* ====================================
    (Netflix rail + fede pile)
==================================== */


/* =========================================
   SHOWREEL – CLEAN (DUAL VIDEO) – NO VIGNETTE
========================================= */

.showreel-sum{
  padding-top: 2px;
  padding-bottom: 4px;
}

/* Player frame */
.showreel-player{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;

  border-radius: 22px;
  overflow: hidden;

  background: #111111;
  box-shadow: 0 18px 45px rgba(23,23,23,0.10);
}
.showreel-player{
  transition: transform .25s ease, box-shadow .25s ease;
}

.showreel-player:hover{
  transform: translateY(-2px);
  box-shadow:none;
}

/* Dual layers wrapper */
.showreel-dual{
  position: absolute;
  inset: 0;
}

/* Video layers (REN – ingen mørkning/overlay) */
.showreel-layer{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;       /* viser hele billedet */
  object-position: center;

  background: #000;

  opacity: 0;
  transition: opacity .18s linear;

  filter: none;              /* <- VIGTIG: ingen “filmisk” mørkning */
}

.showreel-layer.active{
  opacity: 1;
}

/* Fjern eventuelle gradient-overlays i showreel */
.showreel-gradient{
  display: none !important;
}

@media (max-width: 768px){
  .showreel-player{ border-radius: 10px; }
  .showreel-title-overlay{ left: 16px; bottom: 16px; }
  .showreel-sub-title{ font-size: 12px; }
}


/* ====================================
   GLOBAL TINT (før om-mig look videre)
==================================== */
section:not(.hero-video){
  position: relative;
}

section:not(.hero-video)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: transparent;
  opacity: 1;
  z-index: 0;
}

/* Sørg for indhold ligger over tint */
section:not(.hero-video) > *{
  position: relative;
  z-index: 1;
}


/* side fade removed — thumbnails now run cleanly to the edges */
.reel-track{
  display:flex;
  gap:16px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 0 14px;

  -webkit-overflow-scrolling: touch;

}
/* Scrollbar – større og lettere at ramme */
.reel-track{
  scrollbar-width: auto; /* Firefox – gør den bredere */
  scrollbar-color: rgba(104,112,90,.42) rgba(104,112,90,.08);
}

/* Chrome / Safari */
.reel-track::-webkit-scrollbar{
  height: 16px; /* ← GØR DEN BREDDERE */
}

.reel-track::-webkit-scrollbar-track{
  background: rgba(23,23,23,0.08);
  border-radius:999px;

  /* gør track lettere at ramme */
  margin: 0 4px;
}

.reel-track::-webkit-scrollbar-thumb{
  background: rgba(104,112,90,0.42);
  border-radius:999px;

  /* giver "grip" følelse */
  border: 3px solid rgba(0,0,0,0.25);
}

.reel-track::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.60);
}


.reel-item{
  flex: 0 0 320px;
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  transition: transform .22s ease, box-shadow .22s ease;
}

.reel-item video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  filter: contrast(1.04) saturate(1.02) brightness(1);
  cursor:pointer;
}

/* hover zoom + premium shadow */
.reel-item:hover{
  transform: scale(1.06);
  z-index: 20;
  box-shadow: 0 14px 34px rgba(23,23,23,0.12);
}

/* Fede Netflix pile */
.reel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:42px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  line-height:1;

  color: #171717;
  cursor:pointer;

  border-radius: 50%;
  border: 1px solid rgba(23,23,23,0.12);

  background: rgba(255,255,255,0.90);

  backdrop-filter: blur(10px);

  z-index: 30;
  transition: transform .2s ease, filter .2s ease, background .2s ease, opacity .2s ease;
}

.reel-btn:hover{
  filter: brightness(0.98);
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 8px 24px rgba(23,23,23,0.08);
}

.reel-btn:active{
  transform: translateY(-50%) scale(0.98);
}

.reel-btn.prev{ left: 12px; }
.reel-btn.next{ right: 12px; }

@media (max-width: 720px){
  .reel-wrapper{ padding: 14px 52px; }
  .reel-item{ flex-basis: 260px; }
  .reel-btn{ width:44px; height:58px; font-size:26px; }
}
@media (prefers-reduced-motion: reduce){
  .reel-track{ scroll-behavior: auto; }
  .reel-item{ transition: none; }
  .reel-btn{ transition: none; }
}

/* ====================================
   CV
==================================== */
.cv-filmic{
  display:flex;
  gap:40px;
  margin-top:30px;
}
.cv-filmic-col{ flex:1; }

.cv-header{
  font-size:22px;
  margin-bottom:20px;
  padding-left:10px;
  border-left:3px solid var(--accent2);
}

.cv-filmic-item{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(23,23,23,0.10);
}
.cv-filmic-item:last-child{ border-bottom:none; }

.cv-dot{
  width:14px;
  height:14px;
  background: var(--text);
  border-radius:50%;
  margin-top:4px;
  box-shadow: none; /* ingen glow */
}

.cv-year{
  font-weight:700;
  color:#222222;
  opacity:.9;
  display:block;
  margin-bottom:4px;
}

.cv-filmic-item h4{ font-size:18px; margin-bottom:4px; color:#222222; }
.cv-filmic-item p{ color:#5F6257; line-height:1.4; }

@media(max-width:800px){
  .cv-filmic{ flex-direction:column; gap:30px; }
}

/* ====================================
   SKILLS + SOFTWARE
==================================== */
.skills-grid{
  display:grid;
  gap:16px;
}
@media(min-width:760px){
  .skills-grid{ grid-template-columns:repeat(4, 1fr); }
}
.skill-card{
  padding:30px 10px 28px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(23,23,23,0.10);
  border-radius:0;
  box-shadow:none;
}
/* Skill icons */
.skill-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;

  background:#EFEDE3;
  border:1px solid rgba(104,112,90,0.18);
}

.skill-icon .icon{
  width: 24px;
  height: 24px;
  color: var(--text);
}

.software-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.software-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.software-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.software-logo{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 20px;
  background:#EFEDE3;
  border:1px solid rgba(104,112,90,0.18);
  padding: 6px;
}


/* ====================================
   KONTAKT (clean)
==================================== */
.kontakt-section{ margin-top: 60px; }

.kontakt-wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:36px;
  margin-top:28px;
}

.kontakt-info,
.kontakt-form{
  padding:28px;
  backdrop-filter: blur(10px);

  /* lidt lysere for bedre readability */
  background:rgba(255,255,255,0.72);

  border: 1px solid rgba(104,112,90,0.18);
  box-shadow: 0 8px 24px rgba(23,23,23,0.06);
}

.kontakt-info h3{
  margin-bottom:12px;
  font-size:22px;
  font-weight:600;
  color:#222222;
}

.kontakt-info p{ margin-bottom:10px; line-height:1.5; color:#5F6257; }

.kontakt-info a{
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px solid rgba(104,112,90,0.20);
}
.kontakt-info a:hover{ border-bottom-color: rgba(104,112,90,0.42); }

.socials{
  margin-top:20px;
  display:flex;
  gap:12px;
}
.social{
  padding:8px 14px;
  background:#EFEDE3;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  color: var(--text);
  font-size:14px;
  transition: .2s ease;
  text-decoration:none;
}
.social:hover{
  background: var(--text);
  color:#FFFFFF;
}

.kontakt-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.kontakt-form label{
  font-size:14px;
  color:#5F6257;
}

.kontakt-form input,
.kontakt-form textarea{
  width:100%;
  padding:12px;
  background:#EFEDE3;
  border: 1px solid rgba(23,23,23,0.12);
  color:#222222;
  border-radius:8px;
  font-size:15px;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus{
  outline:none;
  border-color: #68705A;
  box-shadow: 0 0 0 3px rgba(104,112,90,0.10);
}

.kontakt-form button{
  margin-top:8px;
  cursor:pointer;
  border:none;
  font-size:16px;
}

@media (max-width: 760px){
  .kontakt-wrapper{
    grid-template-columns: 1fr;
    gap:24px;
  }
}

/* ====================================
   FOOTER
==================================== */
.footer-dark{
  text-align:center;
  padding:40px 0;
  color: var(--muted);
}

/* ====================================
   VIDEO MODAL
==================================== */
.video-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.video-modal.open{ display:block; }

.video-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(23,23,23,0.48);
  backdrop-filter: blur(6px);
}

.video-modal-content{
  position:absolute;
  left:50%;
  top:50%;
  width: min(1000px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.65);
}

.video-modal-content video{
  width:100%;
  height:auto;
  max-height: 80vh;
  display:block;
  background:#111111;
}

.video-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(23,23,23,0.72);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  z-index:2;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}


.video-modal-nav.prev{ left: 12px; }
.video-modal-nav.next{ right: 12px; }

.video-modal-nav:hover{
  filter: brightness(1.10);
  box-shadow: 0 8px 24px rgba(23,23,23,0.08);
}

@media (max-width: 720px){
  .video-modal-nav{ width:44px; height:58px; font-size:26px; }
}


.header-dark{
  box-shadow: 0 5px 20px rgba(23,23,23,0.04);
}

/* ====================================
   MODAL NAV PILS (Netflix style)
==================================== */
.video-modal-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%) scale(1);
  width:56px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:32px;
  font-weight:700;
  color:white;

  cursor:pointer;
  user-select:none;

  border-radius:16px;
  border:1px solid rgba(255,255,255,0.18);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.35)),
    rgba(0,0,0,0.45);

  backdrop-filter: blur(14px);

  opacity:0.55;
  transition:
    opacity .25s ease,
    transform .2s ease,
    box-shadow .25s ease,
    background .25s ease;

  z-index:5;
}

/* venstre/højre placering */
.video-modal-nav.prev{ left:16px; }
.video-modal-nav.next{ right:16px; }

/* hover */
.video-modal-nav:hover{
  opacity:1;
  transform: translateY(-50%) scale(1.08);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(0,0,0,0.35)),
    rgba(0,0,0,0.55);

  box-shadow:
    0 0 40px rgba(28,28,26,0.10),
    0 20px 60px rgba(0,0,0,0.6);
}

/* aktiv klik */
.video-modal-nav:active{
  transform: translateY(-50%) scale(0.95);
}

/* vis dem tydeligere når man hover videoen */
.video-modal-content:hover .video-modal-nav{
  opacity:0.85;
}

/* mobil */
@media (max-width: 768px){

  .video-modal-nav{
    width:48px;
    height:64px;
    font-size:28px;
    opacity:0.9;
  }

  .video-modal-nav.prev{ left:8px; }
  .video-modal-nav.next{ right:8px; }

}

.header-dark{
  transition: transform .35s ease, opacity .35s ease;
}
.header-hidden{
  transform: translateY(-100%);
  opacity: 0;
}
/* ====================================
   INFO (i) på video-cards
==================================== */
.reel-item{
  position: relative;
}

.info-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 40;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);

  color: #171717;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;

  opacity: .75;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.info-btn:hover{
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(23,23,23,0.10);
}

/* ====================================
   INFO MODAL
==================================== */
.info-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000; /* over alt */
}
.info-modal.open{ display:block; }

.info-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
}

.info-modal-content{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow:auto;

  border-radius: 16px;
  padding: 18px 18px 16px;

  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 70px rgba(23,23,23,0.18);
}

.info-modal-close{
  position: sticky;
  top: 0;
  margin-left: auto;

  width:44px;
  height:44px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,0.12);
  background: rgba(23,23,23,0.72);
  color:#fff;
  cursor:pointer;
  font-size:18px;

  display:grid;
  place-items:center;
  z-index:2;
}

#infoModalBody h3{
  margin: 10px 0 10px;
  font-size: 20px;
}
#infoModalBody p{
  color:#5F6257;
  line-height: 1.6;
  margin: 10px 0;
}
/* ====================================
   VIDEO TITEL OVERLAY
==================================== */
.video-title-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  padding: 10px 12px;

  font-size: 15px;
  font-weight: 600;

  color: #171717;

  background:
    linear-gradient(to top,
      rgba(0,0,0,0.75),
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.0)
    );

  border-radius: 0 0 14px 14px;

  pointer-events:none;

  opacity: 0.95;
  transition: opacity .2s ease;
}

/* fade lidt ud ved hover (Netflix feel) */
.reel-item:hover .video-title-overlay{
  opacity: 1;
}

/* ====================================
   CINEMATIC SHOWREEL TITLE
==================================== */
.showreel-title-overlay{
  position:absolute;
  left: 24px;
  bottom: 24px;
  z-index: 5;

  pointer-events:none;

  animation: showreelFadeIn 1.2s ease;
}

.showreel-main-title{
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;

  color: rgba(255,255,255,0.95);

  margin: 0 0 6px 0;

  text-shadow:
    0 4px 20px rgba(0,0,0,0.7),
    0 0 30px rgba(28,28,26,0.10);
}

.showreel-sub-title{
  font-size: 14px;
  font-weight: 500;

  color: rgba(255,255,255,0.75);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.6);
}

/* smooth fade-in */
@keyframes showreelFadeIn{
  from{
    opacity:0;
    transform: translateY(12px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* mobil */
@media (max-width: 768px){

  .showreel-title-overlay{
    left: 16px;
    bottom: 16px;
  }

  .showreel-main-title{
    font-size: 26px;
  }

  .showreel-sub-title{
    font-size: 12px;
  }

}
/* ====================================
   FULL-WIDTH SECTION TINT
==================================== */
section{
  position: relative;
}

section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(700px 400px at 20% 20%, rgba(104,112,90,0.10), transparent 60%),
    radial-gradient(700px 400px at 80% 30%, rgba(184,169,126,0.08), transparent 60%);

  opacity: 0.9;
  z-index: 0;
}

/* sørg for indhold ligger over */
section > *{
  position: relative;
  z-index: 1;
}
section{
  position: relative;
  width: 100%;
}
/* ====================================
   NY TINT FOR HVER SEKTION (FULL WIDTH)
==================================== */
section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  pointer-events:none;

  background:
    radial-gradient(800px 450px at 20% 15%, rgba(104,112,90,0.12), transparent 65%),
    radial-gradient(800px 450px at 80% 25%, rgba(184,169,126,0.09), transparent 65%);

  z-index:0;
}

/* indhold over tint */
section > *{
  position:relative;
  z-index:1;
}
section:nth-of-type(odd)::before{
  background:
    radial-gradient(800px 450px at 15% 20%, rgba(104,112,90,0.12), transparent 65%);
}

section:nth-of-type(even)::before{
  background:
    radial-gradient(800px 450px at 85% 20%, rgba(104,112,90,0.12), transparent 65%);
}
/* ====================================
   FULL-WIDTH SECTION LOOK (som screenshots)
==================================== */

/* Basen: gør alle sections til full-width "baggrundsflader" */
section{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Hver sektion får sin egen gradient + vignette */
section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* Ligner dine screenshots: purple venstre, blue højre, mørk midte */
  background:
    radial-gradient(900px 600px at 12% 12%, rgba(104,112,90,0.14), transparent 60%),
    radial-gradient(900px 600px at 88% 20%, rgba(184,169,126,0.10), transparent 62%),
    linear-gradient(90deg, rgba(247,246,243,0.96), rgba(242,240,234,0.92), rgba(238,239,231,0.96));
}

/* Vignette (mørkere kanter, som på dine screenshots) */
section::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,0.0), rgba(0,0,0,0.72));
  opacity: 0.95;
}

/* Sørg for at alt indhold ligger over tint/vignette */
section > *{
  position: relative;
  z-index: 1;
}

/* Hero skal ikke få samme “sektion overlay” (den har sin egen video/overlay) */
.hero-video::before,
.hero-video::after{
  content: none !important;
}

.showreel-gradient{
  display:none;
}
.reel-btn{
  display:none;
}
.reel-item video{
  background:#111111;
  object-fit: cover; /* du har allerede cover */
}
@media (max-width: 768px){
  .hero-bg-video{
    display:none;
  }
  .hero-video{
    background: #000 url("Video/posters/berlin.png") center/cover no-repeat;
  }
}
/* ====================================
   PERFORMANCE HELPERS
   - Udsæt rendering af tunge sektioner
==================================== */

/* Defer offscreen rendering (stor win på lange sider) */
#portfolio,
#cv,
#software,
#kontakt{
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* så layout ikke hopper */
}

/* Hvis brugeren ønsker mindre animation */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
/* =========================
   Reel title overlay
========================= */
.reel-item{
  position: relative;
}

.reel-title{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 8px 10px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;

  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.35),
    rgba(0,0,0,0)
  );

  pointer-events: none;
}
.reel-item video{
  transition: opacity .25s ease, transform .25s ease;
  will-change: transform, opacity;

}

.reel-item:hover video{
  opacity: 1;
  transform: scale(1.02);
}
/* =========================
   YOUTUBE – SINGLE PLAYER
========================= */
.youtube-player-wrap{
  margin-top: 28px;
  padding: 18px 18px 16px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23,23,23,0.06);
}

.youtube-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}

.youtube-title{
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.youtube-link{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(104,112,90,0.20);
  padding-bottom: 2px;
}
.youtube-link:hover{
  border-bottom-color: rgba(104,112,90,0.75);
}

.youtube-sub{
  color: var(--muted);
  margin: 0 0 12px 0;
}

.youtube-player{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow:hidden;
  background:#111111;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.youtube-player iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.youtube-minimal{
  margin-top: 18px;
}

.youtube-actions{
  display:flex;
  justify-content:center;   /* ← centrerer knappen vandret */
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* optional lille hover-feel så det matcher resten */
.youtube-actions .btn-primary,
.youtube-actions .btn-ghost{
  transition: transform .2s ease, filter .2s ease;
}

.youtube-actions .btn-primary:hover,
.youtube-actions .btn-ghost:hover{
  transform: translateY(-2px);
}
.youtube-player-wrap{
  margin-top: 36px;      /* skaber afstand fra showreel */
  padding-top: 4px;      /* lille buffer */
  position: relative;
  z-index: 2;            /* sikrer den ligger over evt. overlap */
}
#portfolio::after{
  content: none !important;
}
.youtube-player-wrap{
  background: rgba(0,0,0,0.35);
  padding: 24px;
  border-radius: 14px;
}
.youtube-player-wrap{
  background: rgba(0,0,0,0.55);
  padding: 24px;
  border-radius: 14px;
}
.youtube-player-wrap{
  background: rgba(0,0,0,0.35);
  padding: 32px;
  border-radius: 14px;

  max-width: 700px;
  margin: 40px auto 0 auto; /* centrer horisontalt */
  text-align: center;
}
.youtube-actions{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.youtube-sub{
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   SHOWREEL PERFORMANCE
   ========================================================= */

.showreel-single {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.showreel-layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}


/* =========================================================
   MOBILE FIRST
   ========================================================= */

.container {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}


/* Hero */

.hero-video {
  min-height: 620px;
  height: 78svh;
}

.hero-content h1 {
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.05;
}

.hero-content p {
  font-size: 16px;
}


/* =========================================================
   TOUCH / MOBIL
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  /* Vi bruger poster på mobilen
     i stedet for konstant video */

  .hero-bg-video {
    display: none;
  }

  .hero-video {
    background:
      #000
      url("Video/posters/berlin.png")
      center / cover
      no-repeat;
  }


  /* Ingen hover-effekter på touch */

  .reel-item:hover {
    transform: none;
    box-shadow: none;
  }

  .reel-item:hover video {
    transform: none;
  }


  /* Større info-knap til fingre */

  .info-btn {
    width: 40px;
    height: 40px;
  }


  /* Portfolio cards */

  .reel-item {
    flex-basis: min(82vw, 320px);
  }

}


/* =========================================================
   SMÅ MOBILER
   ========================================================= */

@media (max-width: 480px) {

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }


  .hero-video {
    min-height: 580px;
    height: 82svh;
  }


  .hero-content {
    padding-top: 28px;
    padding-bottom: 28px;
  }


  .buttons {
    width: 100%;
  }


  .buttons a {
    flex: 1 1 100%;
    text-align: center;
  }


  .showreel-player {
    border-radius: 10px;
  }


  .showreel-title-overlay {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }


  .showreel-main-title {
    font-size: 25px;
  }


  .showreel-sub-title {
    font-size: 10px;
    letter-spacing: .06em;
  }


  .reel-track {
    gap: 12px;
    padding-bottom: 10px;
  }


  .reel-item {
    flex-basis: 82vw;
  }

}


/* =========================================================
   PERFORMANCE
   ========================================================= */

#om-mig,
#cv,
#software,
#kontakt {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}


/* Undgå unødvendig GPU-rendering */

.reel-item video {
  will-change: auto;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .showreel-layer,
  .reel-item video,
  .header-dark {
    transition: none !important;
  }

}


/* =========================================================
   ATM — CLEAN EDITORIAL PASS
   Behold HTML/JS funktionalitet, men giv siden et roligere
   og mere personligt visuelt hierarki.
   ========================================================= */

:root{
  --bg:#F7F5EF;
  --surface:#EFEDE3;
  --text:#1C1C1A;
  --muted:#625F59;
  --line:rgba(104,112,90,0.18);
  --warm:#68705A;
  --maxw:1180px;
}

/* ---------- GLOBAL ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.container{
  max-width:var(--maxw);
  padding:30px 28px;
}

section{
  scroll-margin-top:82px;
}

.section-dark{
  padding-top:92px;
  padding-bottom:92px;
}

/* ---------- HEADER ---------- */
.header-dark{
  min-height:76px;
  padding:8px 28px;
  background:rgba(247,246,243,.94);
  border-bottom:1px solid rgba(23,23,22,.07);
  box-shadow:0 4px 18px rgba(23,23,22,.035);
  backdrop-filter:blur(14px);
}

.header-logo{
  height:38px;
  width:auto;
}

.header-logo-link{
  padding:4px;
}

.header-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
}

nav{
  gap:26px;
}

nav a{
  color:#4F4C47;
  font-size:15px;
  font-weight:500;
}

nav a::after{
  height:1px;
  background:var(--text);
}

.header-title-link:hover,
.header-logo-link:hover{
  transform:none;
  opacity:.72;
}

/* ---------- HERO ---------- */
.hero-video{
  height:min(78vh, 760px);
  min-height:620px;
  border-bottom:0;
}

/* Let the video stay natural, while a light editorial veil makes
   the left-hand copy readable. */
.hero-bg-video{
  filter:brightness(.92) contrast(1.01) saturate(.98);
  transform:scale(1.01);
}

.hero-video::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(247,246,243,.97) 0%,
      rgba(247,246,243,.90) 23%,
      rgba(247,246,243,.62) 39%,
      rgba(247,246,243,.20) 58%,
      rgba(247,246,243,0) 76%
    );
}

.hero-video::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to top, rgba(23,23,22,.18), transparent);
}

.hero-content{
  position:relative;
  z-index:5;
  min-height:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.hero-content h1{
  max-width:610px;
  color:var(--text);
  font-size:clamp(42px,5vw,66px);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:0 0 20px;
  text-wrap:balance;
}

.hero-content p{
  max-width:500px;
  color:#4E4B46;
  font-size:18px;
  line-height:1.55;
  margin:0 0 28px;
}

.buttons{
  gap:14px;
}

.btn-primary,
.btn-ghost{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:7px;
  font-size:15px;
  font-weight:600;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn-primary{
  background:var(--text);
  color:#fff;
  border:1px solid var(--text);
}

.btn-primary:hover{
  transform:translateY(-1px);
  filter:none;
  background:#2A2927;
}

.btn-ghost{
  background:rgba(255,255,255,.72);
  color:var(--text);
  border:1px solid rgba(23,23,22,.30);
  backdrop-filter:blur(8px);
}

.btn-ghost:hover{
  background:#fff;
  border-color:rgba(23,23,22,.55);
}

.hero-scroll{
  color:#FFFFFF;
  position:absolute;
  z-index:6;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.9);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.hero-scroll i{
  width:1px;
  height:30px;
  background:rgba(255,255,255,.75);
}

/* ---------- TYPOGRAPHIC SECTIONS ---------- */
.section-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
  color:var(--warm);
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.section-kicker::after{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.75;
}

.section-heading{
  max-width:760px;
  margin:0 0 34px;
  color:var(--text);
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.section-title{
  color:var(--text);
}

.section-sub{
  color:var(--muted);
}

/* Remove the old universal line under h2; the kicker now does the work. */
h2::after{
  display:none;
}

/* ---------- ABOUT ---------- */
.about-heading-row{
  margin-bottom:34px;
}

.about-heading{
  margin:0;
  color:var(--text);
  font-size:clamp(34px,4.5vw,52px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.about-wrapper{
  gap:86px;
  align-items:center;
}

.about-text{
  color:#5B5852;
  font-size:17px;
  line-height:1.72;
  max-width:620px;
}

.about-image img{
  width:390px;
  border-radius:18px;
  filter: none;
}

/* ---------- SHOWREEL ---------- */
.showreel-sum{
  padding-top:0;
}

.showreel-player{
  border-radius:16px;
  box-shadow:0 18px 48px rgba(23,23,22,.10);
}

.showreel-player:hover{
  transform:none;
  box-shadow:0 18px 48px rgba(23,23,22,.10);
}

.reel-wrapper{
  margin-top:34px;
  margin-bottom:36px;
}

.reel-item video{
  border-radius:12px;
}

.reel-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(23,23,22,.10);
}

.reel-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(23,23,22,.22);
  background:rgba(255,255,255,.94);
  color:var(--text);
  backdrop-filter:none;
}

.reel-btn:hover{
  filter:none;
  transform:translateY(-50%);
  box-shadow:0 6px 18px rgba(23,23,22,.10);
}

/* ---------- CV ---------- */
.cv-filmic{
  gap:70px;
}

.cv-header{
  color:var(--text);
  border-left:0;
  padding-left:0;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.cv-dot{
  width:8px;
  height:8px;
  background:var(--warm);
  margin-top:7px;
}

.cv-filmic-item{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

/* ---------- SOFTWARE ---------- */
.software-entry{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}

.software-entry:first-child{
  border-top:1px solid var(--line);
}

.software-logo{
  width:48px;
  height:48px;
  border-radius:12px;
  background:#F0EEE9;
  border:1px solid #E0DCD4;
}

/* ---------- SKILLS ---------- */
.skills-grid{
  gap:34px;
}

.skill-card{
  padding:24px 0 28px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.skill-card:hover{
  transform:none;
  border-color:var(--line);
  box-shadow:none;
}

.skill-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#EFEBE5;
  border:0;
}

.skill-icon .icon{
  width:21px;
  height:21px;
}

/* ---------- CONTACT ---------- */
.kontakt-section{
  margin-top:20px;
}

.kontakt-wrapper{
  gap:54px;
}

.kontakt-info,
.kontakt-form{
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}

.kontakt-info:hover,
.kontakt-form:hover{
  transform:none;
  border-color:transparent;
  box-shadow:none;
}

.kontakt-form input,
.kontakt-form textarea{
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus{
  border-color:#AAA49B;
  box-shadow:0 0 0 3px rgba(23,23,22,.05);
}

.kontakt-info a{
  border-bottom:1px solid rgba(182,106,77,.45);
}

.social{
  background:transparent;
  border:1px solid var(--line);
  border-radius:6px;
}

.social:hover{
  background:var(--text);
}

/* ---------- MODALS ---------- */
.video-modal-nav{
  border-radius:50%;
}

@media(max-width:800px){
  .hero-video{
    min-height:650px;
    height:78vh;
  }

  .hero-video::before{
    background:
      linear-gradient(
        180deg,
        rgba(247,246,243,.90) 0%,
        rgba(247,246,243,.66) 38%,
        rgba(247,246,243,.10) 72%,
        rgba(247,246,243,0) 100%
      );
  }

  .hero-content{
    justify-content:flex-start;
    padding-top:110px;
  }

  .hero-content h1{
    max-width:560px;
    font-size:clamp(40px,9vw,58px);
  }

  .about-wrapper{
    gap:38px;
  }

  .about-image img{
    width:min(100%,390px);
  }
}

@media(max-width:760px){
  .header-dark{
    min-height:68px;
    padding:8px 18px;
  }

  .header-logo{
    height:34px;
  }

  .header-title{
    font-size:17px;
  }

  nav{
    top:64px;
    right:18px;
  }

  .section-dark{
    padding-top:70px;
    padding-bottom:70px;
  }

  .hero-scroll{
    bottom:18px;
  }
}


/* HERO – white text for maximum readability */
.hero-content h1,
.hero-content p,
.hero-scroll,
.hero-scroll span {
  color: #FFFFFF;
}


/* SHOWREEL – no white side fade */
.reel-wrapper::before,
.reel-wrapper::after {
  display: none !important;
}


/* FINAL POLISH – understated active navigation */
nav a.active{
  color: var(--text);
}
nav a.active::after{
  width:100%;
  height:1px;
  background: var(--text);
}

/* Keep showreel controls quiet until needed */
.reel-btn{
  opacity:.58;
}
.reel-btn:hover{
  opacity:1;
}

/* Slightly more breathing room around the portfolio rail */
.reel-track{
  padding-top: 12px;
  padding-bottom: 18px;
}

/* FINAL PALETTE — warm ivory + olive, no grey UI */
:root{
  --bg:#F7F5EF;
  --card:#EFEDE3;
  --surface:#EFEDE3;
  --text:#1C1C1A;
  --muted:#5F6257;
  --border:rgba(104,112,90,.18);
  --line:rgba(104,112,90,.18);
  --accent:#68705A;
  --accent2:#4F5744;
  --accent-soft:rgba(104,112,90,.12);
  --accent-glow:rgba(104,112,90,.20);
  --warm:#68705A;
}

/* Warm surfaces */
.skill-icon,
.software-logo,
.kontakt-info,
.kontakt-form,
.youtube-player-wrap{
  background:#EFEDE3;
  border-color:rgba(104,112,90,.18);
}

/* Olive borders and focus states */
.kontakt-form input:focus,
.kontakt-form textarea:focus{
  border-color:#68705A;
  box-shadow:0 0 0 3px rgba(104,112,90,.10);
}

/* Olive hover glow */
.skill-card:hover,
.kontakt-info:hover,
.kontakt-form:hover{
  border-color:rgba(104,112,90,.30);
  box-shadow:0 8px 24px rgba(23,23,22,.06), 0 0 28px rgba(104,112,90,.12);
}

/* Olive section atmosphere */
section::before{
  background:
    radial-gradient(800px 450px at 15% 18%, rgba(104,112,90,.11), transparent 64%),
    radial-gradient(800px 450px at 85% 25%, rgba(184,169,126,.07), transparent 66%);
}
section:nth-of-type(odd)::before,
section:nth-of-type(even)::before{
  background:
    radial-gradient(800px 450px at 15% 18%, rgba(104,112,90,.11), transparent 64%),
    radial-gradient(700px 400px at 85% 30%, rgba(184,169,126,.07), transparent 66%);
}

/* Olive scrollbar */
.reel-track{
  scrollbar-color:rgba(104,112,90,.42) rgba(104,112,90,.08);
}
.reel-track::-webkit-scrollbar-track{
  background:rgba(104,112,90,.08);
}
.reel-track::-webkit-scrollbar-thumb{
  background:rgba(104,112,90,.42);
  border-color:#F7F5EF;
}
.reel-track::-webkit-scrollbar-thumb:hover{
  background:rgba(104,112,90,.65);
}

/* Keep buttons clean, but let olive provide the personality */
.btn-primary:hover{
  background:#4F5744;
  border-color:#4F5744;
}
.btn-ghost:hover{
  border-color:#68705A;
  color:#4F5744;
}

/* Small olive accents */
.cv-header{border-left-color:#68705A;}
.cv-dot{background:#68705A;}
.youtube-link:hover{border-bottom-color:#68705A;}
.social:hover{background:#68705A;}

/* FINAL WARM SURFACES — remove the remaining grey feel */
:root{
  --bg:#F7F5EF !important;
  --card:#EFE9D8 !important;
  --border:rgba(104,112,90,.22) !important;
  --muted:#5E624F !important;
}

/* all visible boxes / fields */
.kontakt-info,
.kontakt-form,
.video-modal-content,
.info-modal-content,
.youtube-player-wrap{
  background:#EFE9D8 !important;
  border-color:rgba(104,112,90,.22) !important;
}

.kontakt-form input,
.kontakt-form textarea,
.skill-icon,
.software-logo,
.social{
  background:#E8E2CF !important;
  border-color:rgba(104,112,90,.22) !important;
}

/* Keep the portfolio rail itself open and light */
.reel-wrapper{
  background:transparent !important;
}

/* Soft olive atmosphere instead of grey section tint */
section::before{
  background:
    radial-gradient(700px 420px at 18% 18%, rgba(104,112,90,.10), transparent 62%),
    radial-gradient(650px 380px at 82% 28%, rgba(190,174,126,.08), transparent 64%) !important;
}

/* Remove the old dark vignette that can make surfaces look grey */
section::after{
  background:none !important;
  opacity:0 !important;
}

/* Slight olive warmth on interactive surfaces */
.kontakt-info:hover,
.kontakt-form:hover{
  box-shadow:0 10px 30px rgba(104,112,90,.10), 0 0 26px rgba(104,112,90,.08) !important;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus{
  border-color:#68705A !important;
  box-shadow:0 0 0 3px rgba(104,112,90,.12) !important;
}