/* Final Figma alignment for desktop 172:323 and mobile 199:1139. */
body {
  color: #101828;
  font-size: 16px;
}

.bos-wrap { width: min(calc(100% - 48px), 1300px); }
.bos-kicker { color: var(--color-brand); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.bos-header {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
}
.bos-header__bar { min-height: 56px; }
.bos-logo img { width: 60px; height: 32px; object-fit: contain; }
.bos-menu-toggle { color: var(--color-brand); line-height: 1; }

.bos-hero {
  min-height: 696px;
  display: flex;
  flex-direction: column;
  place-items: initial;
  color: var(--color-heading);
  background: var(--color-surface);
}
.bos-hero::after { display: none; }
.bos-hero__media {
  position: relative;
  inset: auto;
  order: 0;
  height: auto;
}
.bos-hero__inner {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: none;
  padding: 2px 0 40px;
}
.bos-hero h1 {
  margin: 0;
  color: #4c4c4c;
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
}
.bos-hero h1 em { color: var(--color-brand); font-style: normal; letter-spacing: .06em; }
.bos-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.bos-hero p { max-width: none; color: #4a5565; font-size: 15px; line-height: 24px; }
.bos-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bos-hero__actions .bos-btn { width: auto; }
.bos-hero__actions .bos-btn { --bos-download-icon: url("/files/theme/bos/img/icons/download_white.png"); }
.bos-hero__actions .bos-btn:not(.bos-btn--ghost) { --bos-download-icon: url("/files/theme/bos/img/icons/download_gray.png"); }
.bos-hero__actions .bos-btn > a::before,
.bos-hero__actions > a.bos-btn::before {
  width: 18px;
  height: 18px;
  content: "";
  background: var(--bos-download-icon) center / contain no-repeat;
  flex: 0 0 18px;
}
.bos-hero__actions .bos-btn > a,
.bos-hero__actions > a.bos-btn { gap: 10px; white-space: nowrap; }

.bos-stats { padding: 40px 0; background: var(--color-brand); color: #fff; }
.bos-stats__grid { gap: 32px 18px; }
.bos-stats strong,
.bos-stat h2,
.bos-stat h3 { color: #fff; font-size: 36px; line-height: 1.2; }
.bos-stats span,
.bos-stat p { min-height: 44px; margin-top: 4px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.bos-stats small:empty { display: none; }

.bos-about { padding: 48px 0; }
.bos-about__grid { gap: 20px; }
.bos-about h2,
.bos-section__intro h2,
.bos-services .bos-section__intro h2 {
  color: #4c4c4c;
  font-size: 30px;
  line-height: 38px;
  letter-spacing: 0;
}
.bos-about p { color: #4a5565; }
.bos-checklist { padding: 0; }
.bos-checklist ul { padding: 0; margin: 0; }
.bos-checklist li { margin: 12px 0; padding-left: 32px; font-size: 14px; line-height: 20px; }
.bos-about__media img { height: 240px; max-height: none; }
.bos-about__card { left: 24px; right: 24px; bottom: auto; top: 0; max-width: none; padding: 8px 22px; }

.bos-section,
.bos-services { padding: 48px 0; }
.bos-section__intro { margin-bottom: 20px; }
.bos-section__intro h2 { margin: 12px 0; text-transform: uppercase; }
.bos-section__intro p { margin: 0; color: #4a5565; }

.bos-products { gap: 20px; }
.bos-product { border-color: var(--color-border); border-radius: 8px; }
.bos-product__img { height: 180px; overflow: hidden; }
.bos-product__img img { box-sizing: border-box; width: 100%; height: 100%; padding: 20px; object-fit: contain; }
.bos-product__body { gap: 12px; padding: 20px; }
.bos-product h3 { color: var(--color-brand); font-size: 20px; line-height: 26px; }
.bos-product__teaser { min-height: 40px; margin: 0; }
.bos-specs { padding: 12px 16px; }
.bos-specs div { font-size: 12px; line-height: 18px; }

.bos-filters { gap: 12px; margin: 0 0 20px; }
.bos-filters a,
.bos-filters button { min-height: 40px; padding: 8px 16px; }
.bos-modules { gap: 20px; }
.bos-module {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.bos-module__image { display: grid; height: 100%; place-items: center; }
.bos-module__image img { width: 100%; height: 100%; padding: 20px; object-fit: contain; background: transparent; }
.bos-module__body { display: grid; gap: 12px; padding: 20px; }
.bos-module__title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bos-module h3 { font-size: 18px; line-height: 24px; }
.bos-tag { padding: 4px 8px; border-radius: 999px; background: var(--color-surface-red); font-size: 10px; }
.bos-modules__more { display: flex; justify-content: center; margin-top: 28px; }
.content-bos-module-listing .bos-btn--ghost {
  background: var(--color-heading);
  color: #fff;
}

.bos-slider { padding: 48px 0; background: #111; }
.bos-slider__track { gap: 20px; }
.bos-slider__track img { height: 500px; border-radius: 8px; }

.bos-cta {
  display: flex;
  min-height: 0;
  flex-direction: column;
  color: #fff;
  background: var(--color-brand);
}
.bos-cta::after { display: none; }
.bos-cta__media { position: relative; width: 100%; height: 218px; object-fit: cover; }
.bos-cta__inner { width: min(calc(100% - 48px), 1300px); max-width: none; padding: 24px 0 48px; }
.bos-cta h2 { font-size: 28px; line-height: 36px; }
.bos-cta li { position: relative; padding-left: 28px; }
.bos-cta li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }

.bos-services { background: var(--color-surface-muted); }
.bos-service-grid { gap: 16px; }
.bos-service { padding: 20px; border: 0; border-radius: 8px; }
.bos-service__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: var(--color-brand);
}
.bos-service__icon img { width: 22px; height: 22px; object-fit: contain; }
.bos-service h3 { margin: 12px 0 4px; font-size: 16px; line-height: 24px; }
.bos-service p { margin: 0; color: #4a5565; font-size: 13px; line-height: 21px; }

.bos-contact { display: grid; gap: 32px; }
.bos-form { max-width: none; gap: 16px; }
.bos-form label,
.bos-demo-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.bos-form input,
.bos-form textarea,
.bos-demo-field input,
.bos-demo-field textarea { padding: 12px 14px; background: #fff; }
.bos-contact__details { padding: 24px; border-radius: 8px; background: var(--color-surface-muted); }

.bos-footer {
  padding: 40px 0 24px;
  border-top: 1px solid var(--color-border);
  color: #4a5565;
  background: #fff;
}
.bos-footer h4 { color: var(--color-heading); }
.bos-footer a:hover { color: var(--color-brand); }
.bos-footer__legal { border-top-color: var(--color-border); }

.bos-styleguide { padding: 64px 0 96px; background: var(--color-surface-muted); }
.bos-styleguide__header { max-width: 760px; margin-bottom: 48px; }
.bos-styleguide__header h1 { margin: 8px 0; font-size: clamp(36px, 5vw, 64px); }
.bos-styleguide__group { margin-top: 24px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.bos-styleguide__group h2 { margin-top: 0; }
.bos-styleguide__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bos-styleguide__columns,
.bos-styleguide__cards { display: grid; gap: 24px; }
.bos-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bos-swatches > div { display: grid; gap: 6px; }
.bos-swatch { display: block; height: 72px; border: 1px solid var(--color-border); border-radius: 8px; }
.bos-swatch--brand { background: var(--color-brand); }
.bos-swatch--heading { background: var(--color-heading); }
.bos-swatch--text { background: var(--color-text); }
.bos-swatch--muted { background: var(--color-text-muted); }
.bos-swatch--surface { background: var(--color-surface); }
.bos-swatch--surface-muted { background: var(--color-surface-muted); }
.bos-swatch--surface-red { background: var(--color-surface-red); }
.bos-swatch--dark { background: var(--color-dark); }
.bos-type-samples { margin-top: 32px; }
.bos-type-samples > * { margin-block: 8px; }
.bos-filters--demo { justify-content: flex-start; margin-top: 20px; }
.bos-demo-field { margin-bottom: 16px; }
.bos-notice { padding: 12px 16px; border-radius: 8px; }
.bos-notice--success { color: #166534; background: #dcfce7; }

/* Native Contao content elements inside nested element groups. */
.bos-badge p,
.bos-stat h3,
.bos-stat p,
.bos-about__card h3,
.bos-about__card p,
.bos-service .content-headline h3,
.bos-service .content-text p { margin: 0; }
.bos-stat h2,
.bos-stat h3 {
  color: #fff;
  font-size: 36px;
  line-height: 1.2;
}
.bos-stat p { min-height: 44px; margin-top: 4px; font-size: 20px; line-height: 1.3; }
.bos-about__card h3 { font-size: 1.7rem; }
.content-hyperlink.bos-btn { padding: 0; }
.content-hyperlink.bos-btn > a {
  display: inline-flex;
  min-height: inherit;
  align-items: center;
  justify-content: center;
  padding: 0 1.15rem;
}
.bos-cta__inner .content-hyperlink.bos-btn > a { color: var(--color-brand); }
.bos-hero__actions .content-hyperlink.bos-btn > a { width: auto; }
.bos-product .content-hyperlink.bos-btn > a { width: 100%; }
.bos-cta__media figure,
.bos-cta__media picture,
.bos-cta__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.bos-service__icon figure { margin: 0; }
.bos-slider__track { display: block; }
.bos-slider__track > ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 0 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
}
.bos-slider__track > ul > li { flex: 0 0 min(80%, 720px); scroll-snap-align: center; }
.bos-slider__track > ul figure { margin: 0; }
.bos-slider__track > ul img { width: 100%; height: 500px; object-fit: cover; }
.bos-form form { display: grid; gap: 16px; }
.bos-form .widget { display: grid; gap: 6px; }
.bos-form .submit {
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.bos-swatch-item .content-text p { margin: 0; font-family: monospace; }

@media (max-width: 499px) {
  .bos-stats__grid { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 767px) {
  .bos-wrap { width: min(calc(100% - 48px), 1300px); }
  .bos-header__tools .bos-langs,
  .bos-header__tools > .bos-btn { display: none; }
  .bos-hero__actions { flex-direction: column; align-items: stretch; }
  .bos-hero__actions .bos-btn,
  .bos-hero__actions .content-hyperlink.bos-btn > a { width: 100%; }
  .bos-slider__track img { height: 420px; flex-basis: 92%; }
  .bos-slider__track > ul > li { flex-basis: 92%; }
  .bos-slider__track > ul img { height: 420px; }
  .bos-styleguide__group { padding: 24px 20px; }
}

@media (min-width: 768px) {
  .bos-contact,
  .bos-styleguide__columns { grid-template-columns: 1.35fr .65fr; }
  .bos-styleguide__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-swatches { grid-template-columns: repeat(4, 1fr); }
  .bos-service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .bos-header__bar { min-height: 106px; }
  .bos-logo img { width: 117px; height: 64px; }
  .bos-hero { min-height: 773px; display: block; }
  .bos-hero__media {
    position: absolute;
    top: 119px;
    right: 15%;
    bottom: 0;
    left: 15%;
    height: auto;
  }
  .bos-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: start;
    gap: 80px;
    padding-top: 86px;
  }
  .bos-hero h1 { font-size: 48px; line-height: 58px; }
  .bos-hero__copy { grid-column: 2; }
  .bos-hero__actions { display: flex; flex-wrap: nowrap; flex-direction: row; }
  .bos-hero__actions .bos-btn { width: auto; }
  .bos-stats { padding: 61px 0; }
  .bos-about { padding: 88px 0; }
  .bos-section,
  .bos-services { padding: 72px 0; }
  .bos-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bos-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bos-cta { display: block; min-height: 660px; }
  .bos-cta__media { position: absolute; inset: 0 0 0 50%; width: 50%; height: 100%; }
  .bos-cta .bos-wrap {
    width: 50%;
    margin-inline: 0;
    padding: 96px 100px;
  }
  .bos-service-grid { grid-template-columns: repeat(3, 1fr); }
}