/* ========================================
   dFacts Modern CSS
   ======================================== */

/* Fonts Definitions */
@font-face {
  font-family: "BitterBold";
  src: url("../fonts/bitter-bold-webfont.eot");
  src:
    url("../fonts/bitter-bold-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/bitter-bold-webfont.woff") format("woff"),
    url("../fonts/bitter-bold-webfont.ttf") format("truetype"),
    url("../fonts/bitter-bold-webfont.svg#bitter_boldbold") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "BitterRegular";
  src: url("../fonts/bitter-regular-webfont.eot");
  src:
    url("../fonts/bitter-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/bitter-regular-webfont.woff") format("woff"),
    url("../fonts/bitter-regular-webfont.ttf") format("truetype"),
    url("../fonts/bitter-regular-webfont.svg#bitterregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "YanoneKaffeesatzBold";
  src: url("../fonts/yanonekaffeesatz-bold-webfont.eot");
  src:
    url("../fonts/yanonekaffeesatz-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/yanonekaffeesatz-bold-webfont.woff") format("woff"),
    url("../fonts/yanonekaffeesatz-bold-webfont.ttf") format("truetype"),
    url("../fonts/yanonekaffeesatz-bold-webfont.svg#yanone_kaffeesatzbold")
      format("svg");
  font-weight: bold;
  font-style: normal;
}

/* CSS Variables for easy theming */
:root {
  /* Colors */
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --accent-color: #e74c3c;
  --text-color: #333;
  --text-light: #666;
  --bg-color: #ffffff;
  --bg-light: #f8f9fa;
  --bg-dark: #2c3e50;
  --border-color: #e1e5e9;

  /* Typography */
  --font-main:
    "BitterRegular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, sans-serif;
  --font-heading: "BitterBold", "Georgia", serif;
  --font-ticker: "YanoneKaffeesatzBold", sans-serif;

  /* Spacing */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;

  /* Layout */
  --container-width: 1200px;
  --header-height: 80px;
  --header-height-mobile: 60px;
  --menu-toggle-size: 44px;

  /* Parallax Animation */
  --parallax-header-speed: 2;
  --parallax-shadow-offset: 450px;
  --parallax-header-visible-until: 120px;
  --parallax-header-opacity-start: 1;
  --parallax-header-opacity-end: 1;
  --parallax-header-inner-max-translate: 164;

  /* Card Hover Effects */
  --card-hover-transform: translateY(-5px);
  --card-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  --card-hover-shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.15);
  --card-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --card-shadow-sm-dark: 0 2px 5px rgba(0, 0, 0, 0.2);
  --nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --btn-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  --legal-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Colors with Opacity */
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-50: rgba(255, 255, 255, 0.5);
}

html {
  scroll-padding-top: var(--header-height);
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  line-height: 1.6;
  color: var(--text-color);
  background: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hyphens: auto;
}

/* ========================================
   Layout Containers
   ======================================== */
.container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0 var(--spacing-sm);
}

body.page main {
  padding-top: 3rem;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .container {
    padding: 0 var(--spacing-lg);
  }
}

.inner {
  max-width: var(--container-width);
  margin: 0 auto;
}

/* ========================================
   Typography
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  position: relative;
}

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--secondary-color);
  margin: var(--spacing-xs) auto 0;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* ========================================
   Header
   ======================================== */
.header {
  background: #008ec7;
  color: white;
  height: calc(100vh - 40px);
  text-align: left;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
}

/* Three.js Canvas for header logo */
#header-logo-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.header * {
  user-select: none;
}

.navigation.active:not(.start) {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}

.header .inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
  opacity: 1 !important;
}
@media (min-width: 769px) {
  .header .inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

.header h1 {
  margin: 0;
  padding: 0;
}

.header h1 a {
  /* Progressive enhancement: hidden by default, shown if JS fails */
  background: url(../images/logo/d.png) no-repeat center 0;
  width: 300px;
  text-indent: -9999px;
  display: block;
  margin: 30px auto 0;
  height: 350px;
  text-decoration: none;
  border: none;
}

@media (min-width: 769px) {
  .header h1 a {
    background-position: left center;
    margin: 0;
  }
}

.header p {
  width: 100%;
  font-size: 2.5rem;
  font-family: var(--font-main);
  margin: 0;
  line-height: 1.2;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
  pointer-events: none;
  user-select: none;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

/* ========================================
   Carousel Navigation
   ======================================== */
.carousel-nav {
  position: relative;
}

.carousel-nav .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white-90);
  color: var(--primary-color);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--btn-shadow);
  z-index: 10;
}

.carousel-nav .carousel-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav .carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-nav .carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.carousel-nav .carousel-btn.prev {
  left: 10px;
}

.carousel-nav .carousel-btn.next {
  right: 10px;
}

/* Unified bottom control bar:  ‹  • • • • •  › */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.carousel-controls .carousel-btn {
  position: relative;
  top: -4px;
  transform: scale(1);
  background: none;
  border: none;
  box-shadow: none;
  color: #008ec7;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
  padding: 0 var(--spacing-xs);
  flex: 0 0 auto;
}

