@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

/* Local regular woff2 kept as fallback only for regular weight */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color tokens - FLEX brand magenta/indigo theme */
  --primary: #b08d57;
  --primary-hover: #9c7b48;
  --primary-rgb: 176, 141, 87;

  --bg-color: #ffffff;
  --surface-color: #ffffff;
  --surface-border: #e2e8f0;
  --surface-container: #f2f2f2;
  --surface-bright: #e5e7eb;
  --image-container-bg: #f2f2f2;

  --text-color: #000;
  --text-muted: #000;
  --text-light: #000;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 16px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  --transition-base: none;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --text-xs: clamp(0.7rem, calc(12 * 100vw / 1920), 0.75rem);
  --text-sm: clamp(0.8rem, calc(14 * 100vw / 1920), 0.875rem);
  --text-base-size: clamp(0.9rem, calc(16 * 100vw / 1920), 1rem);
  --text-lg: clamp(1rem, calc(18 * 100vw / 1920), 1.125rem);
  --text-xl: clamp(1.1rem, calc(20 * 100vw / 1920), 1.25rem);
  --text-2xl: clamp(1.25rem, calc(24 * 100vw / 1920), 1.5rem);
  --text-3xl: clamp(1.5rem, calc(30 * 100vw / 1920), 1.875rem);
  --text-4xl: clamp(1.75rem, calc(36 * 100vw / 1920), 2.25rem);
  --text-5xl: clamp(2.25rem, calc(48 * 100vw / 1920), 3rem);
  --text-6xl: clamp(2.5rem, calc(60 * 100vw / 1920), 3.75rem);
  --text-7xl: clamp(3rem, calc(72 * 100vw / 1920), 4.5rem);
  --text-8xl: clamp(3.5rem, calc(96 * 100vw / 1920), 6rem);
  --text-9xl: clamp(4rem, calc(128 * 100vw / 1920), 8rem);
  --text-10xl: clamp(4.5rem, calc(160 * 100vw / 1920), 10rem);
  /* Spacing (Fluid from 320px to 1280px) */
  --sp-2: clamp(0.25rem, 0.42vw + 0.17rem, 0.5rem);
  --sp-4: clamp(0.75rem, 0.42vw + 0.67rem, 1rem);
  --sp-6: clamp(1rem, 0.83vw + 0.83rem, 1.5rem);
  --sp-8: clamp(1.5rem, 0.83vw + 1.33rem, 2rem);
  --sp-12: clamp(2rem, 1.67vw + 1.67rem, 3rem);
  --sp-16: clamp(2.5rem, 2.5vw + 2rem, 4rem);
  --sp-24: clamp(3.5rem, 4.17vw + 2.67rem, 6rem);
  
  /* Section Spacing Variable */
  --section-gap: clamp(32px, 7.5vw, 96px);
}


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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: var(--transition-base);
  overflow-x: hidden;
  padding: 0;
  
  /* Optimize word breaks for German */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  
  /* Fine-tune hyphenation limits (Point 1) */
  -webkit-hyphenate-limit-chars: auto 3 3;
  hyphenate-limit-chars: auto 3 3;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;

  /* Smarter spacing for justified text (Point 3) */
  text-justify: inter-word;
}

/* Typography strict reset and rules */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  
  /* Prevent orphans in headlines */
  text-wrap: balance;
}

p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-weight: 300;
  
  /* Prevent orphans at the end of paragraphs */
  text-wrap: pretty;
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-xl);
  font-weight: 300;
}

h2+h3>span:first-child {
  font-weight: 500;
}

h4 {
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.3;
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Floating Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background-color: #f1f5f9;
}

.theme-toggle .theme-icon--sun {
  display: none;
}

.theme-toggle .theme-icon--moon {
  display: block;
}

/* Dark Mode styles */
body.theme-dark .theme-toggle {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #2e2e2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.theme-dark .theme-toggle:hover {
  background-color: #2a2a2a;
}

body.theme-dark .theme-toggle .theme-icon--sun {
  display: block;
}

body.theme-dark .theme-toggle .theme-icon--moon {
  display: none;
}

body.theme-dark .media-container {
  border-color: #2e2e2e;
}

/* --- VIEW 1: PDF REPLICA (Responsive Layout) --- */
.project-grid {
  display: grid;
  gap: var(--section-gap);
  width: 100%;
  margin: 0 auto;
}

.project-grid__row {
  display: grid;
  gap: 20px;
  width: 100%;
  align-items: stretch;
  grid-template-columns: 1fr;
  /* Mobile first: 1 column */
}

@media (min-width: 769px) {
  .project-grid__row--normal {
    grid-template-columns: 4fr 6fr;
    /* Desktop: 2 columns */
  }

  .project-grid__row--reverse {
    grid-template-columns: 6fr 4fr;
    /* Desktop: 2 columns */
  }
}

.media-container {
  container-type: inline-size;
  position: relative;
  width: 100%;
  display: grid;
  grid-auto-rows: 1fr;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.media-container__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}



/* local font-face override commented out to prevent overriding Google Fonts weights */
/* @font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
} */

:root {
  --bg-color: #ffffff;
  --surface-border: #e2e8f0;
  --text-color: #000;
  --spacing-16: 16px;
  --spacing-32: 32px;
}


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

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* --- Project Header Styles --- */





@media (min-width: 769px) {}



@media (min-width: 769px) {}



