/* =========================================
   LuzernBaar.ch - Main Stylesheet
   ========================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Archivo+Narrow:wght@400;700&display=swap');

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #333333;
  background: #fff;
  line-height: 1.6;
}

a { color: #E42312; text-decoration: none; transition: color 0.2s; }
a:hover { color: #ba1f0f; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

img { max-width: 100%; height: auto; display: block; }

/* --- Mid Content Wrapper --- */
.mid-content {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
#masthead {
  width: 100%;
  z-index: 99999;
  background: #fff;
  border-bottom: 3px solid #E42312;
  position: sticky;
  top: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

.site-logo {
  flex: 0 0 auto;
}

.site-logo img {
  height: 60px;
  width: auto;
  max-width: none;
}

/* Navigation */
#site-navigation { position: relative; }

.nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

.nav-menu li a {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  color: #333333;
  padding: 5px 10px;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-menu li a:hover,
.nav-menu li.current a {
  color: #E42312;
}

.nav-menu li a.blog-btn {
  background: #E42312;
  color: #fff;
  padding: 6px 14px;
  margin-left: 5px;
}
.nav-menu li a.blog-btn:hover {
  background: #ba1f0f;
  color: #fff;
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  color: #333;
  background: none;
  border: 1px solid #ccc;
  padding: 6px 12px;
}

/* Language dropdown in nav */
.nav-lang-dropdown {
  position: relative;
}

.lang-dropdown-toggle {
  background: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #333;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
  margin-left: 12px;
}

.lang-dropdown-toggle:hover {
  border-color: #E42312;
  color: #E42312;
}

.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-top: 3px solid #E42312;
  list-style: none;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 99999;
}

.nav-lang-dropdown.open .lang-dropdown-menu {
  display: block;
}

.lang-dropdown-menu li a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  color: #333;
  text-transform: none;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s, color 0.15s;
}

.lang-dropdown-menu li:last-child a {
  border-bottom: none;
}

.lang-dropdown-menu li a:hover {
  background: #f9f9f9;
  color: #E42312;
}

.lang-dropdown-menu li.active-lang a {
  color: #E42312;
  font-weight: 500;
}

/* Desktop layout: logo pinned left, menu centered, language toggle in the
   far-right corner. The toggle is pulled out of the menu row (absolute) and
   the nav reserves the right corner for it, so the menu is horizontally
   centered between the logo and the toggle and stays one row at 13px in
   every language (DE/EN/FR). */
@media (min-width: 1340px) {
  #site-navigation {
    position: static;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    /* reserve the right corner so the centered menu never runs under the
       language toggle */
    margin-right: 70px;
  }

  .nav-menu {
    margin-top: 0;
  }

  .nav-lang-dropdown {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
  }

  .lang-dropdown-toggle {
    margin-left: 0;
    padding: 5px 12px;
  }
}

/* =========================================
   HERO SLIDER
   ========================================= */
#main-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

.slider-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - 95px);
  min-height: 400px;
}

.bx-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slides.active {
  opacity: 1;
}

.slides::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.slider-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  max-width: 800px;
}

.caption-title {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.caption-description {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 300;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Slider controls */
.slider-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  border: 2px solid #fff;
  transition: background 0.2s;
}

.slider-dot.active {
  background: #E42312;
  border-color: #E42312;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.2s;
}

.slider-arrow:hover { background: #E42312; }
.slider-prev { left: 20px; }
.slider-next { right: 20px; }

/* =========================================
   PARALLAX SECTIONS
   ========================================= */
.parallax-section {
  padding: 100px 0;
  position: relative;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.parallax-section.parallax-fixed {
  background-attachment: fixed;
}

.parallax-section .overlay {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.parallax-section .mid-content {
  position: relative;
  z-index: 2;
}

/* Section Headings */
.parallax-section h2 {
  font-size: clamp(24px, 4vw, 38px);
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 60px;
}

.parallax-section h2 span {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.parallax-section h2 span::after {
  content: "";
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  margin-top: 0;
  border-bottom: 3px solid #E42312;
}

/* Section heading colors on dark backgrounds */
#section-27 h2,
#section-153 h2,
#section-167 h2 {
  color: #fff;
}

/* =========================================
   ABOUT US SECTION
   ========================================= */
#section-27 {
  background: url('../images/about-us-bg.jpg') no-repeat scroll top center #282828;
  background-size: cover;
  color: #fff;
}

#section-27 .overlay {
  background: rgba(0,0,0,0.55);
}

#section-27 .page-content p {
  font-size: 18px;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================
   TEAM SECTION
   ========================================= */
#section-45 {
  background: #fff;
  color: #333;
}

.teamv2-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.teamv2-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.teamv2-image {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s;
  flex-shrink: 0;
}

.teamv2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.3s;
}