.carousel-controls .carousel-btn:hover {
  color: #0079ab;
  transform: scale(1.15);
}

.carousel-controls .carousel-btn:active {
  transform: scale(0.95);
}

.carousel-controls .carousel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pagination Dots */
.carousel-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

.carousel-controls .carousel-pagination {
  margin-top: 0;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* Inactive dots: blue at 65% alpha */
  background: rgba(0, 142, 199, 0.65);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  padding: 0;
  transform: scale(1);
}

.carousel-dot.active {
  /* Active dot: solid blue */
  background: #008ec7;
  transform: scale(1.2);
}

/* Numeric counter (references): e.g. 5/24 — same blue as the controls */
.carousel-counter {
  color: #008ec7;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 3.5em;
  text-align: center;
}

/* Navigation now lives in the unified .carousel-controls bar at the bottom */
.carousel-nav {
  display: none;
}

/* ========================================
   Navigation
   ======================================== */
.navigation {
  background: #008ec7;
  box-shadow: var(--nav-shadow);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: var(--spacing-sm);
}

.nav li a {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: white;
  font-weight: 500;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.nav li a:hover,
.nav li a.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.nav li a i {
  font-size: 1.1em;
}

.nav-icon {
  fill: white;
}

/* Site title in sticky nav — visible only after scrolling past the header */
.nav-site-title {
  color: white;
  text-decoration: none;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 1rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
}

.nav-site-title:hover {
  color: white;
  text-decoration: underline;
}

.navigation.scrolled .nav-site-title {
  opacity: 1;
  pointer-events: auto;
}

/* Close button inside the mobile menu overlay (hidden on desktop) */
.nav-close {
  display: none;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: #008ec7;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  color: var(--primary-color);
  width: var(--menu-toggle-size);
  height: var(--menu-toggle-size);
  border-radius: 50%;
  transition: background var(--transition-fast);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1001;
}

.menu-toggle.active {
  color: white;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-toggle .icon-menu,
.menu-toggle .icon-close {
  width: 30px;
  height: 30px;
  position: absolute;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  fill: #fff;
}

.menu-toggle .icon-close {
  opacity: 0;
  transform: rotate(-90deg);
}

.menu-toggle.active .icon-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.menu-toggle.active .icon-close {
  opacity: 1;
  transform: rotate(0);
}

/* ========================================
   Mobile Navigation
   ======================================== */
@media (max-width: 768px) {
  .header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background: #008ec7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
    box-shadow: none;
  }

  .header .inner {
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }

  .header h1 {
    margin: 0;
    padding: 0;
    height: 60vh;
  }

  .header h1 a {
    background: url(../images/logo/d.png) no-repeat center 0;
    width: 300px;
    text-indent: -9999px;
    display: block;
    margin: 30px auto 0;
    height: 350px;
    text-decoration: none;
    border: none;
  }
  .header #ticker {
    padding: 0;
  }

  .header .shadow {
    display: block;
    top: 100vh;
  }

  /* Remove extra padding as header is no longer fixed on load */
  body {
    padding-top: 0;
  }

  /* Mobile canvas */

  .menu-toggle {
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px;
  }
  .navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: none; /* Ensure no unwanted shifts */
  }

  .navigation.active {
    opacity: 1;
    visibility: visible;
  }

  /* Site title is for the sticky desktop bar – hide it inside the overlay */
  .nav-site-title {
    display: none;
  }

  /* Close (x) button lives inside the overlay so it sits above it */
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: var(--menu-toggle-size);
    height: var(--menu-toggle-size);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    z-index: 1002;
    transition: background var(--transition-fast);
  }

  .nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .nav-close svg {
    width: 30px;
    height: 30px;
    fill: #fff;
  }

  .nav {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-xl) 0;
    width: 100%;
    max-height: none;
    box-shadow: none;
    background: transparent;
    position: static;
  }

  .nav li {
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .navigation.active .nav li {
    opacity: 1;
    transform: translateY(0);
  }

  .navigation.active .nav li:nth-child(1) {
    transition-delay: 0.1s;
  }
  .navigation.active .nav li:nth-child(2) {
    transition-delay: 0.2s;
  }
  .navigation.active .nav li:nth-child(3) {
    transition-delay: 0.3s;
  }
  .navigation.active .nav li:nth-child(4) {
    transition-delay: 0.4s;
  }

  .nav li a {
    color: white;
    font-size: 1.5rem;
    padding: var(--spacing-sm);
    justify-content: center;
    border-radius: 0;
  }

  .nav li a:hover,
  .nav li a.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: var(--spacing-xs);
  }

  /* Fit quiz: hide the extra questions, keep 5 (incl. the disqualifier) */
  .fit-quiz-item--extra {
    display: none;
  }
}

/* Global Icon Styles */
.nav-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  margin-right: 4px;
  fill: white;
}