@media (max-width: 768px) {
  :root {
    --text-3xl: clamp(1.25rem, calc(24 * 100vw / 768), 1.5rem);
    --text-4xl: clamp(1.5rem, calc(30 * 100vw / 768), 1.75rem);
    --text-5xl: clamp(1.75rem, calc(36 * 100vw / 768), 2rem);
    --text-6xl: clamp(2rem, calc(40 * 100vw / 768), 2.25rem);
    --text-7xl: clamp(2.25rem, calc(48 * 100vw / 768), 2.5rem);
    --text-8xl: clamp(2.5rem, calc(56 * 100vw / 768), 3rem);
    --text-9xl: clamp(3rem, calc(64 * 100vw / 768), 3.5rem);
    --text-10xl: clamp(3.5rem, calc(72 * 100vw / 768), 4rem);
  }

  /* Make hcob.html sections stack on mobile (except Iconografie) */
  #hcob-gb div[style*="grid-template-columns"],
  #hcob-zjb div[style*="grid-template-columns"],
  #hcob-ob div[style*="grid-template-columns"],
  #hcob-styleguide div[style*="grid-template-columns"],
  #hcob-whitepaper div[style*="grid-template-columns"],
  #hcob-werbemittel div[style*="grid-template-columns"],
  #hcob-packaging div[style*="grid-template-columns"],
  #report-item div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  #hcob-gb div[style*="grid-template-columns"] > div,
  #hcob-zjb div[style*="grid-template-columns"] > div,
  #hcob-ob div[style*="grid-template-columns"] > div,
  #hcob-styleguide div[style*="grid-template-columns"] > div,
  #hcob-whitepaper div[style*="grid-template-columns"] > div,
  #hcob-werbemittel div[style*="grid-template-columns"] > div,
  #hcob-packaging div[style*="grid-template-columns"] > div,
  #report-item div[style*="grid-template-columns"] > div {
    height: auto !important;
  }
  
  #hcob-gb div[style*="grid-template-columns"] > div > img,
  #hcob-zjb div[style*="grid-template-columns"] > div > img,
  #hcob-ob div[style*="grid-template-columns"] > div > img,
  #hcob-styleguide div[style*="grid-template-columns"] > div > img,
  #hcob-whitepaper div[style*="grid-template-columns"] > div > img,
  #hcob-werbemittel div[style*="grid-template-columns"] > div > img,
  #hcob-packaging div[style*="grid-template-columns"] > div > img,
  #report-item div[style*="grid-template-columns"] > div > img {
    height: auto !important;
  }
  
  /* Make hcob-valuable-franchise.html grid rows 1 column on mobile */
  .project-grid__row--half {
    grid-template-columns: 1fr !important;
  }
  .project-grid__row--half > div {
    height: auto !important;
  }
  .project-grid__row--half > div > img {
    height: auto !important;
  }
  
  /* Make hcob-valuable-franchise.html and bsfb-flex.html titles black on mobile */
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .report-preview__title-box h4,
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .report-preview__title-box h4 span,
  #bsfb-flex-intro-text ~ #bsfb-projects .report-preview__title-box h4,
  #bsfb-flex-intro-text ~ #bsfb-projects .report-preview__title-box h4 span {
    color: #1a1a1a !important;
  }
  
  /* Reduce gap between title and subtitle in hcob-valuable-franchise.html on mobile */
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .report-preview__title-box h4:nth-child(2) {
    margin-top: 0.25rem !important;
  }
  
  /* Increase gap between stacked images on mobile for hcob-valuable-franchise.html */
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .report-list,
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .project-grid__row--half {
    gap: 1.5rem !important;
  }
  
  /* Fix hcob iconografie layout on mobile to align title and remove huge gaps */
  #hcob-iconografie .media-container {
    aspect-ratio: auto !important;
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* Make iconografie items 2 columns on mobile so they fit better */
  #hcob-iconografie .grid-4-col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 !important;
  }
  
  /* Reset absolute-positioned collage layouts to single column on mobile */
  .grid-report-wrapper:has(.report-preview__asset) {
    aspect-ratio: auto !important;
    height: auto !important;
    padding-bottom: 2rem !important;
  }
  
  .grid-report-wrapper:has(.report-preview__asset) > div[style*="position: relative"],
  .grid-report-wrapper:has(.report-preview__asset) > div[style*="position: absolute"]:not(.report-preview__title-box) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    height: auto !important;
    position: relative !important;
  }
  
  .grid-report-wrapper .report-preview__asset {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
    /* Optional: retain shadow if it exists, otherwise the images look very flat against the background */
  }
}









/* Section Titles (matching page_6.webp) */
.section-header {
  width: 100%;
  margin-top: 40px;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 300;
}

h2+h3>span:first-child {
  font-weight: 500;
}

h4 {
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.3;
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Floating Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background-color: #f1f5f9;
}

.theme-toggle .theme-icon--sun {
  display: none;
}

.theme-toggle .theme-icon--moon {
  display: block;
}

/* Dark Mode styles */
body.theme-dark .theme-toggle {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #2e2e2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.theme-dark .theme-toggle:hover {
  background-color: #2a2a2a;
}

body.theme-dark .theme-toggle .theme-icon--sun {
  display: block;
}

body.theme-dark .theme-toggle .theme-icon--moon {
  display: none;
}

body.theme-dark .media-container {
  border-color: #2e2e2e;
}

/* --- VIEW 1: PDF REPLICA (Responsive Layout) --- */
.project-grid {
  display: grid;
  gap: var(--section-gap);
  width: 100%;
  margin: 0 auto;
}

.project-grid__row {
  display: grid;
  gap: 20px;
  width: 100%;
  align-items: stretch;
  grid-template-columns: 1fr;
  /* Mobile first: 1 column */
  position: relative;
}

@media (min-width: 769px) {
  .project-grid__row--normal {
    grid-template-columns: 4fr 6fr;
    /* Desktop: 2 columns */
  }

  .project-grid__row--reverse {
    grid-template-columns: 6fr 4fr;
    /* Desktop: 2 columns */
  }
}

.media-container {
  container-type: inline-size;
  position: relative;
  width: 100%;
  display: grid;
  grid-auto-rows: 1fr;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.media-container__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}



/* local font-face override commented out to prevent overriding Google Fonts weights */
/* @font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
} */

:root {
  --bg-color: #ffffff;
  --surface-border: #e2e8f0;
  --text-color: #0f172a;
}


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

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* --- Project Header Styles --- */





@media (min-width: 769px) {}



@media (min-width: 769px) {}



@media (max-width: 768px) {}









/* Section Titles (matching page_6.webp) */
.section-header {
  width: 100%;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  display: grid;
  gap: 4px;
}



.section-header__subtitle {
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--text-color);
  line-height: 1.2;
}

.section-header__title,
.section-header *:first-child {
  font-weight: 700 !important;
}

.section-header__subtitle,
.section-header__subtitle span,
.section-header *:nth-child(2),
.section-header *:nth-child(2) * {
  font-weight: 300 !important;
}

.report-preview__title-box h4:first-child {
  font-weight: 700 !important;
}

.report-preview__title-box h4:nth-child(2),
.report-preview__title-box h4:nth-child(2) span {
  font-weight: 300 !important;
}

/* Make text after pipe (|) thinner (font-weight: 200) */
.project-header__title span:nth-child(2),
.report-preview__title-box h4 span span,
#slider-title span:nth-child(2) {
  font-weight: 200 !important;
}

/* Enforce bold first line and light second line for logo items */
.logo-item h4 {
  font-weight: 700 !important;
}
.logo-item p {
  font-weight: 300 !important;
}

/* Floating Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--surface-border);
}

.theme-toggle .theme-icon--sun {
  display: none;
}

.theme-toggle .theme-icon--moon {
  display: block;
}

html.dark .theme-toggle .theme-icon--sun {
  display: block;
}

html.dark .theme-toggle .theme-icon--moon {
  display: none;
}

/* Lightbox Modal for Image Preview */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(9, 13, 22, 0.95);
  backdrop-filter: blur(10px);
  display: none;
  place-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.active {
  display: grid;
  opacity: 1;
}

.lightbox__content {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
  transform: scale(0.95);
  transition: transform 0.2s ease;
  cursor: zoom-out;
}

