/* ROOT VARIABLES */

:root {
  --csb-bg-dark: #050505;
  --csb-bg-darker: #020203;
  --csb-bg-panel: #131313;
  --csb-accent: #f08a3d;
  --csb-accent-soft: #f3a35b;
  --csb-text-main: #f4f4f4;
  --csb-text-muted: #b1b1b1;
  --csb-footer-brown: #7c4b27;
  --csb-radius-lg: 18px;
  --csb-radius-xl: 26px;
}

body {
  background-color: var(--csb-bg-darker);
  color: var(--csb-text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* NAVIGATION */

.csb-navbar {
  background-color: #000;
}

.csb-logo {
  height: 26px;
}

.csb-nav-link {
  color: #ffffff;
  font-size: 0.9rem;
}

.csb-pill-active {
  padding: 0.35rem 1.4rem;
  border-radius: 999px;
  background-color: var(--csb-accent);
  color: #000;
  font-weight: 600;
}

.csb-btn-contact {
  border-radius: 999px;
  background-color: var(--csb-accent);
  color: #000;
  font-weight: 600;
  padding: 0.4rem 1.4rem;
}

/* HERO */

.csb-hero-bg {
  position: relative;
  min-height: 460px;
  border-radius: 0 0 32px 32px;
  overflow: hidden;
}

.csb-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/index/csb-hero-background.png");
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
}

.csb-hero-inner {
  position: relative;
  z-index: 2;
  padding: 5rem 1rem 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.csb-hero-logo-box {
  /*background: rgba(0, 0, 0, 0.68);*/
  border-radius: 18px;
  padding: 2.5rem 2.3rem;
}

.csb-btn-primary {
  background-color: #fff;
  border-radius: 999px;
  color: #000;
}

.csb-btn-outline {
  border-radius: 999px;
  border: 1px solid #fff;
  color: #fff;
}

.csb-hero-subcopy {
  margin-top: 3rem;
  font-size: 0.75rem;
  color: var(--csb-text-muted);
  max-width: 420px;
}

/* SECTIONS */

.csb-section {
  padding: 3.75rem 0;
  background-color: var(--csb-bg-dark);
}

.csb-link-arrow {
  color: var(--csb-accent);
  font-size: 0.8rem;
}

/* SERVICES CARDS */

.csb-service-card {
  position: relative;
  border-radius: var(--csb-radius-xl);
  overflow: hidden;
  min-height: 210px;
  background-color: #111;
}

.csb-service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.csb-service-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.csb-service-title {
  font-weight: 600;
  font-size: 0.95rem;
}

/* SMALL CTA CARDS */

.csb-small-card {
  background-color: var(--csb-bg-panel);
  border-radius: var(--csb-radius-xl);
  padding: 1.2rem 1.1rem;
  border: 1px solid #2b2b2b;
  font-size: 0.8rem;
}

.csb-small-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--csb-accent-soft);
}

/* FINISHES */