.social-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  margin-right: 4px;
}

.icon-menu,
.icon-close {
  width: 30px;
  height: 30px;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Desktop Navigation */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}

/* ========================================
   Sections
   ======================================== */
section {
  padding: var(--spacing-xl) 0;
  overflow-x: hidden;
  border-bottom: 1px solid #ccc;
}

section:first-of-type {
  padding-top: var(--spacing-lg);
}

/* Section Backgrounds Span Full Width */
section {
  width: 100%;
}

section > .inner {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Carousel Container - Full Width */
.carousel-container {
  position: relative;
  width: 100%;
}

/* Carousel - Full Width with items fitting viewport */
.carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: clamp(2rem, 5vw, 6rem);
  padding: var(--spacing-sm) var(--spacing-lg);
  /* Hide scrollbars */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* Ensure items don't shrink and maintain gap */
  align-items: stretch;
}

.carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.carousel-item {
  flex: 0 0 calc(100vw - (2 * var(--spacing-lg)));
  scroll-snap-align: start;
  min-width: 0;
  box-sizing: border-box;
}

/* Entrance animation: items drift in slightly from the right when scrolled into view.
   Gated behind .animate-ready (added by JS) so no-JS users see items immediately. */
@media (prefers-reduced-motion: no-preference) {
  .carousel.animate-ready .carousel-item,
  .references-grid.animate-ready .reference-year {
    opacity: 0;
    transform: translateX(40px);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease;
  }

  .carousel.animate-ready.in-view .carousel-item,
  .references-grid.animate-ready.in-view .reference-year {
    opacity: 1;
    transform: translateX(0);
  }

  .carousel.animate-ready.in-view .carousel-item:nth-child(1),
  .references-grid.animate-ready.in-view .reference-year:nth-child(1) {
    transition-delay: 0.05s;
  }
  .carousel.animate-ready.in-view .carousel-item:nth-child(2),
  .references-grid.animate-ready.in-view .reference-year:nth-child(2) {
    transition-delay: 0.12s;
  }
  .carousel.animate-ready.in-view .carousel-item:nth-child(3),
  .references-grid.animate-ready.in-view .reference-year:nth-child(3) {
    transition-delay: 0.19s;
  }
  .carousel.animate-ready.in-view .carousel-item:nth-child(4),
  .references-grid.animate-ready.in-view .reference-year:nth-child(4) {
    transition-delay: 0.26s;
  }
  .carousel.animate-ready.in-view .carousel-item:nth-child(5),
  .references-grid.animate-ready.in-view .reference-year:nth-child(5) {
    transition-delay: 0.33s;
  }
  .carousel.animate-ready.in-view .carousel-item:nth-child(n + 6),
  .references-grid.animate-ready.in-view .reference-year:nth-child(n + 6) {
    transition-delay: 0.4s;
  }
}

/* Desktop - show more items */
@media (min-width: 769px) {
  .carousel {
    padding-left: 15%;
    padding-right: 15%;
  }

  .carousel-item {
    flex: 0 0 calc((100% - (2 * var(--spacing-lg))) / 3);
  }
}

@media (min-width: 1024px) {
  .carousel-item {
    flex: 0 0 calc((100% - (3 * var(--spacing-lg))) / 4);
  }
}

/* ========================================
   About Section
   ======================================== */
/* ========================================
   About, Mission & Work Areas Sections
   ======================================== */
#about,
#mission {
  background: url(../images/patterns/dot-grid.png.jpeg);
  background-size: auto;
  background-repeat: repeat;
}

#work-areas {
  background: url(../images/patterns/vintage-leaves.png);
  background-size: auto;
  background-repeat: repeat;
}

#work-methods {
  background: url(../images/patterns/geometry2.png);
  background-size: auto;
  background-repeat: repeat;
}

#about-slider,
#mission-slider,
#work-areas-slider,
#work-methods-slider {
  padding: 0;
}

#about-slider .carousel,
#mission-slider .carousel,
#work-areas-slider .carousel,
#work-methods-slider .carousel {
  padding: var(--spacing-lg) 0;
}

/* The mission items carry their own padding on top of the shared one above,
   which pushed the first illustration far below the section header. */
#mission-slider .carousel {
  padding-top: var(--spacing-sm);
}

#about-slider .carousel-item,
#mission-slider .carousel-item,
#work-areas-slider .carousel-item,
#work-methods-slider .carousel-item {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

@media (min-width: 769px) {
  #about-slider .carousel {
    padding-left: 15%;
    padding-right: 15%;
  }

  #about-slider .carousel-item,
  #mission-slider .carousel-item,
  #work-areas-slider .carousel-item,
  #work-methods-slider .carousel-item {
    flex: 0 0 50%;
    width: 50%;
    scroll-snap-align: start;
  }

  #mission-slider .carousel,
  #work-areas-slider .carousel,
  #work-methods-slider .carousel {
    padding-left: 0;
    padding-right: 0;
  }

  #mission-slider .carousel-item,
  #work-areas-slider .carousel-item,
  #work-methods-slider .carousel-item {
    flex: 0 0 50%;
    width: 50%;
    scroll-snap-align: start;
  }
}