.teamv2-image.active,
.teamv2-image:hover {
  border-color: #E42312;
}

.teamv2-image.active img,
.teamv2-image:hover img {
  filter: grayscale(0);
}

.teamv2-content {
  flex: 1;
}

.teamv2-list {
  display: none;
}

.teamv2-list.active {
  display: block;
}

.teamv2-detail img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  float: left;
  margin-right: 30px;
  margin-bottom: 20px;
}

.teamv2-detail h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #333;
  display: none;
}

.teamv2-detail p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.teamv2-detail::after {
  content: '';
  display: table;
  clear: both;
}

/* =========================================
   VALIDATION SERVICES (portfolio)
   ========================================= */
#section-54 {
  background: url('../images/BG_services.jpg') no-repeat scroll top center #8aaccc;
  background-size: cover;
  color: #333;
}

.portfolio-listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 -15px;
}

.portfolio-list {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.portfolio-wrap {
  position: relative;
  overflow: hidden;
}

.portfolio-image {
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.portfolio-list:hover .portfolio-image img {
  transform: scale(1.05);
}

/* Default: title overlaid at bottom-left */
.portfolio-list h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.45);
  margin: 0;
  transition: opacity 0.3s;
  z-index: 3;
  text-align: left;
}

.portfolio-list:hover h3 {
  opacity: 0;
}

/* Hover: white overlay with circled + */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}

.portfolio-list:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay span {
  width: 70px;
  height: 70px;
  border: 2px solid rgba(100,100,100,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(80,80,80,0.8);
  font-weight: 300;
  line-height: 1;
}

/* =========================================
   CORNERSTONE SERVICES (portfolio2)
   ========================================= */
#section-471 {
  background: url('../images/BG_services.jpg') no-repeat scroll top center #c5d8e8;
  background-size: cover;
  color: #333;
}

.portfolio2-listing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 -15px;
}

.portfolio2-list {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.portfolio2-wrap {
  position: relative;
  overflow: hidden;
}

.portfolio2-image {
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}

.portfolio2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.portfolio2-list:hover .portfolio2-image img {
  transform: scale(1.05);
}

/* Default: title overlaid at bottom-left */
.portfolio2-list h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.45);
  margin: 0;
  transition: opacity 0.3s;
  z-index: 3;
  text-align: left;
}

.portfolio2-list:hover h3 {
  opacity: 0;
}

/* Hover: white overlay with circled + */
.portfolio2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}

.portfolio2-list:hover .portfolio2-overlay {
  opacity: 1;
}

.portfolio2-overlay span {
  width: 70px;
  height: 70px;
  border: 2px solid rgba(100,100,100,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(80,80,80,0.8);
  font-weight: 300;
  line-height: 1;
}

/* =========================================
   WHY US SECTION
   ========================================= */
#section-153 {
  background: url('../images/BG_why-us.jpg') no-repeat fixed top center #0a0a0a;
  background-size: cover;
  color: #fff;
}

#section-153 .overlay {
  background: rgba(0,0,0,0.65);
}

.service-listing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
}

.service-list {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
}

.service-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(255,255,255,0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.service-detail .service-content {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}

/* =========================================
   CONTACT SECTION
   ========================================= */
#section-167 {
  background: #282828;
  color: #fff;
}

#contact-page {
  text-align: center;
  font-size: 1.1em;
  line-height: 2;
  color: #ddd;
}

#contact-page a {
  color: #E42312;
}

#contact-page a:hover {
  color: #fff;
}

/* =========================================
   FOOTER
   ========================================= */
#colophon {
  background: #000;
  color: #fff;
}

.top-footer {
  background: #272727;
  padding: 40px 0;
}

.top-footer .mid-content {
  display: flex;
  justify-content: center;
}

.lang-switcher {
  list-style: none;
  display: flex;
  gap: 20px;
}

.lang-switcher li a {
  color: #aaa;
  font-size: 14px;
  text-transform: uppercase;
  transition: color 0.2s;
}

.lang-switcher li a:hover,
.lang-switcher li.current-lang a {
  color: #E42312;
}

.bottom-footer {
  background: #000;
  padding: 15px;
  font-size: 14px;
}

.bottom-footer .mid-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.copy-right {
  color: #888;
}

/* =========================================
   SERVICE SUBPAGES
   ========================================= */