.csb-finishes-sub {
  color: var(--csb-accent-soft);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.csb-image-card {
  border-radius: var(--csb-radius-xl);
  overflow: hidden;
  height: 230px;
}

/* CTA STRIP */

.csb-cta-strip {
  background-color: #101010;
  border-radius: 18px;
  padding: 1.8rem 2.2rem;
}

.csb-btn-cta {
  background-color: var(--csb-accent);
  color: #000;
  border-radius: 999px;
  font-weight: 600;
}

/* FOOTER */

.csb-footer {
  background-color: var(--csb-footer-brown);
  color: #f5e6d5;
  padding: 2.8rem 0 1rem;
}

.csb-hero-logo-box {
  padding: 0.8rem 1.2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.csb-btn-primary, .csb-btn-outline {
  padding: 0.45rem 1.2rem;
  font-size: 0.85rem;
}

.csb-hero-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
}

.csb-hero-inner {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* === HERO POSITION OVERRIDES === */

/* Make the background wrapper full height & center its contents */

.csb-hero-bg {
  min-height: calc(100vh - 80px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove old padding that was locking it higher */

.csb-hero-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.csb-hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.csb-section-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 3rem 0;
}

/* Fix hero height and center content */

.csb-hero-bg {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csb-hero-inner {
  padding: 2rem 1rem;
}

/* Stop the hero from acting like a huge fixed box */

.csb-hero {
  padding: 0;
}

.csb-hero .container-fluid, .csb-hero-bg {
  height: auto !important;
  min-height: 80vh;
}

/* Force white placeholder text in contact form */

form input::placeholder, form textarea::placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

/* ===========================
   BEAUTIFUL FINISHES – IMAGES
   =========================== */

/* 1. Remove right padding from the container in this section */

section.csb-section.csb-finishes > .container {
  padding-right: 0 !important;
}

/* 2. Remove right padding/margin from the outer row and image column */

section.csb-section.csb-finishes .row.gy-4.align-items-start {
  margin-right: 0 !important;
}

section.csb-section.csb-finishes .csb-finishes-images {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* 3. Inner row that actually holds the two images:
      - flex so we can align to the right
      - tighter gap between the two images */

section.csb-section.csb-finishes .csb-finishes-images > .row {
  display: flex !important;
  justify-content: flex-end !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  column-gap: 1rem !important;
}

/* 4. Kill padding inside the two small image columns */

section.csb-section.csb-finishes .csb-finishes-images .col-6, section.csb-section.csb-finishes .csb-finishes-images .col-xxl-5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Finishes image alignment (desktop only) */

/* Kill the left offset on the image column */

@media (min-width: 992px) {
  .csb-finishes-images {
    padding-left: 0 !important;
  }
}

/* Make the inner row only as wide as the images
     and push it to the right edge */

@media (min-width: 992px) {
  .csb-finishes-images > .row {
    display: flex;
    justify-content: flex-end;
    --bs-gutter-x: 1rem;
  }
}

/* Remove right padding so the last image can sit
     flush with the container edge */

@media (min-width: 992px) {
  .csb-finishes-images > .row > .col-6 {
    flex: 0 0 auto;
    width: auto;
    padding-right: 0;
  }
}

/* =======================================
   MOBILE STACKING FIXES
   ======================================= */

/* 1. Remove the fixed heights on rows that hold cards */

@media (max-width: 767.98px) {
  .csb-service-grid {
    height: auto !important;
  }
}

/* 2. Let service cards grow naturally instead of 310px locks */

@media (max-width: 767.98px) {
  .csb-service-card {
    height: auto !important;
    min-height: 240px;
  }
}

/* 3. Make sure images respect the card height */

@media (max-width: 767.98px) {
  .csb-service-card img {
    height: 240px;
  }
}

/* 4. “Beautiful Finishes / Pure Control” – unlock layout */

@media (max-width: 767.98px) {
  #services-3 .row.csb-service-grid {
    height: auto !important;
  }
}

/* 5. “Art of Sound” section wrapper – remove hard height + overlaps */

@media (max-width: 767.98px) {
  .csb-section.csb-finishes {
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* 6. The inner row with the B&W + Basalte images + copy */

@media (max-width: 767.98px) {
  .csb-section.csb-finishes .csb-service-grid {
    height: auto !important;
  }
}

/* 7. Contact block: make columns stack neatly */

@media (max-width: 767.98px) {
  .csb-cta-strip {
    padding: 1.5rem 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .csb-cta-strip > div:first-child {
    padding-left: 0 !important;
  }
}

/* =======================================
   MOBILE — SHRINK HERO LOGO
   ======================================= */

/* Reduce logo width */

@media (max-width: 767.98px) {
  .csb-hero-logo {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    display: block;
  }
}

/* Tighten spacing in hero */

@media (max-width: 767.98px) {
  .csb-hero-content {
    padding-top: 2rem !important;
  }
}

/* =======================================
   MOBILE NAVBAR FIXES
   ======================================= */

/* Center the logo vertically in the navbar */

@media (max-width: 767.98px) {
  .navbar .navbar-brand img, .csb-navbar-logo {
    height: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .navbar-brand {
    display: flex;
    align-items: center;
  }
}

/* Make hamburger icon white and bigger */

@media (max-width: 767.98px) {
  .navbar-toggler-icon {
    filter: brightness(0) invert(1) !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Remove padding that pushes the icon down */

@media (max-width: 767.98px) {
  .navbar-toggler {
    padding: 0.25rem !important;
    margin-top: 0 !important;
  }
}

/* Ensure hamburger menu actually opens when tapped */

@media (max-width: 767.98px) {
  .navbar-toggler {
    z-index: 9999 !important;
    position: relative;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse {
    z-index: 9998 !important;
  }
}

/* Fix the mobile navbar dropdown */

/* Give dropdown a solid background */

@media (max-width: 767.98px) {
  .navbar-collapse {
    background: rgba(0, 0, 0, 0.95) !important;
    padding: 1rem !important;
    border-radius: 0 0 12px 12px;
  }
}

/* Ensure menu items stack properly */

@media (max-width: 767.98px) {
  .navbar-nav {
    width: 100%;
    text-align: left !important;
  }
}

@media (max-width: 767.98px) {
  .navbar-nav .nav-item {
    margin-bottom: 1rem;
  }
}

/* Fix menu link appearance */

@media (max-width: 767.98px) {
  .navbar-nav .nav-link {
    color: #fff !important;
    font-size: 1.2rem;
    padding-left: 0 !important;
  }
}

/* Remove weird left-shift */

@media (max-width: 767.98px) {
  .navbar-collapse.collapse.show {
    display: block;
  }
}

/* ============================
   RESPONSIVE STACKING FIXES
   ============================ */

/* Tablets & small laptops – let cards grow naturally */

/* Let the grids grow instead of being locked to a height */

@media (max-width: 1199.98px) {
  .csb-service-grid, .csb-section.csb-finishes .row, .csb-audio-grid {
    height: auto !important;
  }
}

/* Cards / image tiles: remove fixed heights */

@media (max-width: 1199.98px) {
  .csb-service-card, .csb-image-card {
    height: auto !important;
  }
}

/* Images inside cards: scale with width, keep aspect */

@media (max-width: 1199.98px) {
  .csb-service-card > img, .csb-image-card > img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
    display: block;
  }
}

/* Give card rows a bit of breathing room */

@media (max-width: 1199.98px) {
  .csb-finishes-images .row, .csb-service-grid {
    row-gap: 1.5rem;
  }
}

/* Phones & narrow tablets – force single column stacking */

/* Headings with button on the right – stack nicely */

@media (max-width: 767.98px) {
  .csb-services-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Force each grid item to take full width, even if it's col-md-6, col-lg-3, etc. */

@media (max-width: 767.98px) {
  .csb-service-grid > [class^="col-"], .csb-section.csb-finishes .row > [class^="col-"], .csb-audio-grid > [class^="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* CTA bar above the form – stop it overlapping + make it mobile friendly */

@media (max-width: 767.98px) {
  .csb-cta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .csb-cta-strip .btn {
    width: 100%;
  }
}

/* Fix "Art of Sound" row + CTA overlap on tablet / mid widths */

.csb-service-grid {
  height: auto !important;
}

/* Entertainment hero */

.csb-hero-entertainment {
  background-image: url('../../assets/img/entertainment/cinema-hero.png');
  background-size: cover;
  background-position: center;
}

/* Make the cinema page hero fill the whole screen */

section.csb-hero-cinema, section.csb-hero-cinema > div.csb-hero-cinema {
  min-height: 100vh !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.csb-section {
}

/* Cinema page – bottom 4 feature tiles */

.csb-cinema-feature-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #111;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}

.csb-cinema-feature-card img {
  flex: 0 0 40%;
  width: 40%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.csb-cinema-feature-copy {
  flex: 1 1 auto;
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}

.csb-cinema-feature-copy h5 {
  margin-bottom: 6px;
  font-weight: 700;
  color: #ffffff;
}

.csb-cinema-feature-copy p {
  margin: 0;
  color: #d3d3d3;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* CONTACT PAGE */

.csb-contact-hero {
  position: relative;
  min-height: 320px;
  padding: 72px 0 56px;
  background: radial-gradient(circle at top left, #2a2a2a 0, #050505 55%, #000 100%);
  color: #fff;
}

.csb-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/img/contact-hero.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

.csb-contact-hero > .container {
  position: relative;
  z-index: 1;
}

.csb-contact-kicker {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #eb8841;
  color: #eb8841;
}

.csb-contact-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 600;
  margin-bottom: 8px;
}

.csb-contact-subtitle {
  max-width: 540px;
  color: #d3d3d3;
  margin-bottom: 16px;
}

.csb-contact-breadcrumb {
  font-size: 0.85rem;
  color: #aaaaaa;
}

.csb-contact-breadcrumb a {
  color: #eb8841;
  text-decoration: none;
}

.csb-contact-breadcrumb a:hover {
  text-decoration: underline;
}

/* MAIN SECTION */

.csb-contact-main {
  padding: 56px 0 64px;
  background: #050505;
  color: #f5f5f5;
}

.csb-contact-tag {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #eb8841;
  margin-bottom: 6px;
}

.csb-contact-heading {
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.csb-contact-body {
  color: #c5c5c5;
  max-width: 540px;
}

.csb-contact-block {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.csb-contact-block h6 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #eb8841;
  margin-bottom: 4px;
}

.csb-contact-block p {
  margin: 0;
  color: #e0e0e0;
  font-size: 0.9rem;
}

/* FORM CARD */

.csb-contact-form-card {
  background: #111111;
  border-radius: 22px;
  padding: 28px 26px 30px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

.csb-contact-form-card h3 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.csb-contact-form-intro {
  font-size: 0.9rem;
  color: #c5c5c5;
  margin-bottom: 18px;
}

.csb-input {
  background: #181818;
  border: 1px solid #2b2b2b;
  color: #f5f5f5;
}

.csb-input:focus {
  background: #181818;
  border-color: #eb8841;
  box-shadow: 0 0 0 0.2rem rgba(235, 136, 65, 0.25);
}

.csb-contact-disclaimer {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #8c8c8c;
}

/* MAP STRIP */

.csb-contact-map {
  padding: 0 0 64px;
  background: #050505;
}

.csb-contact-map-inner {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #222;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
}

.csb-contact-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

/* CTA STRIP */

.csb-contact-cta {
  padding: 40px 0;
  background: #101010;
  color: #f5f5f5;
  border-top: 1px solid #1f1f1f;
}

.csb-contact-cta h2 {
  font-size: 1.5rem;
}

.csb-contact-cta p {
  color: #c5c5c5;
}

/* ================================
   ENTERTAINMENT PAGE – MOBILE FIXES
   ================================ */

/* 1. Hero: make it fill the screen and centre the text on mobile */

/* Make hero fill the viewport */

@media (max-width: 767.98px) {
  .csb-hero-entertainment {
    height: 100vh !important;
    min-height: 100vh;
  }
}

/* Proper flex centring */

@media (max-width: 767.98px) {
  .csb-hero-entertainment .csb-hero-inner {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 1.5rem;
  }
}

/* Centre the heading + subcopy */

@media (max-width: 767.98px) {
  .csb-hero-entertainment .csb-cinema-hero-title, .csb-hero-entertainment .csb-cinema-hero-subcopy {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2. Stop the three feature cards from overlaying the hero on mobile */

/* Make the row height flexible instead of fixed */

@media (max-width: 767.98px) {
  #about .row.mt-4 {
    height: auto !important;
  }
}

/* Kill any negative margins / positioning the cards might have */

@media (max-width: 767.98px) {
  #about .csb-service-card, #about .csb-cinema-feature-card {
    position: relative !important;
    margin-top: 0 !important;
  }
}

/* Give the cards some breathing room from the hero */

@media (max-width: 767.98px) {
  #about {
    padding-top: 96px !important;
  }
}

@media (max-width: 767.98px) {
  #about .csb-cinema-feature-card {
    margin-bottom: 1.5rem !important;
  }
}

/* Shared hero styling */

.csb-hero {
  height: 704px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Cinema page hero image */

.csb-hero-cinema {
  background-image: url("assets/img/hero-cinema.jpg");
}

/* Effortless Living page hero image */

.csb-hero-effortless {
  background-image: url("../../assets/img/effortless-living/comfort-meets-convenience.png");
}

.csb-hero-effortless {
  background-image: url("../../assets/img/effortless-living/comfort-meets-convenience.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.csb-effortless-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  height: 100%;
}

.csb-effortless-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csb-effortless-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

.csb-effortless-overlay h6 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.csb-effortless-overlay p {
  color: #d3d3d3;
  font-size: 0.8rem;
  margin-bottom: 0;
}

.csb-effortless-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.csb-effortless-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.csb-effortless-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

.csb-effortless-overlay h6 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.csb-effortless-overlay p {
  color: #d3d3d3;
  font-size: 0.8rem;
  margin-bottom: 0;
}

/* Make first card shorter & center text */

.effortless-card {
  border-radius: 14px;
  border: 1px solid #1b1b1b;
  background: #161616;
  padding: 40px 32px;
  min-height: 300px;
  display: flex;
  justify-content: center;
}

/* Make Comfort Living card smaller & center text */

.comfort-living-card {
  border-radius: 14px;
  border: 1px solid #1b1b1b;
  background: #161616;
  overflow: hidden;
  min-height: 300px;
}

.comfort-text {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Prevent all content from sliding behind the hero --- */

/* Force the hero to occupy its full real height */

.csb-hero, .csb-hero-bg {
  position: relative;
  display: block;
  z-index: 1;
}

/* Ensure any section after the hero starts below it */

.csb-hero + .csb-section, .csb-hero-bg + .csb-section {
  position: relative;
  z-index: 2;
  padding-top: 40px !important;
  clear: both;
}

/* Safety net for all sections */

.csb-section {
  position: relative;
  z-index: 2;
}

/* ============================
   HERO LAYOUT – FINAL FIX
   ============================ */

/* 1. Let the hero size itself properly instead of being a tall fixed box */

.csb-hero {
  height: auto !important;
}

/* 2. Kill the fixed height on the inner container from the HTML */

.csb-hero > .container-fluid {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* 3. Make the background wrapper be the actual hero height */

.csb-hero-bg {
  height: auto !important;
  min-height: calc(100vh - 64px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. Keep the intro section starting immediately after the hero */

.csb-hero + .csb-section, .csb-hero-bg + .csb-section {
  padding-top: 0 !important;
}

/* 5. Sections stay on their own solid background above the hero */

.csb-section {
  position: relative;
  z-index: 2;
  background-color: var(--csb-bg-dark);
}

/* ============================================================
   HORIZONTAL SCROLLING SERVICE SECTION (test page)
   ============================================================ */

.csb-service-scroll {
  position: relative;
  margin-top: 12px;
}

/* Horizontal row of cards */

.csb-service-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Show a subtle scrollbar so it's obvious it scrolls */

.csb-service-track::-webkit-scrollbar {
  height: 6px;
}

.csb-service-track::-webkit-scrollbar-track {
  background: transparent;
}

.csb-service-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
}

.csb-service-track {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}

/* Each tile = 1/4 width on desktop (4 visible) */

.csb-service-item {
  flex: 0 0 calc(25% - 10px);
  max-width: 330px;
  scroll-snap-align: start;
}

/* Lock card height so all tiles match visually */

.csb-service-item .csb-service-card {
  height: 310px;
}

/* Tablet – about 3 in view */

@media (max-width: 991.98px) {
  .csb-service-item {
    flex: 0 0 40%;
  }
}

/* Mobile – 1 main tile + peek of next */

@media (max-width: 575.98px) {
  .csb-service-item {
    flex: 0 0 80%;
  }
}

/* Arrow hint on the right */

.csb-scroll-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 10px 14px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0));
  font-size: 1.8rem;
  line-height: 1;
  color: #ffffff;
  opacity: 0.85;
  pointer-events: none;
}

/* === Horizontal scrolling services (test page) === */

.csb-service-scroll {
  position: relative;
  margin-top: 12px;
}

/* The row that actually scrolls */

.csb-service-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar */

.csb-service-track::-webkit-scrollbar {
  display: none;
}

.csb-service-track {
  scrollbar-width: none;
}

/* 4 tiles visible on desktop */

.csb-service-item {
  flex: 0 0 calc(25% - 10px);
  max-width: 330px;
  scroll-snap-align: start;
}

/* Fix tile height so they match */

.csb-service-item .csb-service-card {
  height: 310px;
}

/* Tablet */

@media (max-width: 991.98px) {
  .csb-service-item {
    flex: 0 0 40%;
  }
}

/* Mobile */

@media (max-width: 575.98px) {
  .csb-service-item {
    flex: 0 0 80%;
  }
}

/* Right arrow button */

.csb-scroll-arrow {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 999px 0 0 999px;
  border: none;
  outline: none;
  background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0));
  font-size: 2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
}

.csb-scroll-arrow:focus {
  outline: 2px solid rgba(255,255,255,0.5);
}

/* --- Fix scroll arrow clickability on test page --- */

.csb-service-scroll {
  position: relative;
}

.csb-scroll-arrow {
  z-index: 20;
  pointer-events: auto !important;
}

/* Comfort hero */

.csb-hero-comfort {
  background-image: url('../../assets/img/comfort/Comfort-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== ABOUT PAGE STYLES ===== */

/* HERO */

.csb-hero-about {
  padding: 0;
}

.csb-hero-about-inner {
  height: 520px;
  background: url("assets/img/about-hero.jpg") center center / cover no-repeat;
  position: relative;
}

.csb-hero-about-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.95) 100% );
}

.csb-hero-about-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.csb-hero-about-title {
  font-size: 2.6rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 24px;
}

.csb-hero-about-copy {
  font-size: 0.95rem;
  color: #d3d3d3;
  max-width: 420px;
  text-align: right;
  margin-left: auto;
}

.csb-hero-about-copy strong {
  color: #ffffff;
}

.csb-hero-about-copy a {
  display: inline-block;
  margin-top: 10px;
  color: #eb8841;
  font-weight: 500;
  text-decoration: none;
}

/* COMMERCIAL INTRO */

.csb-about-commercial-intro h5 {
  color: #ffffff;
  font-size: 1.15rem;
}

.csb-about-commercial-intro h5 span {
  display: block;
}

.csb-about-commercial-intro .highlight {
  font-weight: 600;
}

.csb-about-commercial-intro p {
  color: #d3d3d3;
  margin-bottom: 0;
}

.csb-about-commercial-intro a {
  color: #eb8841;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}

/* COMMERCIAL GALLERY */

.csb-commercial-gallery-wrapper {
  margin-top: 28px;
}

.csb-commercial-gallery {
  display: flex;
  gap: 10px;
  min-height: 260px;
}

.csb-commercial-card {
  position: relative;
  flex: 0.6;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  transition: flex 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.csb-commercial-card.active {
  flex: 2.4;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
}

.csb-commercial-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.82);
  transition: filter 0.35s ease;
}

.csb-commercial-card.active .csb-commercial-card-image {
  filter: brightness(0.96);
}

.csb-commercial-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
  background: linear-gradient( 0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.0) 60% );
}

.csb-commercial-card-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
}

.csb-commercial-card-subtitle {
  color: #d3d3d3;
  font-size: 0.8rem;
}

/* OUR APPROACH STRIP */

.csb-approach-strip {
  margin-top: 36px;
}

.csb-approach-panel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--csb-bg-darker, #181818);
  background: #111;
}

.csb-approach-bg {
  position: absolute;
  inset: 0;
  background: url("assets/img/about-approach.jpg") center center / cover no-repeat;
  filter: brightness(0.65);
}

.csb-approach-overlay {
  position: relative;
  z-index: 1;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  background: linear-gradient( 180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 100% );
  color: #ffffff;
}

.csb-approach-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.csb-approach-copy {
  font-size: 0.9rem;
  color: #d3d3d3;
  max-width: 540px;
}

/* TEAM */

.csb-team-heading {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 22px;
}

.csb-team-heading h5 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 4px;
}

.csb-team-heading p {
  color: #d3d3d3;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.csb-team-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  height: 320px;
}

.csb-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86);
}

.csb-team-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
  background: linear-gradient( 0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.05) 65% );
}

.csb-team-name {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.csb-team-role {
  color: #d3d3d3;
  font-size: 0.8rem;
}

/* CTA section (re-used) */

.csb-about-cta-section {
  padding: 64px 0 96px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991.98px) {
  .csb-hero-about-inner {
    height: 420px;
  }
}

@media (max-width: 991.98px) {
  .csb-hero-about-title {
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  .csb-hero-about-copy {
    text-align: center;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .csb-commercial-gallery {
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .csb-commercial-card, .csb-commercial-card.active {
    flex: 1;
    height: 210px;
  }
}

@media (max-width: 767.98px) {
  .csb-approach-overlay {
    padding: 20px 18px;
  }
}

@media (max-width: 767.98px) {
  .csb-team-card {
    height: 290px;
  }
}

/* ===== MOBILE FIX: Expand commercial job images properly ===== */

/* Stack vertically with proper spacing */

@media (max-width: 767.98px) {
  .csb-commercial-gallery {
    flex-direction: column !important;
    gap: 20px !important;
  }
}

/* Allow cards to grow naturally instead of staying 210px tall */

@media (max-width: 767.98px) {
  .csb-commercial-card, .csb-commercial-card.active {
    height: auto !important;
    min-height: 300px !important;
    flex: none !important;
  }
}

/* Ensure the background image fills the available space cleanly */

@media (max-width: 767.98px) {
  .csb-commercial-card-image {
    min-height: 300px !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* ===== ABOUT PAGE – MOBILE TEAM FIX ===== */

/* Let the team section grow with its content instead of being fixed at 660px */

@media (max-width: 767.98px) {
  .csb-section[style*="height: 660px"] {
    height: auto !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Reduce card height on mobile & override inline heights */

@media (max-width: 767.98px) {
  .csb-section[style*="height: 660px"] .csb-team-card {
    height: 320px !important;
  }
}

/* =========================
   JOB POPUP (MODAL)
   ========================= */

.csb-job-modal .modal-dialog.csb-job-modal-dialog {
  max-width: 980px;
  padding: 0 14px;
}

.csb-job-modal-content {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  position: relative;
}

.csb-job-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  filter: none;
  opacity: 0.9;
}

.csb-job-modal-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 420px;
}

.csb-job-modal-left {
  padding: 28px 30px;
  color: #0b0b0b;
}

.csb-job-modal-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}

.csb-job-modal-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  margin-bottom: 14px;
}

.csb-job-modal-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.csb-job-modal-location {
  color: #6a6a6a;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.csb-job-modal-desc {
  color: #2b2b2b;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 520px;
}

.csb-job-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.csb-job-modal-secondary {
  border-radius: 7px;
  padding: 8px 18px;
}

/* Mobile stack */

@media (max-width: 767.98px) {
  .csb-job-modal-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-right {
    order: -1;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-left {
    padding: 22px 18px;
  }
}

/* =========================
   JOB POPUP (MODAL)
   ========================= */

.csb-job-modal .modal-dialog.csb-job-modal-dialog {
  max-width: 980px;
  padding: 0 14px;
}

.csb-job-modal-content {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  position: relative;
}

.csb-job-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  filter: none;
  opacity: 0.9;
}

.csb-job-modal-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 420px;
}

.csb-job-modal-left {
  padding: 28px 30px;
  color: #0b0b0b;
}

.csb-job-modal-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}

.csb-job-modal-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  margin-bottom: 14px;
}

.csb-job-modal-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.csb-job-modal-location {
  color: #6a6a6a;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.csb-job-modal-desc {
  color: #2b2b2b;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 520px;
}

.csb-job-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.csb-job-modal-secondary {
  border-radius: 7px;
  padding: 8px 18px;
}

/* Mobile stack */

@media (max-width: 767.98px) {
  .csb-job-modal-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-right {
    order: -1;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-left {
    padding: 22px 18px;
  }
}

/* =========================
   JOB POPUP (MODAL)
   ========================= */

.csb-job-modal .modal-dialog.csb-job-modal-dialog {
  max-width: 980px;
  padding: 0 14px;
}

.csb-job-modal-content {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  position: relative;
}

/* Darken backdrop slightly */

.modal-backdrop.show {
  opacity: 0.72;
}

.csb-job-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  opacity: 0.9;
}

.csb-job-modal-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 420px;
}

.csb-job-modal-left {
  padding: 28px 30px;
  color: #0b0b0b;
}

.csb-job-modal-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}

.csb-job-modal-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  margin-bottom: 14px;
}

.csb-job-modal-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.csb-job-modal-location {
  color: #6a6a6a;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.csb-job-modal-desc {
  color: #2b2b2b;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 520px;
}

.csb-job-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.csb-job-modal-secondary {
  border-radius: 7px;
  padding: 8px 18px;
}

/* Mobile stack */

@media (max-width: 767.98px) {
  .csb-job-modal-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-right {
    order: -1;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-left {
    padding: 22px 18px;
  }
}

/* =========================
   JOB POPUP (MODAL)
   ========================= */

.csb-job-modal .modal-dialog.csb-job-modal-dialog {
  max-width: 980px;
  padding: 0 14px;
}

.csb-job-modal-content {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  position: relative;
}

/* Darken backdrop slightly */

.modal-backdrop.show {
  opacity: 0.72;
}

.csb-job-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  opacity: 0.9;
}

.csb-job-modal-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 420px;
}

.csb-job-modal-left {
  padding: 28px 30px;
  color: #0b0b0b;
}

.csb-job-modal-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}

.csb-job-modal-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  margin-bottom: 14px;
}

.csb-job-modal-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.csb-job-modal-location {
  color: #6a6a6a;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.csb-job-modal-desc {
  color: #2b2b2b;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 520px;
}

.csb-job-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.csb-job-modal-secondary {
  border-radius: 7px;
  padding: 8px 18px;
}

/* Mobile stack */

@media (max-width: 767.98px) {
  .csb-job-modal-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-right {
    order: -1;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .csb-job-modal-left {
    padding: 22px 18px;
  }
}

/* =========================================================
   MOBILE CLEANUP PATCH (does not affect desktop)
   ========================================================= */

/* 1) Kill the right-side black bar (horizontal overflow) */

@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}

/* Safety net: anything accidentally wider than the screen */

@media (max-width: 767.98px) {
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 2) Make section spacing consistent */

@media (max-width: 767.98px) {
  .csb-section > .container, .csb-partners > .container, footer.csb-footer > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 3) Undo the “finishes” desktop edge-flush on mobile
        (your CSS currently removes right padding globally) */

@media (max-width: 767.98px) {
  section.csb-section.csb-finishes > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 767.98px) {
  section.csb-section.csb-finishes .row.gy-4.align-items-start, section.csb-section.csb-finishes .csb-finishes-images, section.csb-section.csb-finishes .csb-finishes-images > .row {
    margin-right: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }
}

/* 4) Intro block: remove fixed width + right-alignment on mobile */

@media (max-width: 767.98px) {
  #about .csb-intro-right p[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
}

/* 5) Partner logos: make the stack predictable */

@media (max-width: 767.98px) {
  .csb-partners-logos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img {
    margin: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* The KNX logo in your HTML isn’t wrapped in .csb-partner-logo, so catch it */

@media (max-width: 767.98px) {
  .csb-partners-logos > img {
    justify-self: center !important;
    align-self: center !important;
    max-width: 100% !important;
  }
}

/* 6) Footer: remove fixed heights/widths causing cut-off + overflow */

@media (max-width: 767.98px) {
  footer.csb-footer {
    height: auto !important;
    padding-bottom: 24px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767.98px) {
  footer.csb-footer .row[style*="height"] {
    height: auto !important;
  }
}

/* Any footer element with inline width/height -> let it be responsive */

@media (max-width: 767.98px) {
  footer.csb-footer *[style*="width"], footer.csb-footer *[style*="height"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Make footer columns stack cleanly */

@media (max-width: 767.98px) {
  footer.csb-footer .row {
    row-gap: 18px !important;
  }
}

/* Copyright line shouldn’t be a 477px wide box */

@media (max-width: 767.98px) {
  footer.csb-footer p {
    margin-bottom: 0 !important;
  }
}

/* Art of Sound: force order = Text, Image, Image */

@media (max-width: 767.98px) {
  #services-2 .csb-service-grid > :nth-child(1) {
    order: 2;
  }
}

/* image 1 */

@media (max-width: 767.98px) {
  #services-2 .csb-service-grid > :nth-child(2) {
    order: 3;
  }
}

/* image 2 */

@media (max-width: 767.98px) {
  #services-2 .csb-service-grid > :nth-child(3) {
    order: 1;
  }
}

/* text */

/* Reduce gap between Beautifully Simple → Art of Sound */

/* 1) Kill excessive bottom margin on last image above Art of Sound */

@media (max-width: 767.98px) {
  .csb-finishes-images, .csb-finishes-images .csb-image-card:last-child {
    margin-bottom: 12px !important;
  }
}

/* 2) Reduce top padding of Art of Sound section */

@media (max-width: 767.98px) {
  #services-2 {
    padding-top: 8px !important;
  }
}

/* 3) If the heading itself adds extra space */

@media (max-width: 767.98px) {
  #services-2 h2, #services-2 h3 {
    margin-top: 0 !important;
  }
}

/* --- CTA strip: stop the huge left indent + make it a neat stacked card --- */

@media (max-width: 767.98px) {
  .csb-cta-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 767.98px) {
  .csb-cta-strip > div:first-child {
    padding-left: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .csb-cta-strip .text-md-end {
    text-align: left !important;
  }
}

@media (max-width: 767.98px) {
  .csb-cta-strip .csb-btn-cta {
    width: 100% !important;
  }
}

/* --- Contact details + form section (the one right under the CTA strip) --- */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .row.d-flex.justify-content-center {
    --bs-gutter-y: 14px;
  }
}

/* Turn Phone + Email into two tidy “chips” (and remove the empty 3rd block) */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-4.col-xl-4.col-xxl-5 > .d-flex.h-100.flex-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-content: start !important;
  }
}