@media (min-width: 1024px) {
  #about-slider .carousel-item,
  #work-areas-slider .carousel-item,
  #work-methods-slider .carousel-item {
    flex: 0 0 33.333%;
    width: 33.333%;
    scroll-snap-align: start;
  }

  /* Mission stays at 2 items even on wide desktops, giving each slide's
     text more breathing room instead of shrinking to a 3-up grid. */
  #mission-slider .carousel-item {
    flex: 0 0 50%;
    width: 50%;
    scroll-snap-align: start;
  }
}

/* Section sliders: first item starts slightly inset toward the centre.
   Free snap so the JS entrance nudge (slight shift left) can rest without
   being yanked back to the start. Tablet/desktop only — mobile keeps full-width cards. */
@media (min-width: 769px) {
  #mission-slider .carousel,
  #work-areas-slider .carousel,
  #work-methods-slider .carousel,
  #featured-slider .carousel {
    scroll-snap-type: none;
    padding-left: clamp(2rem, 7vw, 7rem);
    scroll-padding-left: clamp(2rem, 7vw, 7rem);
  }
}

#about-slider .inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

#about-slider img {
  flex: 0 0 200px;
  max-width: 200px;
  height: 200px;
  border-radius: 4px;
  object-fit: contain;
  object-position: center bottom;
}

#about-slider .text {
  flex: 1;
  min-width: 280px;
}

#about-slider h3 {
  margin-top: 0;
}

/* ========================================
   Featured Section - Single item carousel
   ======================================== */
#arbeit {
  background: white;
}

#featured-slider {
  padding: 0;
}

#featured-slider .carousel {
  padding: var(--spacing-lg) 0;
}

@media (min-width: 769px) {
  #featured-slider .carousel {
    padding-left: 10%;
    padding-right: 10%;
  }
}

#featured-slider .carousel-item {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  scroll-snap-align: center;
  margin: 0 10%;
}

#featured-slider article {
  border-radius: 8px;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

#featured-slider article:hover {
  transform: var(--card-hover-transform);
}

#featured-slider .chrome {
  background: white;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#featured-slider .title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-dark);
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
}

#featured-slider .title .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

#featured-slider .title .dot:nth-child(1) {
  background: #ff5f56;
}
#featured-slider .title .dot:nth-child(2) {
  background: #ffbd2e;
}
#featured-slider .title .dot:nth-child(3) {
  background: #27c93f;
  margin-right: var(--spacing-xs);
}

#featured-slider .title-text {
  flex: 1;
  text-align: center;
  margin-right: 40px; /* offset for dots to center text better */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font:
    0.8rem/1 "Mona Sans VF",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
}

#featured-slider .title img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

#featured-slider .url {
  background: var(--bg-light);
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-size: 0.7rem;
  color: var(--text-light);
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#featured-slider .screenshot {
  padding: 0;
  background: white;
}

#featured-slider .screenshot img {
  width: 100%;
  /*
  height: clamp(200px, 40vw, 700px);
  object-fit: cover;
  object-position: top left;
*/
  display: block;
}

#featured-slider .content {
  padding: var(--spacing-md);
}

#featured-slider h3 {
  margin-top: 0;
}

#featured-slider .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
}

#featured-slider .tags span {
  background: var(--secondary-color);
  color: white;
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: 20px;
  font-size: 0.75rem;
}

@media (min-width: 1440px) {
  #featured-slider .carousel-item {
    flex-direction: row;
    /* Top-align so the browser chrome keeps its natural height
           (title bar + screenshot) instead of stretching to the taller
           text column and leaving white space below the screenshot. */
    align-items: flex-start;
  }
  #featured-slider .content {
    width: 50%;
  }
  #featured-slider .carousel-item .chrome {
    order: 2;
    width: 50%;
  }
}

/* ========================================
   References Section
   ======================================== */
#referenzen {
  background: var(--bg-light);
  padding-bottom: 0;
}

#referenzen .carousel {
  padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

.reference-year {
  scroll-snap-align: center;
  max-width: 320px;
}

@media (min-width: 769px) {
  #referenzen .carousel {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.reference-year h3 {
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
}

.reference-year a,
.reference-year span {
  display: block;
  color: var(--text-color);
}

.reference-year a:hover {
  color: var(--secondary-color);
}

.reference-card {
  display: block;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 3;
  width: 100%;
}

.reference-card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-shadow-lg);
}

.reference-card:hover .reference-card-content {
  opacity: 1;
  transform: translateY(0);
}

.reference-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  flex-shrink: 0;
}

/* ========================================
   Lightbox
   ======================================== */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

.lightbox-container {
  position: relative;
  width: 90%;
  height: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2001;
}