.lightbox.active .lightbox__content {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.lightbox__close:hover {
  color: #38bdf8;
  transform: rotate(90deg);
}

.project-grid {
  display: grid;
  gap: var(--section-gap);
  width: 100%;
}

.project-grid__row {
  display: grid;
  gap: var(--sp-4);
  width: 100%;
  align-items: stretch;
  position: relative;
}

.media-container {
  position: relative;
  width: 100%;
  display: grid;
  grid-auto-rows: 1fr;
  border-radius: 0;
  overflow: hidden;
}

.project-grid__row>.section-header {
  grid-column: 1 / -1;
}

.media-container__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive Grid Templates based on original widths */
/* Row 1: 830w vs 1565w -> ~1:1.88 */
.project-grid__row--1 {
  grid-template-columns: 1fr;
}

.project-grid__row--1 .media-container__image {
  object-fit: contain;
}

/* Row 2 & 3: 3 equal cols */
.project-grid__row--3cols {
  grid-template-columns: 1fr;
}

/* Row 4: 1700w vs 1460w -> ~1.16:1 */
.project-grid__row--4 {
  grid-template-columns: 1fr;
}

/* Row 5: 1805w vs 1150w -> ~1.57:1 */
.project-grid__row--5 {
  grid-template-columns: 1fr;
  background-color: var(--image-container-bg);
}

/* Row 6: 1590w vs 1410w -> ~1.13:1 */
.project-grid__row--6 {
  grid-template-columns: 1fr;
}

/* Row 7: 855w, 495w, 1015w -> ~1.7:1:2 */
.project-grid__row--7 {
  grid-template-columns: 1fr;
}

.project-grid__row--7 .media-container:nth-child(1),
.project-grid__row--7 .media-container:nth-child(2) {
  justify-content: center;
  background-color: var(--image-container-bg);
  gap: 0;
  padding: 5%;
}

.project-grid__row--7 .media-container:nth-child(1) .media-container__image,
.project-grid__row--7 .media-container:nth-child(2) .media-container__image {
  height: auto;
  object-fit: contain;
}

.project-grid__row--7 .media-container:nth-child(3) {
  gap: var(--sp-4);
}

.project-grid__row--7 .media-container:nth-child(3) .media-container__image {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Row 8: 1525w vs 710w -> ~2.15:1 */
.project-grid__row--8 {
  grid-template-columns: 1fr;
  background-color: var(--image-container-bg);
}

/* Row 9: 1580w vs 1580w -> 1:1 */
.project-grid__row--9 {
  grid-template-columns: 1fr;
}

.project-grid__row--full {
  grid-template-columns: 1fr;
}

@media (min-width: 769px) {
  .project-grid__row--1 {
    grid-template-columns: 830fr 1565fr;
  }

  .project-grid__row--3cols {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .project-grid__row--4 {
    grid-template-columns: 2fr 1fr;
  }

  .project-grid__row--5 {
    grid-template-columns: 1fr 1fr;
  }

  .project-grid__row--6 {
    grid-template-columns: 1fr 1fr;
  }

  .project-grid__row--7 {
    grid-template-columns: 1fr 1fr 1fr;
    aspect-ratio: 1.7143;
  }

  .project-grid__row--8 {
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    justify-content: center;
  }

  .project-grid__row--8 .media-container {
    aspect-ratio: auto;
  }

  .project-grid__row--9 {
    grid-template-columns: 1fr 1fr;
  }
}

/* BSFB FLEX - External Stylesheet (Non-critical & Lightbox) */

/* Label overlays - positioned relative to container size */
.media-container__label {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.media-container__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: #000000;
  display: block;
}

.media-container__subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.01em;
}

/* Narrow column labels (Asset 8, 4, 6, 2) */
.media-container--narrow .media-container__label {
  left: 4.98%;
  gap: 1.16cqw;
}

.media-container--narrow .media-container__title {
  font-size: 4.22cqw;
}

.media-container--narrow .media-container__subtitle {
  font-size: 3.45cqw;
}

/* Wide column labels (Asset 7, 5, 3, 1) */
.media-container--wide .media-container__label {
  left: 3.39%;
  gap: 0.79cqw;
}

.media-container--wide .media-container__title {
  font-size: 2.87cqw;
}

.media-container--wide .media-container__subtitle {
  font-size: 2.35cqw;
}

/* Top coordinates based on height (aspect ratio) differences */
.media-container--programmheft .media-container__label,
.media-container--festival-armband .media-container__label,
.media-container--festival-website .media-container__label,
.media-container--festival-postkarte .media-container__label {
  top: 5.73%;
  /* H = 1467px */
}

.media-container--geschaeftsausstattung .media-container__label,
.media-container--festival-poster .media-container__label {
  top: 5.44%;
  /* H = 1543px */
}

.media-container--festival-lanyard .media-container__label {
  top: 3.84%;
  /* H = 2188px */
  left: 5.00%;
  /* W = 1280px adjustment */
}

.media-container--siebdruck-tasche .media-container__label {
  top: 3.83%;
  /* H = 2194px */
}

/* Special text color for Asset 1 due to dark background (original was white on dark grey/black bag) */
.media-container--siebdruck-tasche .media-container__title {
  color: #ffffff;
}

.media-container--siebdruck-tasche .media-container__subtitle {
  color: #cbd5e1;
}

/* Custom overrides for Asset 4 (Festival-Band) as calibrated manually */
.media-container--festival-armband .media-container__label {
  gap: 1.63cqw;
}

.media-container--festival-armband .media-container__title {
  font-size: 3.45cqw;
}

.media-container--festival-armband .media-container__subtitle {
  font-size: 3.45cqw;
}

/* Lightbox Modal for Image Preview */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(9, 13, 22, 0.9);
  backdrop-filter: blur(10px);
  display: none;
  place-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.active {
  display: grid;
  opacity: 1;
}

.lightbox__content {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.lightbox.active .lightbox__content {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.lightbox__close:hover {
  color: var(--primary);
  transform: rotate(90deg);
}

@media (min-width: 1280px) {

  h4,
  p,
  .media-container__title,
  .media-container__subtitle {
    font-size: 16px !important;
  }
}


/* --- STYLES FROM HCOB.HTML --- */
.text-body {
  font-size: var(--text-base-size);
  color: var(--text-color);
  opacity: 0.9;
  line-height: 1.6;
  font-weight: 300;
}

@media (min-width: 768px) {
  .text-body {
    font-size: var(--text-lg);
  }
}

.card-service {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 16px !important;
  padding: 2.5rem;
  display: grid;
  align-content: start;
  gap: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-color);
  backdrop-filter: blur(10px);
}

#contact-cta {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

#contact-cta .starfield-bg {
  /* removed border-radius override to allow inline var(--radius-3xl) */
}

.slider-slide-item {
  border-radius: 0 !important;
}

h3 span {
  font-weight: 400 !important;
}

.card-service h3,
.card-service .card-text {
  color: var(--text-color);
}

.icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.icon-box svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-color);
  opacity: 0.8;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-color);
}

.card-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.skills-group {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.skill-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

html.dark .skill-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* New Vanilla Layout Utilities */
.grid-3-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-32);
}

@media (min-width: 768px) {
  .grid-3-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-2-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-4-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 640px) {
  .grid-4-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-4-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.slider-slide-item {
  flex-shrink: 0;
  width: 85%;
  height: 100%;
  background-color: var(--surface-container);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  user-select: none;
}

@media (min-width: 768px) {
  .slider-slide-item {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  .slider-slide-item {
    width: 65%;
  }
}

.project-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.project-header__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--text-color);
  word-break: break-word;
}

.project-header__subtitle {
  font-size: var(--text-xl);
  color: var(--text-color);
  max-width: 56rem;
  line-height: 1.4;
  word-break: break-word;
  font-weight: 300;
}

.project-header h3 {
  font-weight: bold;
}

.project-header h3 span {
  font-weight: 300;
}


@media (min-width: 768px) {
  .project-header__subtitle {
    font-size: var(--text-2xl);
  }
}

.project-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .project-content {
    grid-template-columns: 1.6fr 1fr;
    gap: 4rem;
  }
}

.project-sidebar {
  display: grid;
  align-content: start;
}

@media (min-width: 768px) {
  .project-sidebar {
    border-left: 0.25px solid rgba(0, 0, 0, 0.9);
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.project-sidebar__list {
  display: grid;
  margin-top: 1.5rem;
  text-wrap: pretty;
  hyphens: auto;
  list-style: none;
  padding: 0;
}

.project-sidebar__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  line-height: 1.3;
  font-weight: 300;
}

.project-sidebar__list li > span:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 1.3em !important;
  width: 0.6em !important;
}