/* Each contact method */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-4.col-xl-4.col-xxl-5 .d-flex.align-items-center.p-3 {
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    margin: 0 !important;
  }
}

/* Hide the empty third block */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-4.col-xl-4.col-xxl-5 .d-flex.align-items-center.p-3:nth-child(3) {
    display: none !important;
  }
}

/* Icon size down so it doesn’t feel chunky */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .bs-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
}

/* Tighten the text */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 h6 {
    margin-bottom: 4px !important;
  }
}

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .px-2 {
    padding-left: 10px !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 p {
    margin-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
}

/* Form column: make it a proper card and match the style */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-5.col-xl-4.col-xxl-6 {
    border-radius: 18px !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }
}

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-5.col-xl-4.col-xxl-6 form {
    padding: 0 !important;
  }
}

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 input, section.position-relative.py-4.py-xl-5 textarea {
    border-radius: 12px !important;
  }
}

/* Make Phone + Email stack (fixes ugly email breaking) */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-4.col-xl-4.col-xxl-5 > .d-flex.h-100.flex-column.justify-content-center.align-items-start {
    grid-template-columns: 1fr !important;
  }
}

/* Stop breaking the email in silly places */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 .col-md-6.col-lg-4.col-xl-4.col-xxl-5 .d-flex.align-items-center.p-3 p {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }
}