.lightbox-content {
  position: relative;
  max-width: 100%;
  max-height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.lightbox-image.loaded {
  opacity: 1;
  transform: scale(1);
}

.lightbox-caption {
  color: white;
  margin-top: 15px;
  font-size: 1.1rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 80%;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
  padding: 10px;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: var(--primary-color, #007bff);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 60px;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2002;
  height: 100px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: -60px;
}

.lightbox-next {
  right: -60px;
}

@media (max-width: 1400px) {
  .lightbox-prev {
    left: 10px;
  }
  .lightbox-next {
    right: 10px;
  }
}

@media (max-width: 768px) {
  .lightbox-container {
    width: 100%;
    height: 100%;
  }
  .lightbox-prev,
  .lightbox-next {
    display: none !important; /* Use swipe on mobile */
  }
  .lightbox-close {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .lightbox-caption {
    font-size: 0.9rem;
  }
}

.reference-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: var(--color-white-95);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.reference-card h4 {
  margin-top: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reference-card .year {
  display: none;
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.reference-card .tags {
  display: none;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.reference-card .tags span {
  background: var(--secondary-color);
  color: white;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: 20px;
  font-size: 0.7rem;
}

.kunden {
  background: var(--bg-dark);
  color: var(--color-white-70);
  padding: var(--spacing-lg) var(--spacing-sm);
  text-align: center;
}

@media (min-width: 769px) {
  .kunden {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

.kunden h2 {
  color: white;
}

/* Filter buttons */
.kunden-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.kunden-filter-btn {
  background: transparent;
  border: 1px solid var(--color-white-50);
  color: var(--color-white-70);
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.kunden-filter-btn:hover {
  border-color: white;
  color: white;
}

.kunden-filter-btn.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
}

/* Customer list */
.kunden-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs) var(--spacing-md);
  padding: 0;
  margin: 0;
}

.kunden-item {
  color: var(--color-white-70);
  font-size: 1rem;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.kunden-item.dimmed {
  opacity: 0.25;
}

/* Breathing room below the references carousel controls before the next section */
#referenzen .carousel-controls {
  padding-bottom: var(--spacing-xl);
}

/* Mobile overrides (placed after the base rules so they win the cascade) */
@media (max-width: 768px) {
  /* References: show exactly one year per carousel view */
  .reference-year {
    flex: 0 0 100%;
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  /* Customers: flow inline like desktop instead of one per line */
  .kunden-list {
    display: block;
    text-align: center;
    line-height: 1.9;
  }

  .kunden-item {
    display: inline;
  }

  .kunden-item:not(:last-child)::after {
    content: "·";
    margin: 0 0.5em;
  }
}

/* ========================================
   Team Section
   ======================================== */
#team {
  background: white;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
}

.team-member {
  flex: 1 1 400px;
  max-width: 540px;
  background: var(--bg-light);
  border-radius: 8px;
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--card-shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.team-member:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-shadow-lg);
}

.team-member .avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  overflow: hidden;
}

.team-member .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member h4 {
  margin-top: 0;
}

.team-member .position {
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.team-member .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
}

.team-member .tags span {
  background: var(--secondary-color);
  color: white;
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: 20px;
  font-size: 0.75rem;
}

/* ========================================
   Contact Section
   ======================================== */
#kontakt {
  position: relative;
  padding: var(--spacing-xl) 0 0;
}

/* Single card holding info + form, floating over the map.
   Vertically centered, left third of the map stays free for the markers. */
.contact-container {
  position: absolute;
  left: 33%;
  right: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  max-width: 960px;
  z-index: 999;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .contact-container {
    inset: var(--spacing-sm);
    top: var(--spacing-sm);
    transform: none;
    flex-direction: column;
    overflow: auto;
  }
}

/* Map as background within contact container, non-interactive */
.map-background {
  width: 100%;
  min-height: 800px;
  position: relative;
}

/* Vanilla JS Map Styles */
.map-pane {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #dedede;
}

.map-tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-tile {
  position: absolute;
  background-size: 100% 100%;
}

.map-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-marker {
  position: absolute;
  width: 41px;
  height: 41px;
  background:
    url(../images/marker/marker-icon.png) no-repeat center,
    url(../images/marker/marker-shadow.png) no-repeat 10px 0;
  cursor: pointer;
  transform: translate(0, -20px);
}

/* Info + form are two columns inside the single card */
.contact-form,
.contact-info {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* Vertical divider between the two columns (inset top/bottom) */
.contact-info::after {
  content: "";
  position: absolute;
  top: var(--spacing-lg);
  bottom: var(--spacing-lg);
  right: 0;
  width: 1px;
  background: #e0e0e0;
}

/* Postage stamp sits in the top-right of the form column */
.contact-stamp {
  display: block;
  width: 92px;
  height: auto;
  margin: 0 0 var(--spacing-lg) auto;
}

@media (max-width: 768px) {
  .contact-form,
  .contact-info {
    flex: 0 0 auto;
    padding: var(--spacing-lg);
  }

  /* Stack: turn the vertical divider into a horizontal one */
  .contact-info::after {
    display: none;
  }

  /* Hide the postage stamp on mobile */
  .contact-stamp {
    display: none;
  }

  .contact-info {
    border-bottom: 1px solid #e0e0e0;
  }
}

.contact-form h3,
.contact-info h3 {
  margin-top: 0;
}

.contact-form small {
  display: block;
  margin-bottom: var(--spacing-md);
  font-size: 12px;
  line-height: 1.4;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

/* Visually hidden, but still announced by screen readers */
.form-group label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.btn {
  display: inline-block;
  background: var(--secondary-color);
  color: white;
  padding: var(--spacing-xs) var(--spacing-lg);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.contact-info p {
  margin-bottom: var(--spacing-sm);
}

.contact-info strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: var(--spacing-xxs);
}

/* ========================================
   Footer
   ======================================== */
footer {
  background: var(--bg-dark);
  color: white;
  padding: var(--spacing-lg) 0;
  text-align: center;
}

footer .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 1rem
}

footer p {
  margin: 0;
  color: var(--color-white-70);
}

footer a {
  color: var(--color-white-70);
  transition: color var(--transition-fast);
}

footer a:hover {
  color: white;
}

/* ========================================
   Legal Pages
   ======================================== */
.legal-page {
  padding: var(--spacing-xl) 0;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: var(--spacing-xl);
  border-radius: 8px;
  box-shadow: var(--legal-shadow);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
  :root {
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .header h1 {
    font-size: 2rem;
  }

  .nav {
    flex-direction: column;
  }

  .nav li a {
    justify-content: center;
  }

  #about-slider .inner {
    flex-direction: column;
  }

  #about-slider img {
    width: 100%;
    max-width: 100%;
  }

  footer .inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  section {
    padding: var(--spacing-lg) 0;
  }

  .featured-slider {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .references-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Utilities
   ======================================== */
.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

/* ========================================
   Contact Info Layout
   ======================================== */
.contact-info-columns {
  display: flex;
  gap: var(--spacing-lg);
}

.contact-info-column {
  flex: 1;
}

@media (max-width: 768px) {
  .contact-info-columns {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* ========================================
   Mission & Work-Areas Section - New Layout
   ======================================== */

/* Position navigation next to headers */
#mission > .carousel-nav.nav-header,
#work-areas > .carousel-nav.nav-header,
#work-methods > .carousel-nav.nav-header {
  position: absolute;
  top: 0;
  right: var(--spacing-md);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}

/* Buttons inside nav-header sit inline, not absolutely positioned */
#mission > .carousel-nav.nav-header .carousel-btn,
#work-areas > .carousel-nav.nav-header .carousel-btn,
#work-methods > .carousel-nav.nav-header .carousel-btn {
  position: static;
  transform: none;
}

#mission > .carousel-nav.nav-header .carousel-btn:hover,
#work-areas > .carousel-nav.nav-header .carousel-btn:hover,
#work-methods > .carousel-nav.nav-header .carousel-btn:hover {
  transform: scale(1.1);
}

#mission > .carousel-nav.nav-header .carousel-btn:active,
#work-areas > .carousel-nav.nav-header .carousel-btn:active,
#work-methods > .carousel-nav.nav-header .carousel-btn:active {
  transform: scale(0.95);
}

#mission,
#work-areas,
#work-methods {
  position: relative;
}

/* Section header: centered headline and subhead, nav stays top-right */
#mission > .inner,
#work > .inner,
#referenzen > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  position: relative;
}

#mission > .inner h2,
#work > .inner h2,
#referenzen > .inner h2 {
  text-align: center;
  margin: 0 0 var(--spacing-xs) 0;
}

