.about-page { background: #121212; }

.about-hero {
  min-height: 50vh;
  padding: 0 48px 80px;
  background-color: #121212;
  background-image: linear-gradient(rgba(18,18,18,.9), rgba(18,18,18,.9)), url('/assets/images/about-hero.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-hero-inner { max-width: 1190px; margin: 0 auto; padding-top: 150px; }
.about-hero-content { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.about-hero h1 { margin: 0 0 26px; color: #cb0404; font-size: 28px; text-align: center; }
.about-hero h2 { width: 100%; max-width: 800px; margin: 0 0 26px; color: #fff; font-size: 57px; line-height: 1.1; text-align: center; }
.about-hero p { max-width: 760px; margin: 0 0 34px; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.9; text-align: center; }
.about-video { width: 100%; max-width: 720px; aspect-ratio: 16/9; background: #000; }
.about-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.about-hero-cta { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 720px; min-height: 67px; margin-top: 20px; border-radius: 12px; background: #cb0404; color: #fff; font-family: 'Bebas Neue',sans-serif; font-size: 27px; font-weight: 700; text-decoration: none; }
.about-hero-cta:hover { background: #fff; color: #121212; }

.about-badges { padding: 48px; background: #f2f2f2; }
.about-badges-inner { max-width: 1190px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 36px; }
.about-badge { display: flex; align-items: flex-start; justify-content: center; gap: 15px; text-align: center; }
.about-badge-icon { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; flex: 0 0 62px; color: #cb2b1d; font-family: Arial,sans-serif; font-size: 51px; line-height: 1; filter: grayscale(1) sepia(1) saturate(8) hue-rotate(325deg); }
.about-badge-icon.outline { filter: none; font-size: 64px; }
.about-badge h3 { margin: 0; color: #121212; font-size: 38px; line-height: 1.1; }
.about-badge p { margin: 4px 0 0; color: #333; font-size: 17px; line-height: 1.4; }

.about-team { position: relative; padding: 78px 48px 74px; overflow: hidden; background: #121212 url('/assets/images/about-team-bg.webp') center/cover no-repeat; }
.about-team::before { content: ''; position: absolute; inset: 0; background: rgba(18,18,18,.95); }
.about-team-inner { position: relative; z-index: 1; max-width: 1190px; margin: 0 auto; }
.about-team h2 { max-width: 720px; margin: 0 auto 35px; color: #fff; font-size: 52px; text-align: center; }
.about-team .team-card { border-radius: 0; padding: 28px 20px 26px; box-shadow: none; }
.about-team .team-card-image, .about-team .team-card-image img { width: 190px; height: 190px; }
.about-team .team-card-name { font-size: 26px; }
.about-team .team-card-role { font-size: 16px; }
.about-team .carousel-pagination { margin-top: 35px; }

.about-services { padding: 76px 48px 88px; background: #fff; }
.about-services-inner { max-width: 1136px; margin: 0 auto; text-align: center; }
.about-services h2 { margin: 0 0 26px; font-size: 52px; }
.about-services p { max-width: 900px; margin: 0 auto 20px; color: #333; font-size: 17px; line-height: 1.9; }
.about-services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 42px; }
.service-tile { min-height: 158px; padding: 22px 18px 18px; border: 3px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: #333; text-decoration: none; }
.service-tile.green { background: #d7f9b9; border-color: #4ca53e; }
.service-tile.yellow { background: #fffbaa; border-color: #a59a27; }
.service-tile span { color: #c62d1e; font-family: Arial,sans-serif; font-size: 54px; font-weight: 800; line-height: .9; }
.service-tile strong { font-family: 'Bebas Neue',sans-serif; font-size: 26px; font-weight: 700; line-height: 1.08; text-transform: uppercase; }

@media (max-width: 1024px) {
  .about-hero { padding: 0 24px 48px; }
  .about-hero-inner { padding-top: 107px; }
  .about-hero h1 { font-size: 26px; }
  .about-hero h2 { font-size: 47px; }
  .about-hero p { max-width: 100%; font-size: 18px; }
  .about-video, .about-hero-cta { max-width: 100%; }
  .about-badges { padding: 48px 24px; }
  .about-badges-inner { grid-template-columns: repeat(2,1fr); gap: 38px 28px; }
  .about-team { padding: 62px 24px; }
  .about-team h2 { font-size: 42px; }
  .about-services { padding: 62px 24px 74px; }
  .about-services h2 { font-size: 42px; }
  .about-services-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  .about-hero { padding: 0 24px 48px; }
  .about-hero-inner { padding-top: 116px; }
  .about-hero-content { margin-top: 20px; }
  .about-hero h1 { margin-bottom: 23px; font-size: 20px; }
  .about-hero h2 { max-width: 660px; margin-bottom: 24px; font-size: 42px; }
  .about-hero p { margin-bottom: 31px; font-size: 17px; line-height: 1.9; }
  .about-hero-cta { min-height: 58px; border-radius: 12px; font-size: 24px; }
  .about-badges { padding: 48px 24px; }
  .about-badge { flex-direction: column; align-items: center; gap: 8px; }
  .about-badge h3 { font-size: 30px; }
  .about-badge p { font-size: 16px; }
  .about-team { padding: 48px 24px 56px; }
  .about-team h2 { margin-bottom: 26px; font-size: 36px; }
  .about-team .carousel-track { gap: 32px; }
  .about-team .carousel-slide { flex: 0 0 calc((100% - 32px)/2); width: calc((100% - 32px)/2); }
  .about-team .team-card { padding: 28px 16px 24px; }
  .about-team .team-card-image, .about-team .team-card-image img { width: 250px; height: 250px; }
  .about-team .team-card-name { font-size: 25px; }
  .about-team .team-card-role { font-size: 15px; }
  .about-services { padding: 48px 24px 68px; }
  .about-services h2 { font-size: 36px; }
  .about-services p { font-size: 16px; line-height: 1.9; }
  .about-services-grid { gap: 20px; margin-top: 40px; }
  .service-tile { min-height: 142px; padding: 18px 12px; }
  .service-tile span { font-size: 46px; }
  .service-tile strong { font-size: 20px; }
}

@media (max-width: 540px) {
  .about-team .carousel-slide { flex-basis: 100%; width: 100%; }
  .about-services-grid { grid-template-columns: 1fr; }
}