/* Footer CSB logo – reduce size on mobile */

@media (max-width: 767.98px) {
  footer.csb-footer img[src*="CSB"], footer.csb-footer img[src*="csb"] {
    max-width: 140px !important;
    height: auto !important;
    margin-bottom: 12px !important;
  }
}

/* Partners: 4 logos then 3, and include standalone KNX img */

@media (max-width: 767.98px) {
  .csb-partners-logos {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 16px !important;
  }
}

/* Make sure BOTH wrapped logos (.csb-partner-logo) and direct imgs (KNX) behave */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo, .csb-partners-logos > img {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* Kill the empty grid item that creates the weird gap */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo:empty {
    display: none !important;
  }
}

/* If the "empty" div contains whitespace, this helps too (modern browsers) */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo:not(:has(img)) {
    display: none !important;
  }
}

/* --- Explicit placement (4 on row 1, 3 on row 2 centred) --- */

/* Row 1 (4 logos) */

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="cedia"] {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="tridium"] {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="control4"] {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="crestron"] {
    grid-column: 4;
    grid-row: 1;
  }
}

/* Row 2 (3 logos) */

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="lutron"] {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="basalte"] {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="knx"] {
    grid-column: 4;
    grid-row: 2;
  }
}

/* 1) Make ALL csb sections less tall on mobile */