.project-sidebar__list li svg {
  width: 0.6em !important;
  height: 0.6em !important;
  overflow: visible !important;
  margin: 0 !important;
}

.project-sidebar__list li svg path {
  stroke: var(--primary) !important;
  stroke-width: 2 !important;
  fill: none !important;
  vector-effect: none !important;
}

.project-detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: var(--sp-16);
}

@media (min-width: 768px) {
  .project-detail-row {
    grid-template-columns: 1fr 2fr;
    gap: 6rem;
  }
}

.media-container {
  background-color: var(--surface-container);
  border-radius: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
}

.media-container picture,
#video-scale-container picture,
.slider-slide-item picture {
  width: 100%;
  height: 100%;
  display: block;
}

.media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Make img elements fill their parent container area (only imgs) */
.media-container img,
.media-container>img,
.media-container picture img,
#video-scale-container img,
.slider-slide-item img,
.slider-logo-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Keep icons and logos contained to avoid distortion */
.icon-box img,
.logo-base,
.logo-color,
.media-container img[onerror] {
  object-fit: contain;
}

/* Ensure pictures don't collapse when used without explicit img styles */
picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Slider overlay headings should be prominent and white */
.slider-slide-item h3 {
  color: #fff;
  margin: 0;
  line-height: 1.15;
}

.aspect-video {
  aspect-ratio: 16/9;
}

.aspect-square {
  aspect-ratio: 1/1;
}

.aspect-3-4 {
  aspect-ratio: 3/4;
}

.aspect-4-3 {
  aspect-ratio: 4/3;
}

.aspect-3-2 {
  aspect-ratio: 3/2;
}

.aspect-16-10 {
  aspect-ratio: 16/10;
}

.align-center {
  text-align: center;
}

.justify-center {
  justify-content: center;
}

.justify-items-center {
  justify-items: center;
}

.content-center {
  align-content: center;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: start;
}

.mt-8 {
  margin-top: var(--sp-8);
}

.mt-16 {
  margin-top: var(--sp-16);
}

.mb-4 {
  margin-bottom: var(--sp-4);
}

.mb-8 {
  margin-bottom: var(--sp-8);
}

.mb-12 {
  margin-bottom: var(--sp-12);
}

.mb-16 {
  margin-bottom: var(--sp-16);
}

.mb-24 {
  margin-bottom: var(--sp-24);
}

.gap-4 {
  gap: var(--sp-4);
}

.gap-8 {
  gap: var(--sp-8);
}

.gap-16 {
  gap: var(--sp-16);
}

.p-6 {
  padding: 1.5rem;
}

.p-12 {
  padding: 3rem;
}

.border-top {
  border-top: 0.25px solid rgba(0, 0, 0, 0.85);
}

.border-bottom {
  border-bottom: 0.25px solid rgba(0, 0, 0, 0.85);
}

.border-all {
  border: 0.25px solid rgba(0, 0, 0, 0.85);
}

.logo-list {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 0.25px solid rgba(0, 0, 0, 0.85);
}

.logo-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0;
  border-top: 0.25px solid rgba(0, 0, 0, 0.85);
  align-items: stretch;
}

@media (min-width: 768px) {
  .logo-item {
    grid-template-columns: 300px 1fr 300px;
  }
}

.logo-item img {
  height: 100%;
  max-height: 500px;
  width: 100%;
  object-fit: contain;
  transform: scale(1);
}

html.dark .logo-item img,
html.grey .logo-item img {
  filter: none;
}

.footer {
  background-color: var(--surface-low);
  padding: 3.5rem 0 1.3rem 0;
  width: 100%;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-links {
    gap: 6rem;
  }
}

.footer-links a {
  text-decoration: none;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text-color);
}

/* Header logo: remove visual effects (no blend or filter) per request */
.site-header .logo-icon {
  mix-blend-mode: normal;
  filter: none;
  transition: transform 0.12s ease;
  will-change: transform;
}

.site-header .logo-icon:hover {
  transform: none;
  filter: none;
}