#mission > .inner h2::after,
#work > .inner h2::after,
#referenzen > .inner h2::after {
  margin-left: auto;
  margin-right: auto;
}

#mission > .inner p,
#work > .inner p,
#referenzen > .inner p {
  text-align: center;
  margin: 0;
}

/* The mission slider's items already carry their own padding, so the shared
   section-header gap above reads as doubled here. Pull the slider up close. */
#mission > .inner {
  margin-bottom: var(--spacing-xs);
}

/* Tighten subtitle gap for sections whose .inner also holds other content
   (so the full mission-style flex rule above can't be applied here) */
#arbeit > .inner h2,
#passung > .inner h2,
#kontakt > .inner h2 {
  margin-bottom: var(--spacing-xs);
}

/* Desktop: Horizontal layout image left, text right. Stacking is reserved
   for the mobile block further down. */
@media (min-width: 769px) {
  /* Items default to equal height, which would leave the image floating far
     below short copy. Size each item to its own content instead, so the
     bottom edge below is the text's own bottom edge. */
  #mission-slider .carousel,
  #work-areas-slider .carousel,
  #work-methods-slider .carousel {
    align-items: flex-start;
  }

  #mission-slider .carousel-item,
  #work-areas-slider .carousel-item,
  #work-methods-slider .carousel-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-md);
  }

  #mission-slider img,
  #work-areas-slider img,
  #work-methods-slider img {
    flex: 0 0 auto;
    width: 225px;
    max-width: 225px;
    height: auto;
    border-radius: 4px;
  }

  #mission-slider .text,
  #work-areas-slider .text,
  #work-methods-slider .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
  }
}