@media (max-width: 767.98px) {
  .csb-section {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
}

/* 2) Art of Sound wrapper: remove fixed height + negative margins */

@media (max-width: 767.98px) {
  section.csb-section.csb-finishes {
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* 3) Art of Sound inner section: kill the big inline padding-top:70px */

@media (max-width: 767.98px) {
  #services-2 {
    padding-top: 26px !important;
    padding-bottom: 18px !important;
  }
}

/* 4) Tighten the section after Art of Sound (CTA strip container) */

@media (max-width: 767.98px) {
  section.pt-0.csb-section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* 5) Tighten the contact block padding (Bootstrap py-4) */

@media (max-width: 767.98px) {
  section.position-relative.py-4.py-xl-5 {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* 6) Reduce “double spacing” between a section and the next one */

@media (max-width: 767.98px) {
  .csb-section + .csb-section {
    padding-top: 18px !important;
  }
}

/* Tighten spacing between the 3 service cards (Entertainment / Effortless Living / Comfort) */

@media (max-width: 767.98px) {
  #services .csb-service-grid {
    --bs-gutter-y: 1px !important;
  }
}

/* If any of the cards have their own margin, kill it */

@media (max-width: 767.98px) {
  #services .csb-service-card {
    margin-bottom: 0 !important;
  }
}