/* Ensure logo and contact button remain visible when header is collapsed/hidden */
.site-header.header-hidden .logo-container,
.site-header.header-hidden .header-actions {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Remove blend/filter from primary buttons (keep glassy/backdrop look without forced inversion) */
.btn-primary {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem calc(1rem + 2px);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: block;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 8px 30px rgba(176, 141, 87, 0.18), inset 0 -2px 6px rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover {
  background-color: #9a7b4c;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 44px rgba(176, 141, 87, 0.28), inset 0 -4px 10px rgba(255, 255, 255, 0.06);
}

.logo-container {
  text-decoration: none;
  color: inherit;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.25rem;
}

.logo-container .blinking-dot {
  margin-left: 0;
}

.logo-container:hover,
.logo-container:focus {
  text-decoration: none;
  outline: none;
}

/* Ensure header-inner uses the same container width/padding as main content */
.header-inner {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  height: 4rem !important;
  max-height: 4rem !important;
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Ensure logo sits flush with the content container's left edge and the actions with the right edge */
.site-header .logo-container {
  justify-self: start;
  padding-left: 0;
  margin-left: 0;
  align-items: start;
}

.site-header .logo-container .blinking-dot {
  align-self: start;
  margin-top: 6px;
}

.site-header .header-actions {
  justify-self: end;
  padding-right: 0;
  margin-right: 0;
}

/* Footer spacing: match horizontal padding to site container and reduce vertical clutter */
.footer {
  padding: 3.5rem 0 1.3rem 0;
  background-color: var(--surface-low);
  width: 100%;
}

.footer-inner {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-links {
    gap: 6rem;
  }
}

/* Dark/grey theme: no logo effects */
html.dark .site-header .logo-icon {
  mix-blend-mode: normal;
  filter: none;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface-container);
  border-top: 0.25px solid rgba(0, 0, 0, 0.85);
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  z-index: 50;
}

@media (min-width: 640px) {
  .cookie-banner {
    grid-template-columns: 1fr auto;
  }
}

/* Page Transition API (Cross-document View Transitions) */
@view-transition {
  navigation: auto;
}

/* Custom smooth page transitions */
::view-transition-old(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

::view-transition-new(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slider Logo Grid Animation */
.slider-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  width: 100%;
  height: 100%;
  padding: 2.5rem 2.5rem 6.5rem 2.5rem;
  box-sizing: border-box;
  align-items: center;
  justify-items: center;
  background: transparent;
}

.slider-logo-grid .grid-logo-item {
  opacity: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  box-sizing: border-box;
}

.slider-logo-grid .grid-logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* Dark and Grey theme inversion for grid logos */
html.dark .slider-logo-grid .grid-logo-item img,
html.grey .slider-logo-grid .grid-logo-item img {
  filter: invert(1);
}

.card-service .icon-box svg {
  color: #ffffff;
  opacity: 1;
}

/* Trigger animation on active slide */
.slider-slide-item.active .slider-logo-grid .grid-logo-item {
  animation: logoFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Equal heights & media query height logic for project report sections */
#hcob {
  background-color: var(--surface-container);
  width: 100%;
  box-sizing: border-box;
}



.report-list {
  background-color: transparent;
  padding: 0;
}

/* Base style for all mockup/content cards in #hcob */
.report-detail-row--equal>.media-container,
.report-detail-row--equal>.report-grid--ganzjahresbericht,
.report-detail-row--equal>.report-grid--whitepaper,
#hcob-styleguide .report-detail-row--equal>.media-container,
#hcob-styleguide .report-detail-row--equal>.report-grid--ganzjahresbericht,
#hcob-ppt .media-container,
.project-icons-card,
#hcob-flyer .media-container,
#hcob-packaging .media-container,
#hcob-hero-mockup {
  border: 1px dashed #000;
  border-radius: 0;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Padded containers for cover mockups, spreads, PPT, flyers, icons */
.report-detail-row--equal>.media-container,
.report-detail-row--equal>.report-grid--ganzjahresbericht,
.report-detail-row--equal>.report-grid--whitepaper,
#hcob-ppt .media-container,
#hcob-flyer .media-container {
  padding: 2.5rem;
}

.project-icons-card {
  padding: 4rem 2rem;
}

/* Clean styling for individual spreads inside the Ganzjahresbericht and Whitepaper grids */
.report-grid--ganzjahresbericht>.media-container,
.report-grid--whitepaper>.media-container {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Shadows and alignment for all cover images (first column) */
.report-detail-row--equal>.media-container:first-child img {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  border-radius: 0;
}

/* Alignment for right column content (spreads/details) */
.report-detail-row--equal>.media-container:nth-child(2) {
  display: block !important;
  height: 100% !important;
}

.report-detail-row--equal>.media-container:nth-child(2) picture,
.report-detail-row--equal>.media-container:nth-child(2) img {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#hcob-zjb .report-detail-row--equal>.media-container:nth-child(2) picture,
#hcob-zjb .report-detail-row--equal>.media-container:nth-child(2) img {
  object-position: center !important;
}

/* Headline Grid for Two-Column Titles */
@media (min-width: 768px) {
  .project-headline-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
    margin-bottom: 1rem;
  }
}

/* Global rules for all two-column report sections to ensure exact dimension matching */
@media (min-width: 768px) {
  .report-detail-row--equal {
    grid-template-columns: 1fr 3fr !important;
    gap: 3rem !important;
    align-items: stretch !important;
  }

  .report-detail-row--equal>*:nth-child(2) {
    min-height: 0 !important;
    height: 100% !important;
  }
}

.report-detail-row--equal {
  margin-top: 1.5rem !important;
  padding-bottom: clamp(20px, 2vw, 25px);
}

/* Grids inside equal-height report sections */
.report-grid--ganzjahresbericht {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  height: 100%;
}

.report-grid--ganzjahresbericht>.media-container {
  height: 100%;
  width: 100%;
}

/* Ganzjahresbericht Grid Alignments */
.report-grid--ganzjahresbericht>.media-container:nth-child(1) img {
  object-position: top left !important;
}

.report-grid--ganzjahresbericht>.media-container:nth-child(2) img {
  object-position: top center !important;
}

.report-grid--ganzjahresbericht>.media-container:nth-child(3) img {
  object-position: top right !important;
}

.report-grid--ganzjahresbericht>.media-container:nth-child(4) img {
  object-position: bottom left !important;
}

.report-grid--ganzjahresbericht>.media-container:nth-child(5) img {
  object-position: bottom center !important;
}

.report-grid--ganzjahresbericht>.media-container:nth-child(6) img {
  object-position: bottom right !important;
}

.report-grid--whitepaper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  height: 100%;
}

.report-grid--ganzjahresbericht img,
.report-grid--ganzjahresbericht picture,
.report-grid--whitepaper img,
.report-grid--whitepaper picture {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* Project title line height adjustment */
.project-header__title {
  line-height: 1.2;
}

#slider-desc {
  max-width: 48rem;
  min-height: 40px;
}

/* Common layout classes extracted from HTML files */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #121414, #707070);
}

html.dark .text-gradient {
  background-image: linear-gradient(90deg, #fff, #a0a0a0);
}

.starfield-bg {
  background-image: radial-gradient(circle at center, #f0f0f0 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

html.dark .starfield-bg {
  background-image: radial-gradient(circle at center, #1e2020 0%, #121414 100%);
}

html.grey .starfield-bg {
  background-image: radial-gradient(circle at center, #4b5563 0%, #374151 100%);
}

.starfield-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #000000, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 40px 70px, #000000, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 50px 160px, #000000, rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 90px 40px, #B08D57, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 130px 80px, #000000, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 160px 120px, #000000, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.1;
  z-index: 0;
}

html.dark .starfield-bg::before,
html.grey .starfield-bg::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 90px 40px, #B08D57, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0, 0, 0, 0));
  opacity: 0.3;
}

.glass-pill {
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

html.dark .glass-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.grey .glass-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-img {
  display: none;
}

.feature-img.active {
  display: block;
}

.custom-caret-pulse {
  animation: customBlink 1s step-end infinite;
}

#contact-input:empty:before {
  content: attr(data-placeholder);
  color: var(--text-light);
  pointer-events: none;
  display: block;
}

#messenger-container:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.2) !important;
}

@keyframes customBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* CSS Scroll-driven Animation for Video Section — smooth, GPU-composited */
@supports (animation-timeline: scroll()) {
  #video-scroll-section {
    view-timeline-name: --video-scroll;
    view-timeline-axis: block;
    overflow: visible !important;
  }

  #video-scale-container {
    animation: scaleVideo ease-in-out both;
    animation-timeline: --video-scroll;
    animation-range: entry 0% cover 50%;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    transform-origin: center center;
    will-change: transform, border-radius;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  @keyframes scaleVideo {
    0% {
      transform: scale(1);
      border-radius: 0;
    }
    100% {
      transform: scale(1);
      border-radius: 0;
    }
  }
}

/* Utility & Semantic Layouts */
.site-body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  word-break: break-word;
  hyphens: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 4rem !important;
  max-height: 4rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 0.25px solid #000;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* transition: transform 0.3s ease; - Removed to stop any perceived animation */
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

html.dark .site-header {
  background-color: rgba(18, 20, 20, 0.8);
  border-bottom: 0.25px solid rgba(255, 255, 255, 0.15);
}

html.grey .site-header {
  background-color: rgba(107, 114, 128, 0.8);
  border-bottom: 0.25px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html.dark .site-header,
  html.grey .site-header {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.container-6xl {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5px 1.5rem 0 1.5rem !important;
  height: 4rem !important;
  max-height: 4rem !important;
  width: 100%;
  box-sizing: border-box;
}

.logo-text {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-color);
}

.logo-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
}

.main-nav {
  display: none;
}

@media (min-width: 768px) {
  .main-nav {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
  }
}

.nav-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--text-color);
}

.header-actions {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1rem;
  justify-content: end;
}

.btn-dark {
  background-color: var(--text-base);
  color: var(--surface);
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-dark:hover {
  opacity: 0.85;
}

.hero {
  width: 100%;
  height: 100vh; /* fallback for browsers without dvh support */
  height: 100dvh; /* dynamic viewport height – adapts to mobile address bar */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  position: sticky;
  top: 4rem;
  z-index: 1;
  overflow: hidden;
  contain: strict;
  box-sizing: border-box;
  transition: top 0.3s ease;
}

.site-header.header-hidden ~ .main-container .hero {
  top: 0;
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 56rem;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  z-index: 10;
  pointer-events: auto;
}

.hero__title {
  font-size: calc(var(--text-7xl) * 0.8);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 2.5rem 0;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: calc(var(--text-9xl) * 0.8);
  }
}