/* Desktop: Multi-item */
@media (min-width: 1024px) {
  #mission-slider img,
  #work-areas-slider img,
  #work-methods-slider img {
    height: auto;
  }
}

/* Tablet: Medium layout (mobile) */
@media (max-width: 768px) {
  #mission-slider .carousel-item,
  #work-areas-slider .carousel-item,
  #work-methods-slider .carousel-item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  #mission-slider img,
  #work-areas-slider img,
  #work-methods-slider img {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 4px;
    /* The column layout stacks the image above the text; without this it
       would sit flush left instead of over the middle of the copy. */
    align-self: center;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .navigation,
  footer {
    display: none;
  }

  body {
    background: white;
  }

  section {
    padding: 0;
  }
}

/* ========================================
   Unsere Arbeit — two columns of accordions
   ======================================== */
.work {
  background: url(../images/patterns/vintage-leaves.png) repeat;
}

.work > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.work-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl) var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 769px) {
  .work-columns {
    grid-template-columns: 1fr 1fr;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.accordion-item {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.accordion-item.is-open {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  border-color: #008ec7;
}

.accordion-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--primary-color);
  transition: background var(--transition-fast);
}

.accordion-header:hover {
  background: rgba(0, 142, 199, 0.05);
}

.accordion-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: #008ec7;
}

.accordion-title {
  flex: 1 1 auto;
  line-height: 1.3;
}

.accordion-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid #008ec7;
  border-bottom: 2px solid #008ec7;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  margin-right: 4px;
}

.accordion-item.is-open .accordion-chevron {
  transform: rotate(-135deg);
}

/* Collapsible panel: animate height via grid rows (0fr -> 1fr) */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-normal);
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
}

.accordion-panel-inner > * {
  margin: 0;
  /* equal padding on all four sides */
  padding: var(--spacing-md);
  color: var(--text-light);
  line-height: 1.55;
}

/* ========================================
   Fit Quiz — "Passen wir zusammen?"
   ======================================== */
.fit-quiz {
  background: var(--bg-light);
  padding: var(--spacing-xl) 0;
}

.fit-quiz > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fit-quiz-intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-light);
  line-height: 1.6;
}

.fit-quiz-form {
  width: 100%;
  max-width: 900px;
  margin: var(--spacing-lg) auto 0;
}

.fit-quiz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  text-align: left;
}

@media (min-width: 769px) {
  .fit-quiz-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm) var(--spacing-lg);
  }
}

.fit-quiz-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: 10px;
  background: white;
  border: 1px solid var(--border-color);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  height: 100%;
}

.fit-quiz-item label:hover {
  border-color: #008ec7;
  box-shadow: 0 2px 10px rgba(0, 142, 199, 0.12);
}

/* Hide native checkbox, keep it accessible */
.fit-quiz-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fit-quiz-box {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2px solid #cfd8dc;
  border-radius: 6px;
  background: white;
  position: relative;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.fit-quiz-box::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--transition-fast);
}

.fit-quiz-checkbox:checked + .fit-quiz-box {
  background: #008ec7;
  border-color: #008ec7;
}

.fit-quiz-checkbox:checked + .fit-quiz-box::after {
  transform: rotate(45deg) scale(1);
}

.fit-quiz-checkbox:focus-visible + .fit-quiz-box {
  outline: 3px solid rgba(0, 142, 199, 0.4);
  outline-offset: 2px;
}

.fit-quiz-checkbox:checked ~ .fit-quiz-text {
  color: var(--text-color);
  font-weight: 500;
}

.fit-quiz-text {
  line-height: 1.45;
  color: var(--text-color);
}

.fit-quiz-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}

.fit-quiz-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.9rem;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.fit-quiz-reset::before {
  content: "\21BA";
  font-size: 1.15em;
  line-height: 1;
}

.fit-quiz-reset:hover {
  color: #008ec7;
}

/* Result */
.fit-quiz-result {
  width: 100%;
  max-width: 600px;
  margin: var(--spacing-lg) auto 0;
  padding: var(--spacing-lg);
  border-radius: 14px;
  background: white;
  border: 2px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition:
    border-color var(--transition-normal),
    background var(--transition-normal);
}

/* Success graphic: plain CSS animations only (no SMIL/SVG-SMIL, no <img>).
   SMIL support is unreliable in Safari, especially for long chained
   animations — CSS @keyframes behave consistently across browsers and
   restart cleanly every time .is-fit is toggled off and back on. */
.fit-quiz-match-img {
  display: none;
  position: relative;
  width: 140px;
  max-width: 100%;
  margin: 0 auto var(--spacing-md);
}

.fit-quiz-result.is-fit .fit-quiz-match-img {
  display: block;
}