/* If the column wrapper adds extra gap (common with d-flex + gap utilities) */

@media (max-width: 767.98px) {
  #services .col-md-6, #services .col-md-6 > .csb-service-card {
    margin-bottom: 0 !important;
  }
}

/* ===== Partners: force 4 then 3, centred (FLEX = reliable) ===== */

@media (max-width: 767.98px) {
  .csb-partners-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }
}

/* Treat BOTH wrapper divs and the standalone KNX <img> as “items” */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo, .csb-partners-logos > img {
    flex: 0 0 calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }
}

/* Hide any placeholder/empty logo blocks (even if whitespace exists) */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo:empty {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo:not(:has(img)) {
    display: none !important;
  }
}

/* Logo images behave */

@media (max-width: 767.98px) {
  .csb-partners-logos img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* Keep each logo cell a consistent height */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo, .csb-partners-logos > img {
    height: 44px !important;
  }
}

/* Clamp all logos so none can dominate */

@media (max-width: 767.98px) {
  .csb-partners-logos img {
    max-height: 34px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* KNX specifically (it's the one exploding) */

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="knx"] {
    max-height: 30px !important;
  }
}

/* Give each logo item a proper “slot” height */

@media (max-width: 767.98px) {
  .csb-partners-logos .csb-partner-logo, .csb-partners-logos > img {
    height: 70px !important;
  }
}

/* Make logos readable again */

@media (max-width: 767.98px) {
  .csb-partners-logos img {
    max-height: 65px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* KNX slightly smaller so it matches the set */

@media (max-width: 767.98px) {
  .csb-partners-logos img[src*="knx"] {
    max-height: 44px !important;
  }
}