.subpage-header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.subpage-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

.subpage-content {
  padding: 80px 0;
}

.subpage-content .mid-content {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.subpage-text {
  flex: 1;
}

.subpage-text h1 {
  font-size: clamp(24px, 4vw, 38px);
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #282828;
  padding-bottom: 16px;
  border-bottom: 3px solid #E42312;
}

.subpage-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.subpage-text ul {
  margin: 16px 0 20px 24px;
  color: #555;
}

.subpage-text ul li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.subpage-illustration {
  flex: 0 0 280px;
}

.subpage-illustration img {
  width: 100%;
  border: 3px solid #eee;
}

/* Validation subpage grid */
.validation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.validation-item {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-top: 3px solid #E42312;
  padding: 24px;
}

.validation-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
}

.validation-item h3 {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #282828;
}

.validation-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* Back link */
.back-link {
  display: inline-block;
  margin-top: 30px;
  padding: 10px 24px;
  background: #E42312;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.2s;
}

.back-link:hover {
  background: #ba1f0f;
  color: #fff;
}

/* =========================================
   BLOG PAGE
   ========================================= */
.blog-header {
  background: #282828;
  padding: 60px 0;
  color: #fff;
  text-align: center;
}

.blog-header h1 {
  font-size: clamp(24px, 4vw, 38px);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.blog-header h1::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #E42312;
}

.blog-content {
  padding: 80px 0;
  background: #f5f5f5;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
}

.blog-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card-image {
  height: 220px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-category {
  font-size: 12px;
  text-transform: uppercase;
  color: #E42312;
  font-weight: 500;
  margin-bottom: 8px;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #282828;
  line-height: 1.4;
  flex: 1;
}

.blog-card-date {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
}

.blog-card-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
}

.blog-card-link {
  display: inline-block;
  padding: 8px 20px;
  background: #E42312;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.2s;
  align-self: flex-start;
}

.blog-card-link:hover {
  background: #ba1f0f;
  color: #fff;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1200px) {
  .mid-content { max-width: 100%; padding: 0 20px; }
}

@media (max-width: 992px) {
  .portfolio-listing { grid-template-columns: repeat(2, 1fr); }
  .portfolio2-listing { grid-template-columns: repeat(2, 1fr); }
  .service-listing { grid-template-columns: 1fr; gap: 30px; }
  .service-list.odd { flex-direction: row; text-align: left; }

  .teamv2-wrapper { flex-direction: column; }
  .teamv2-tab { flex-direction: row; justify-content: center; gap: 10px; }
  .teamv2-image { width: 90px; height: 90px; }
  .teamv2-detail img { width: 200px; height: 200px; }

  .subpage-content .mid-content { flex-direction: column; }
  .subpage-illustration { flex: none; width: 100%; max-width: 300px; }

  .parallax-section.parallax-fixed { background-attachment: scroll; }
}

/* Collapse the horizontal nav to a hamburger before the longest-language
   (German/French) labels would overflow, so the desktop menu is always
   one row regardless of the selected language. */
@media (max-width: 1339px) {
  .menu-toggle { display: block; }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid #E42312;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
    padding: 10px 0;
  }

  .nav-menu.open { display: flex; }

  .nav-menu li a {
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
  }

  .nav-menu li:last-child a { border-bottom: none; }
  .nav-menu li a.blog-btn { margin-left: 0; margin: 5px 20px; }

  /* Language dropdown inside mobile menu */
  .nav-lang-dropdown { width: 100%; }
  .lang-dropdown-toggle {
    margin: 4px 20px;
    width: calc(100% - 40px);
    justify-content: space-between;
  }
  .lang-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid #eee;
    border-left: 3px solid #E42312;
    margin: 0 20px;
    width: calc(100% - 40px);
  }
}

@media (max-width: 768px) {
  .portfolio-listing { grid-template-columns: 1fr 1fr; }
  .portfolio2-listing { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr; }

  .parallax-section { padding: 60px 0; }

  .teamv2-detail img {
    float: none;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 20px;
  }

  .slider-viewport { height: calc(100vh - 75px); min-height: 300px; }
}

@media (max-width: 480px) {
  .portfolio-listing { grid-template-columns: 1fr; }
  .portfolio2-listing { grid-template-columns: 1fr; }
  .validation-grid { grid-template-columns: 1fr; }

  .caption-title { font-size: 22px; }
  .parallax-section h2 { font-size: 22px; margin-bottom: 40px; }

  .site-logo img { height: 44px; }
  .header-inner { padding: 12px 15px; }
}