.fit-quiz-success-circle {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.fit-quiz-success-bg {
  fill: #008ec7;
  transform-origin: 60px 60px;
  opacity: 0;
  transform: scale(0.3);
}

.fit-quiz-success-check {
  fill: none;
  stroke: #fff;
  stroke-width: 9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
}

.fit-quiz-result.is-fit .fit-quiz-success-bg {
  animation: fitSuccessPop 0.45s cubic-bezier(0.25, 1.4, 0.4, 1) both;
}

.fit-quiz-result.is-fit .fit-quiz-success-check {
  animation: fitSuccessCheck 0.3s ease-out 0.4s both;
}

@keyframes fitSuccessPop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fitSuccessCheck {
  to {
    stroke-dashoffset: 0;
  }
}

/* Confetti burst: each dot's wrapper is statically rotated to its own angle
   (via the --i custom property), so the ::before pseudo-element only ever
   needs a plain translateY to fly outward radially — no trig functions. */
.fit-quiz-success-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fit-quiz-success-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 25.7deg));
}

.fit-quiz-success-dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}

.fit-quiz-success-dot:nth-child(4n + 1)::before {
  background: #ff5252;
}
.fit-quiz-success-dot:nth-child(4n + 2)::before {
  background: #21c45c;
}
.fit-quiz-success-dot:nth-child(4n + 3)::before {
  background: #2bb7ff;
}
.fit-quiz-success-dot:nth-child(4n)::before {
  background: #ffb020;
}

.fit-quiz-result.is-fit .fit-quiz-success-dot::before {
  animation: fitSuccessConfetti 0.7s ease-out both;
  animation-delay: calc(var(--i) * 0.015s);
}

@keyframes fitSuccessConfetti {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-58px) scale(0.9);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fit-quiz-result.is-fit .fit-quiz-success-bg,
  .fit-quiz-result.is-fit .fit-quiz-success-check,
  .fit-quiz-result.is-fit .fit-quiz-success-dot::before {
    animation: none;
  }
  .fit-quiz-result.is-fit .fit-quiz-success-bg {
    opacity: 1;
    transform: scale(1);
  }
  .fit-quiz-result.is-fit .fit-quiz-success-check {
    stroke-dashoffset: 0;
  }
}

.fit-quiz-zonk-img {
  display: none;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto var(--spacing-md);
  image-rendering: pixelated;
}

.fit-quiz-result.is-zonk .fit-quiz-zonk-img {
  display: block;
}

.fit-quiz-meter {
  height: 10px;
  border-radius: 999px;
  background: var(--border-color);
  overflow: hidden;
}

.fit-quiz-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #008ec7;
  transition:
    width var(--transition-normal),
    background var(--transition-normal);
}

.fit-quiz-score {
  margin: var(--spacing-md) 0 var(--spacing-xs);
  font-size: 1.05rem;
  color: var(--text-light);
}

.fit-quiz-count {
  font-size: 1.6rem;
  font-weight: 700;
  color: #008ec7;
}

.fit-quiz-message {
  margin: 0;
  line-height: 1.5;
  color: var(--text-color);
}

.fit-quiz-cta {
  display: none;
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, #2bb7ff, #008ec7);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: filter var(--transition-fast);
}

.fit-quiz-cta:hover {
  filter: brightness(0.93);
  color: white;
}

/* Good-fit state */
.fit-quiz-result.is-fit {
  border-color: #008ec7;
  background: #eff8fd;
}

.fit-quiz-result.is-fit .fit-quiz-meter-fill {
  background: linear-gradient(90deg, #ff5252, #008ec7);
}

.fit-quiz-result.is-fit .fit-quiz-count {
  color: #008ec7;
}

.fit-quiz-result.is-fit .fit-quiz-cta {
  display: inline-block;
}

/* Zonk (disqualifying) state */
.fit-quiz-result.is-zonk {
  border-color: #d12e2e;
  background: #fbf0f0;
}

.fit-quiz-result.is-zonk .fit-quiz-meter-fill {
  background: #d12e2e;
}

.fit-quiz-result.is-zonk .fit-quiz-count {
  color: #d12e2e;
}

.fit-quiz-result.is-zonk .fit-quiz-meter,
.fit-quiz-result.is-zonk .fit-quiz-score {
  display: none;
}

.fit-quiz-item--disqualify .fit-quiz-checkbox:checked + .fit-quiz-box {
  background: #d12e2e;
  border-color: #d12e2e;
}

#ticker {
  hyphens: none;
  max-width: 320px;
  padding-right: 40px;
}

#ticker span.cursor {
  position: relative;
  width: 0;
}

#ticker span.cursor span {
  position: absolute;
  left: 10px;
}

@media screen and (min-width: 768px) {
  #ticker {
    font-size: 2.4rem;
    margin-top: 1rem;
    height: 6rem;
    text-align: left;
  }
}

@media screen and (min-width: 1280px) {
  #top .inner h1 {
    width: 33%;
  }
  #ticker {
    font-size: 3rem;
    max-width: 480px;
  }
}