@supports (animation-timeline: scroll(root)) {
  @keyframes hero-scroll-animation {
    to {
      opacity: 0;
      transform: translateY(100px);
    }
  }

  .hero__content {
    animation: hero-scroll-animation linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0px 400px;
  }
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.main-content-wrapper {
  position: relative;
  z-index: 10;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 100%;
  box-sizing: border-box;
}

.hero__actions {
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  margin-bottom: 6rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero__actions {
    grid-auto-flow: column;
  }
}

.glass-pill-btn {
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-color);
}

.glass-pill-btn:hover {
  background-color: var(--surface-bright);
}

.floating-icons {
  width: 100%;
  overflow: hidden;
  display: grid;
  justify-content: center;
  padding: 2rem 0;
  opacity: 0.5;
  transform: translateY(-20%);
}

.hero__floating-icons-inner {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  align-items: center;
}

.icon-circle {
  border-radius: 9999px;
  border: 1px solid #000;
  display: grid;
  place-items: center;
  background-color: transparent;
  font-size: var(--text-xl);
  color: var(--text-color);
  animation: icon-scale-loop 10s ease-in-out infinite;
}

.icon-circle span {
  line-height: 1;
}

.icon-circle.size-16 span {
  transform: translateY(-3px);
}

@keyframes icon-scale-loop {
  0% { transform: scale(1); }
  4% { transform: scale(1.3); }
  8% { transform: scale(1); }
  100% { transform: scale(1); }
}

.hero__floating-icons-inner .icon-circle:nth-child(1) { animation-delay: 0s; }
.hero__floating-icons-inner .icon-circle:nth-child(2) { animation-delay: 0.3s; }
.hero__floating-icons-inner .icon-circle:nth-child(3) { animation-delay: 0.6s; }
.hero__floating-icons-inner .icon-circle:nth-child(4) { animation-delay: 0.9s; }
.hero__floating-icons-inner .icon-circle:nth-child(5) { animation-delay: 1.2s; }

.icon-circle.size-12 {
  width: 2.4rem;
  height: 2.4rem;
}

.icon-circle.size-14 {
  width: 2.8rem;
  height: 2.8rem;
}

.icon-circle.size-16 {
  width: 3.2rem;
  height: 3.2rem;
}

@media (min-width: 1920px) {

  .grid-1-2,
  .grid-3-col,
  .card-service,
  .skills-group,
  .pills-wrapper,
  .grid-2-col,
  .grid-4-col,
  .project-header,
  .project-content,
  .project-sidebar,
  .project-sidebar__list,
  .project-sidebar__list li,
  .gap-4,
  .gap-8,
  .gap-16,
  .logo-item,
  .footer-inner,
  .footer-links,
  .logo-container,
  .header-actions,
  .hero__actions,
  .hero__floating-icons-inner,
  .cookie-banner,
  .slider-logo-grid,
  .report-grid--whitepaper,
  .main-nav,
}

.report-item {
  background-color: var(--surface-report-item);
  padding: 0;
}

.report-preview__title-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  pointer-events: none;
}

.report-preview__title-box h4 span {
  font-weight: 400;
}


/* Der Container hält exakt das Seitenverhältnis der PDF-Seite */
.report-layout {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background-color: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: background-color 0.3s, border-color 0.3s;
}

html.dark .report-layout {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Alle Bilder werden absolut per Prozentwerten platziert */
.report-preview__asset {
  position: absolute;
  object-fit: cover;
}

.section-spacing-y {
  margin-top: clamp(4rem, 8vw, 8rem);
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.section-spacing-t {
  margin-top: clamp(4rem, 8vw, 8rem);
}



#slider-projects-titel {
  margin-bottom: 2.5rem !important;
}

@media (min-width: 769px) {
  .project-grid__row--half {
    grid-template-columns: 1fr 1fr;
  }
}


.project-content__text h4 {
  margin-bottom: -1rem;
}

/* --- Restored from DEV for index.html layout --- */

.section-top-border {
  border-top: 0.25px solid rgba(0, 0, 0, 0.85);
  padding-top: var(--sp-24);
}

.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

@media (min-width: 768px) {
  .grid-1-2 {
    grid-template-columns: 1fr 2fr;
  }
}

.grid-3-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--text-4xl);
  }
}

.section-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 1rem;
  max-width: 24rem;
}

.text-body {
  font-size: var(--text-base-size);
  color: var(--text-color);
  opacity: 0.9;
  line-height: 1.6;
  font-weight: 300;
}

@media (min-width: 768px) {
  .text-body {
    font-size: var(--text-lg);
  }
}

.card-service {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 16px !important;
  padding: 2.5rem;
  display: grid;
  align-content: start;
  gap: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-color);
  backdrop-filter: blur(10px);
}

.icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background-color: var(--surface-bright);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.icon-box svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-color);
  opacity: 0.8;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-color);
}

.card-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.skills-group {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.skill-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

html.dark .skill-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Slider Overlay Animation */
.slide-overlay {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slider-slide-item.active .slide-overlay {
  opacity: 1 !important;
  transition-delay: 0.5s;
}

/* Page Transitions */
.site-body {
  /* animation: page-fade-in 0.6s ease forwards; Removed at user request (perceived as scaling animation) */
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    /* filter: blur(10px); */
  }
  to {
    opacity: 1;
    /* filter: blur(0); */
  }
}

.site-body.page-exiting {
  animation: page-fade-out 0.4s ease forwards;
}

@keyframes page-fade-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(10px);
  }
}

/* --- Professional Layout Grid Patterns --- */
#slider-prev, #slider-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#slider-prev svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  stroke-width: 2.5;
  transform: translateX(-1px);
}

#slider-next svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  stroke-width: 2.5;
  transform: translateX(1px);
}

.grid-report-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.grid-report-layer {
  grid-area: 1/1;
  justify-self: start;
  align-self: start;
  position: relative;
}

/* Lightbox Styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__content {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox.active .lightbox__content {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 100000;
  line-height: 1;
}

body.lightbox-open {
  overflow: hidden !important;
}

/* Sidebar spacing between text and list */
.project-sidebar__list {
  margin-top: 1.5rem !important;
}

/* Constrain portfolio-footer content to 1280px */
.portfolio-footer {
  padding: 0 !important;
}

