:root {
      --bg-main: #020617;
      --bg-alt: #020617;
      --accent: #fb8724;
      --accent-muted: #fb8724;
      --text-main: #e5e7eb;
      --border-soft: rgba(148, 163, 184, 0.45);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	  background-color: #080808;

      color: var(--text-main);
      line-height: 1.6;
      overflow-y: auto;
    }
	
    .container {
      max-width: 1100px;
      margin: 0 auto;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #4b5563, var(--accent));
      transform-origin: left;
      transform: scaleX(0);
      z-index: 120;
      pointer-events: none;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;

      transition: top 0.4s ease-out;
    }
	
	header::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  height: 100%;                       
	  background: rgba(16, 16, 16, 0.7);
	  border-top: 1px solid rgba(102, 102, 102, 0.25);
	  border-bottom: 1px solid rgba(102, 102, 102, 0.35);
	  box-shadow: 0px 5px 50px 20px rgba(15, 15, 15, 0.65);
	  backdrop-filter: blur(4px);
	  -webkit-backdrop-filter: blur(4px);
	  pointer-events: none;
	  z-index: -1;
	}


    .nav-container {
      padding: var(--header-padding-y, 1.25rem) 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-right: auto;
      text-decoration: none;
      color: inherit;
    }

    .logo img {
      display: block;
      max-height: 19px;
      width: auto;
      transform-origin: left;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      font-size: 0.78rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #9ca3af;
    }

    .logo-text span:first-child {
      font-weight: 600;
      color: #f9fafb;
    }

    nav {
      position: relative;
      transform-origin: right;

    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 1.25rem;
      align-items: left; 
      position: relative;
    }

    nav a {
      color: #e5e7eb;
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      white-space: nowrap;
      padding: 0.15rem 0;
      position: relative;
      opacity: 0.85;
      transition: opacity 0.15s ease, color 0.15s ease;
    }

    nav a:hover {
      opacity: 1;
      color: #f9fafb;
    }

    nav a.is-active {
      opacity: 1;
      color: #fefce8;
    }

    .nav-underline {
      position: absolute;
      bottom: -0.3rem;
      height: 2px;
      background: linear-gradient(90deg, #E3AA79, #fb8724);
      width: 0;
      transform-origin: left;
      transform: translateX(0);
      transition: transform 0.25s ease, width 0.25s ease, opacity 0.15s ease;
      opacity: 0;
      pointer-events: none;
    }

    nav.has-active .nav-underline {
      opacity: 1;
    }

    .nav-toggle {
      display: none;
      width: 32px;
      height: 32px;
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .nav-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background: #e5e7eb;
      border-radius: 1px;
      margin: 3px 0;
      transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
    }
	
	header.nav-open .nav-toggle span {
      margin: 1.5px 0;
	}

    header.nav-open .nav-toggle span:nth-child(1) {
      transform: translateY(5px) rotate(45deg);
    }
    header.nav-open .nav-toggle span:nth-child(2) {
	opacity: 0;
      width: 0;
    }
    header.nav-open .nav-toggle span:nth-child(3) {
      transform: translateY(-5px) rotate(-45deg);
    }

    .logo img, nav {
      transform: scale(var(--header-scale, 1));
      transition: transform 0.4s ease-out;
    }

    main.deck {
      position: relative;
      width: 100%;
      min-height: 100vh;
    }

    
    section[data-panel] {
      position: relative;
	  visibility: hidden;
	  min-height: 100vh;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 5.5rem 0 3.5rem;
      isolation: isolate;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    
    section[data-panel]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
      z-index: -1;
    }

    #home    { background-image: url("/assets/dispatch-nederland.jpg"); }
    #auto    { background-image: url("/assets/dispatch-auto-schadeplatform.jpg"); }
    #woon    { background-image: url("/assets/dispatch-woon-opstalschades.jpg"); }
    #fics    { background-image: url("/assets/fics-online-caravanschade.jpg"); }
    #contact { background-image: url("/assets/dispatch-kantoor-apeldoorn.jpg"); }
    #privacy { background-image: url("/assets/dispatch-kantoor-apeldoorn.jpg"); }

    .section-inner {
      padding: 0 1.5rem;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

	.deck-next > .section-inner {
		  transform-origin: left;
		  transform: scale(var(--content-scale, 1));
		  opacity: var(--opacity-scale, 1);
		  transition: transform 0.2s ease-out, opacity 0.4s ease-out;
	}

    .section-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #9ca3af;
      margin-bottom: 0.75rem;
    }

    h1 {
      font-size: clamp(2.3rem, 4vw, 3rem);
      margin-bottom: 0.9rem;
      color: #f9fafb;
    }

    h2 {
      font-size: clamp(2rem, 3vw, 2.4rem);
      margin-bottom: 0.75rem;
      color: #f9fafb;
    }

    .headline-accent {
      background: linear-gradient(90deg, #cccccc, #fb8724);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .section-text {
      margin-top: 0.75rem;
      color: #e5e7eb;
      max-width: 1000px;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
    }

    .section-text h3 {
      color: #fb8724;
      font-weight: 600;
	  font-size: inherit;
	  margin-block-start: 1em;
    }

    .section-text h4 {
      color: #fff;
      font-weight: 600;
	  font-size: inherit;
	  margin-block-start: 1em;
    }
	
	.section-text p, .section-text address {
		margin-block-start: 1em;
		margin-block-end: 1em;
	}

	.section-text h3 + p, .section-text h4 + p {
		margin-block-start: 0em;		
	}
	
    .button-row {
      margin-top: 1.7rem;
      display: flex;
      gap: 0.9rem;
      flex-wrap: wrap;
	}
	
	.container {
		margin-block-end: 5rem;
	}

    .btn,
    .btn-blue,
    .btn-purple,
    .btn-red {
      padding: 0.6rem 1.3rem 0.7rem 1.3rem;
      border-radius: 8px;
      font-size: 0.9rem;
      border: 1px solid rgba(248, 250, 252, 0.22);
      color: #f9fafb;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      text-decoration: none;
	  
	  background-color: rgba(200, 123, 30, 0.8);
	  
      transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease,
        border-color 0.24s ease;
    }

    .btn-blue {
	  background-color: rgba(37, 99, 235, 0.65);
    }

    .btn-purple {
	  background-color: rgba(113, 101, 147, 0.8);
    }

    .btn-red {
	  background-color: rgba(185, 28, 28, 0.65);
    }

    .btn:hover,
    .btn-blue:hover,
    .btn-purple:hover,
    .btn-red:hover {
	  color: #fff;
	  opacity: 1;
	  
	  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.35); 
      border-color: rgba(248, 250, 252, 0.5);	
	  text-shadow: 0px 0px 4px #00000080;
    }

    address {
      font-style: normal;
    }

    address a {
      color: inherit;
      text-decoration: none;
    }

    address a:hover {
	  color: #fff;
      text-decoration: underline;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: 1.1rem;
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .hero-pill {
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
      background: rgba(15, 23, 42, 0.95);
    }

    .scroll-hint {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #9ca3af;
      opacity: 0.85;
      pointer-events: none;
    }

    .scroll-hint-bar {
      width: 26px;
      height: 2px;
      background: #4b5563;
      overflow: hidden;
      position: relative;
    }

    .scroll-hint-bar::after {
      content: "";
      position: absolute;
      left: -30%;
      top: 0;
      width: 40%;
      height: 100%;
      background: linear-gradient(90deg, #cccccc, #fb8724);
      animation: scrollHint 1.5s ease-in-out infinite;
    }

    @keyframes scrollHint {
      0% { transform: translateX(0); opacity: 0; }
      15% { opacity: 1; }
      100% { transform: translateX(220%); opacity: 0; }
    }

    .quick-links {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;

      position: fixed;
      bottom: 1.5rem;
	  right: 1.5rem;

	  z-index: 999;
    }
	
	.quick-links .btn {
      padding: 0.5rem;
      border-radius: 2px;
      cursor: pointer;
		  backdrop-filter: blur(4px);
		  -webkit-backdrop-filter: blur(4px);
	}
		
	#deck-overlay {
	  position: fixed; 
	  top: 0;           
	  left: 0;
	  right: 0;
	  bottom: 0;
	  overflow: hidden; 
	  z-index: 50;       
	}

    .deck-panel {
      position: absolute;
	  background-color: #202020;
      left: 0;
      width: 100%;
      min-height: 100vh;    
      display: flex; 
      align-items: center;
      box-sizing: border-box;
      padding: 5.5rem 0 3.5rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      color: inherit;
      will-change: transform;

	  box-shadow: 0 -20px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(31, 41, 55, 0.7);
    }

    .deck-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.9));
      z-index: -1;
    }

    .deck-panel > .section-inner {
      padding: 0 1.5rem;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;

	  transform-origin: center left; 
	  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    }
	
    @media (max-width: 900px) {
	    .deck-panel {
			align-items: start;
		}
      nav ul {
        position: absolute;
        top: 48px;
        right: -70px;
        flex-direction: column;
        gap: 0.4rem;

        padding: 0.75rem 1.1rem;
        border-radius: 0;
        display: none;
        border: 1px solid rgba(31, 41, 55, 0.95);

      background: rgba(16, 16, 16, 0.5);
      border: 1px solid rgba(102, 102, 102, 0.35);

		  backdrop-filter: blur(4px);
		  -webkit-backdrop-filter: blur(4px);

      }
	  
	  .nav-underline {
		  display: none;
	  }

      header.nav-open nav ul {
        display: flex;
      }

      .nav-toggle {
        display: inline-flex;
      }

      .logo-text {
        display: none;
      }

      .scroll-hint {
        display: none;
      }

      .section-inner {
        padding: 0 1.1rem;
      }
	  
	  .quick-links { 
		display: none;
	  }
    }
	
    @media (max-width: 640px) {
      h1 {
        font-size: 1.9rem;
      }

      h2 {
        font-size: 1.7rem;
      }
	  
	.logo img {
		max-height: 16px;
	}

      address {
        max-width: 100%;
      }
    }
	
	

    @media (prefers-reduced-motion: reduce) {
      main.deck {
        position: static;
        height: auto;
        margin-top: 72px;
      }
      .scroll-progress {
        display: none;
      }
    }	

	
.no-transition, .no-transition * {
  transition: none !important;
  animation: none !important;
}


.section-text ul, .section-text li {
	margin: revert;
	padding: revert;
}

.address {
	margin-left: 1.5rem;
}