.portfolio-footer > .footer-top,
.portfolio-footer > .footer-bottom {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.portfolio-footer > .footer-top {
  padding: 5vh 1.5rem 0 1.5rem !important;
}

.portfolio-footer > .footer-bottom {
  padding: 2rem 1.5rem 3.25vh 1.5rem !important;
}

/* Responsive adjustment for portfolio-footer bottom on small viewports */
@media (max-width: 768px) {
  .portfolio-footer > .footer-bottom {
    flex-direction: column !important;
    gap: 2rem !important;
    padding-top: 1.5rem !important;
  }
  .portfolio-footer > .footer-bottom .footer-col {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ==========================================================================
   INTEGRATED PORTFOLIO EDITION STYLES (FROM PORTFOLIO.CSS)
   ========================================================================== */

/* local font-face override commented out to prevent overriding Google Fonts weights */
/* @font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
} */

:root {
  --bg-dark: #0a0a0a;
  --text-main: #f5f5f5;
  --accent: #b08d57; /* Dein bestehendes Gold/Beige */
  --border: rgba(255,255,255,0.1);
}

html.portfolio-theme * {
  cursor: none; /* Hide default cursor only on portfolio theme */
}

html.portfolio-theme body {
  background-color: var(--bg-dark) !important;
  color: var(--text-main) !important;
  padding: 0 !important;
}

html.portfolio-theme h1,
html.portfolio-theme h2,
html.portfolio-theme h3,
html.portfolio-theme h4,
html.portfolio-theme h5,
html.portfolio-theme h6,
html.portfolio-theme p,
html.portfolio-theme a,
html.portfolio-theme span,
html.portfolio-theme button {
  color: var(--text-main) !important;
}

html.portfolio-theme {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* --- Noise Filter --- */
.noise-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999; opacity: 0.04;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* --- Custom Cursor --- */
.cursor-dot, .cursor-outline {
  position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 10000; pointer-events: none;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 8px; height: 8px; background-color: var(--text-main);
}
.cursor-outline {
  width: 40px; height: 40px; border: 1px solid var(--text-main);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
}
.cursor-outline.hover-active {
  width: 80px; height: 80px; background-color: var(--text-main); opacity: 0.2;
}

/* --- Header --- */
.portfolio-header {
  position: fixed; top: 0; left: 0; width: 100%; padding: 2rem; z-index: 100;
  mix-blend-mode: difference;
}
.portfolio-header__inner {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
}
.logo-link { color: var(--text-main); text-decoration: none; font-weight: 700; }
.nav-status { display: flex; align-items: center; gap: 10px; }
.blinking-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: blink 1.5s infinite; vertical-align: middle; position: relative; top: -1px; }
.menu-btn { background: none; border: none; color: var(--text-main); text-transform: uppercase; font-size: 1.1rem; }

@keyframes blink { 0%, 100% {opacity: 1;} 50% {opacity: 0;} }

/* --- Hero Section --- */
.portfolio-hero {
  height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 0 4vw; position: relative;
}
.hero-title {
  font-size: clamp(4rem, 12vw, 15rem);
  line-height: 0.85; font-weight: 800; letter-spacing: -0.04em;
  text-transform: uppercase; display: flex; flex-direction: column;
}
.hero-title .indent { padding-left: 15vw; }
.accent { color: var(--accent); }

.hero-scroll-indicator {
  position: absolute; bottom: 2rem; right: 4vw;
  display: flex; align-items: center; gap: 1rem; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 2px;
}
.line-down { width: 1px; height: 60px; background: var(--text-main); overflow: hidden; position: relative; }
.line-down::after {
  content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--accent); animation: scrollDown 2s infinite ease-in-out;
}
@keyframes scrollDown { 0% {transform: translateY(-100%);} 100% {transform: translateY(100%);} }

/* --- Video Parallax & Cinematic HUD --- */
.portfolio-video-section {
  padding: 0;
  margin: 10vh 0;
  position: relative;
  width: 100%;
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.video-parallax-wrapper {
  position: relative;
  width: 90vw;
  height: 80vh;
  overflow: hidden;
  border-radius: 2rem;
  transition: width 0.1s ease-out, height 0.1s ease-out, border-radius 0.1s ease-out;
  transform-origin: center;
  will-change: width, height, border-radius;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Futuristic HUD Overlay */
.video-overlay-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 2;
}

.video-hud {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  letter-spacing: 2px;
  font-family: monospace;
  z-index: 3;
  pointer-events: none;
  text-transform: uppercase;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-dot {
  width: 6px;
  height: 6px;
  background-color: #ff3b30;
  border-radius: 50%;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.video-audio-hint {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-family: monospace;
  z-index: 3;
  pointer-events: none;
  text-transform: uppercase;
}

/* Custom Cursor Audio Hover State */
.cursor-outline.cursor-audio-hover {
  width: 90px !important;
  height: 90px !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  opacity: 0.9 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 0 30px rgba(176, 141, 87, 0.5);
}

.cursor-outline .cursor-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--bg-dark);
  font-family: monospace;
  pointer-events: none;
}

/* --- About Section --- */
.portfolio-about { padding: 15vh 4vw; }
.grid-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 4rem; }
.about-label { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }
.about-content p {
  font-size: clamp(1.5rem, 3.5vw, 4rem); line-height: 1.2; font-weight: 400;
}

/* --- Services Marquee & List --- */
.portfolio-services-skills { padding: 10vh 0; border-top: 1px solid var(--border); }
.marquee-wrapper { overflow: hidden; white-space: nowrap; padding: 2rem 0; border-bottom: 1px solid var(--border); }
.marquee {
  display: inline-block; font-size: clamp(3rem, 8vw, 8rem); font-weight: 800;
  text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--text-main);
  animation: marquee 20s linear infinite;
}
@keyframes marquee { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} }

.list-container { padding: 0 4vw; margin-top: 5vh; }
.list-item {
  padding: 4rem 0; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; align-items: start;
  transition: color 0.3s;
}
.list-item:hover { color: var(--accent); }
.list-item h2 { font-size: 2.5rem; font-weight: 500; }
.list-item p { font-size: 1.2rem; color: var(--text-muted); line-height: 1.5; }
.skills-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skills-tags span {
  padding: 5px 15px; border: 1px solid var(--border); border-radius: 50px;
  font-size: 0.85rem; color: var(--text-main);
}

/* --- Projects --- */
.portfolio-projects { padding: 15vh 4vw; }
.projects-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8vh; }
.projects-header h2 { font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; text-transform: uppercase; }
.projects-header p { max-width: 400px; font-size: 1.1rem; color: var(--text-muted); }

.project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4vw; }
.project-card { display: block; text-decoration: none; color: var(--text-main); }
.project-card:nth-child(2) { margin-top: 15vh; }
.project-image-wrapper {
  width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 1rem;
  margin-bottom: 1.5rem;
}
.project-image-wrapper img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-image-wrapper img { transform: scale(1.05); }
.project-meta h3 { font-size: 2rem; font-weight: 500; }
.project-meta p { color: var(--text-muted); margin-top: 0.5rem; }

/* --- Contact CTA --- */
.portfolio-contact { padding: 15vh 4vw; text-align: center; }
.contact-inner { padding: 10vh 0; background: #111; border-radius: 2rem; }
.giant-cta { font-size: clamp(3rem, 9vw, 10rem); line-height: 0.9; text-transform: uppercase; font-weight: 800; }
.contact-inner p { margin: 3rem 0; font-size: 1.5rem; color: var(--text-muted); }
.interactive-input {
  max-width: 600px; margin: 0 auto; display: flex; align-items: center;
  border-bottom: 2px solid var(--text-muted); padding-bottom: 1rem;
}
.interactive-input span { flex: 1; font-size: 1.5rem; text-align: left; outline: none; }
.interactive-input span:empty:before { content: attr(data-placeholder); color: #444; }
.send-btn {
  background: var(--accent); border: none; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; transition: transform 0.3s;
}
.send-btn:hover { transform: scale(1.1) rotate(-15deg); }

/* --- Animations --- */
.reveal-text .line { display: block; overflow: hidden; }
.reveal-text .line span { display: inline-block; transform: translateY(100%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-text.is-visible .line span { transform: translateY(0); }

.reveal-fade { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-fade.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .grid-layout { grid-template-columns: 1fr; gap: 2rem; }
  .list-item { grid-template-columns: 1fr; gap: 1rem; }
  .project-gallery { grid-template-columns: 1fr; gap: 4rem; }
  .project-card:nth-child(2) { margin-top: 0; }
}

/* --- Mobile Hamburger Menu & Slider Overrides --- */

/* Mobile Hamburger button style */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 10000;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.hamburger-menu:hover {
  background-color: var(--surface-container);
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-color);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .mobile-nav-overlay {
  background-color: rgba(18, 20, 20, 0.97);
}

html.grey .mobile-nav-overlay {
  background-color: rgba(107, 114, 128, 0.97);
}

/* When active */
body.mobile-menu-active {
  overflow: hidden !important;
}

body.mobile-menu-active .mobile-nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger active transformation */
body.mobile-menu-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.mobile-menu-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

body.mobile-menu-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Links */
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
  width: 100%;
}

.mobile-nav-link {
  font-size: var(--text-2xl);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-color);
  transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-nav-link:hover {
  color: var(--primary);
  transform: translateY(-2px);
}

/* Media Query for mobile styles */
@media (max-width: 768px) {
  /* Reduce side spacing (page margins) to 10px on mobile */
  .container,
  .container-6xl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .portfolio-footer > .footer-top {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .portfolio-footer > .footer-bottom {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :root {
    --text-xs: clamp(0.55rem, 3.2vw, 0.65rem);
    --text-sm: clamp(0.65rem, 3.6vw, 0.75rem);
    --text-base-size: clamp(0.75rem, 4vw, 0.85rem);
    --text-lg: clamp(0.85rem, 4.4vw, 0.95rem);
    --text-xl: clamp(0.95rem, 4.8vw, 1.05rem);
    --text-2xl: clamp(1.05rem, 5.2vw, 1.15rem);
    --text-3xl: clamp(1.2rem, 5.8vw, 1.35rem);
    --text-4xl: clamp(1.4rem, 6.4vw, 1.6rem);
    --text-5xl: clamp(1.6rem, 7.2vw, 1.85rem);
    --text-6xl: clamp(1.8rem, 8vw, 2.1rem);
    --text-7xl: clamp(2.0rem, 8.8vw, 2.4rem);
    --text-8xl: clamp(2.3rem, 9.6vw, 2.8rem);
    --text-9xl: clamp(2.6rem, 10.4vw, 3.2rem);
    --text-10xl: clamp(3.0rem, 12vw, 3.6rem);
  }

  /* Shrink specifically large headings */
  .hero__title {
    font-size: var(--text-5xl) !important;
  }
  
  .project-title {
    font-size: var(--text-4xl) !important;
  }

  .section-title {
    font-size: var(--text-4xl) !important;
  }

  .portfolio-footer h2 {
    font-size: var(--text-5xl) !important;
  }

  .hamburger-menu {
    display: flex;
  }
  
  .header-actions {
    display: none !important; /* Hide desktop contact button on mobile header */
  }

  /* Position slider titles above images and make them visible */
  .slider-slide-item {
    display: flex !important;
    flex-direction: column !important;
  }

  .slide-overlay {
    position: relative !important;
    inset: auto !important;
    order: -1 !important;
    background: transparent !important;
    padding: 0 0 0.5rem 0 !important;
    opacity: 1 !important;
    display: block !important;
    height: auto !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .slide-overlay h3 {
    color: var(--text-color) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  .slider-slide-item img {
    flex: 1 1 auto !important;
    height: 0 !important;
    object-fit: cover !important;
  }

  .slider-slide-item:nth-child(5) {
    background-color: var(--bg-color) !important;
  }

  .slider-slide-item:nth-child(5) img {
    background-color: #e6e6e6 !important;
  }

  #slider-track {
    aspect-ratio: 16/8.5 !important; /* Slightly taller slider on mobile to fit titles nicely, but also reduced by 15% */
  }

  /* Slider Controls stack reordering */
  .slider-controls-container {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Make sure the text container is placed below the buttons */
  #slider-text-container {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Target the buttons and counter div (which is the sibling of the text container) */
  #slider-text-container + div {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 0.5rem !important;
  }

  /* Prevent scrolling jumps and layout shifts on mobile viewports */
  .hero {
    position: relative !important;
    top: auto !important;
    transition: none !important;
  }
  
  .hero__content {
    animation: none !important;
  }

  .media-container {
    min-height: 50vw !important; /* Prevents containers from collapsing to 0px before images load */
  }

  #video-scale-container {
    animation: none !important;
    animation-timeline: none !important;
    transform: none !important;
  }

  #video-scroll-section {
    view-timeline-name: none !important;
  }
}


/* Swap project header spacing on mobile so gap above is larger than below */
@media (max-width: 768px) {
  section[id$="-intro-text"] {
    margin-top: 4rem !important;
  }
  section[id$="-intro-text"] > div {
    gap: 1.5rem !important;
  }
}


/* Make all small image titles (report-preview__title-box and section-header) sit outside images on mobile with exact spacing matching hcob.html */
@media (max-width: 768px) {
  .report-preview__title-box, 
  .section-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    margin-top: 1.875rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  /* Specific text colors for mobile readability */
  .report-preview__title-box h4,
  .report-preview__title-box h4 span,
  .section-header__title,
  .section-header__subtitle {
    color: var(--text-color) !important;
  }
  
  /* Reset gaps between report list items and grid halves to 0 to match hcob.html spacing */
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .report-list,
  #hcob-valuable-franchise-intro-text ~ #hcob-projects .project-grid__row--half,
  #bsfb-flex-intro-text ~ #bsfb-projects .report-list,
  #bsfb-flex-intro-text ~ #bsfb-projects .project-grid__row--half,
  .report-list,
  .project-grid__row--half {
    gap: 0 !important;
  }
  
  /* Zero out report-item internal gap so title margin controls all spacing */
  .report-item {
    gap: 0 !important;
  }
  
  /* Set standard gap between sections/projects to 30px on mobile */
  .container-6xl {
    gap: 30px !important;
  }
  
  /* Ensure the report preview flex stacks title and image with no gaps */
  .report-preview {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  /* Zero out project-grid__row gap on mobile so title margin controls spacing */
  .project-grid__row {
    gap: 0 !important;
  }
  
  /* Remove gaps between section headers and their media containers */
  div:has(> .section-header) {
    gap: 0 !important;
  }
  
  /* Paribus first section-header (CI-Manual) has static position and custom padding - override */
  #paribus-group-1-3 > .section-header {
    padding: 0 !important;
    margin-top: 1.875rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Make all .media-container elements on mobile have the same 2rem (32px) bottom spacing as in bsfb-flex.html */
  .media-container {
    margin-bottom: 2rem !important;
  }
  
  .media-container:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   Skeleton Preloader — shimmer effect while images load
   ============================================================ */

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Base skeleton state for media containers */
.media-container.skeleton,
.image-container.skeleton,
.logo-crossfade.skeleton,
.report-preview.skeleton {
  background-color: var(--surface-container, #f2f2f2);
}

/* Shimmer overlay via ::after pseudo-element */
.media-container.skeleton::after,
.image-container.skeleton::after,
.logo-crossfade.skeleton::after,
.report-preview.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

/* Dark theme shimmer uses a subtler highlight */
html.dark .media-container.skeleton::after,
html.dark .image-container.skeleton::after,
html.dark .logo-crossfade.skeleton::after,
html.dark .report-preview.skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
}

/* Hide images while skeleton is active */
.media-container.skeleton .media-container__image,
.media-container.skeleton img,
.image-container.skeleton img,
.logo-crossfade.skeleton img,
.report-preview.skeleton .report-preview__asset {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Show images once skeleton is removed */
.media-container__image,
.report-preview__asset,
.image-container img,
.logo-crossfade img {
  transition: opacity 0.4s ease;
}