/* =========================================================
   COTO VIET NAM - COMPACT VERTICAL ABOUT PAGE STYLE
   Bố cục dọc truyền thống, siêu nhỏ gọn, các phần tử căn chỉnh
   tự động thu nhỏ theo tỷ lệ chuẩn, tuyệt đối không bị cắt xén.
   Màu sắc: Xanh lục bảo, Kem ngà, Trắng tinh khiết & Vàng kim.
   ========================================================= */

/* 1. Reset Global Page Scroll & Spacing */
.about-page {
  background-color: #f6faf7;
  font-family: var(--font-family);
  color: var(--text-dark);
}

/* Đồng bộ khung container rộng rãi thoáng đãng như các trang con khác, tránh bị ép chật */
.about-page .container {
  max-width: min(1500px, calc(100% - 96px)) !important;
}

/* Breadcrumb sang trọng */
.modern-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 24px; /* Tăng margin cho thoáng */
  position: relative;
  z-index: 10;
}

.modern-breadcrumb a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.modern-breadcrumb a:hover {
  color: var(--accent-color) !important;
}

.modern-breadcrumb span {
  color: var(--accent-color) !important;
  font-weight: 700;
}

.modern-breadcrumb i {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Common Section Titles - Tighter and Cleaner */
.about-section-title {
  color: var(--primary-color) !important;
  font-size: clamp(24px, 2.5vw, 32px) !important; /* Tăng kích thước tiêu đề cho thoáng đãng, sang trọng */
  font-weight: 850 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 14px; /* Tăng font size phụ đề */
  max-width: 680px; /* Nới rộng phụ đề */
  margin: 0 auto 24px;
}

/* 2. HERO SECTION - ĐỒNG BỘ TUYỆT ĐỐI VỚI CÁC TRANG CON KHÁC */
.about-hero {
  position: relative;
  background:
    radial-gradient(circle at 86% 16%, rgba(216, 182, 91, 0.25), transparent 25%),
    linear-gradient(108deg, #063829 0%, #07533b 56%, #f5faf6 56.2%, #fffdf8 100%); /* Thay bằng mã màu xanh lục bảo đồng bộ */
  padding: 38px 0 52px; /* Đồng bộ padding dày dặn, sang trọng */
  border-bottom: 1px solid rgba(7, 68, 47, 0.12);
  color: #ffffff !important;
  overflow: hidden;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr;
  gap: 40px; /* Tăng gap cho thông thoáng */
  align-items: center;
  position: relative;
  z-index: 5;
}

.about-hero-text {
  text-align: left;
}

.about-hero .page-eyebrow {
  color: var(--accent-color) !important;
  font-size: 13px; /* Tăng size eyebrow */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}

.about-hero-text h1 {
  color: #ffffff !important;
  font-size: clamp(36px, 5vw, 58px) !important; /* Đồng bộ font chữ siêu to, đẳng cấp */
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
  text-transform: uppercase;
}

.about-hero-text p {
  font-size: 15px !important; /* Tăng kích cỡ chữ rõ nét hơn */
  line-height: 1.8 !important; /* Tăng line-height cho cực kỳ dễ đọc */
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 24px !important;
  max-width: 720px;
}

.about-hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.about-hero-actions .btn {
  padding: 10px 22px; /* Tăng size button */
  font-size: 13px;
  font-weight: 850;
  border-radius: 99px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.about-hero-actions .btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #032118 !important;
  box-shadow: 0 6px 16px rgba(217, 185, 111, 0.2) !important;
}

.about-hero-actions .btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translateY(-2px);
}

.about-hero-actions .btn-outline {
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
}

.about-hero-actions .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}

/* Khung video Hero thu nhỏ gọn gàng - Đẩy sang phải tránh che vùng nền xanh */
.about-hero-visual {
  display: flex;
  justify-content: flex-end; /* Đẩy video sát về phía phải của cột */
  padding-left: 24px; /* Tạo khoảng đệm trái, tránh video đè lên đường chéo xanh */
}

.about-hero-video-frame {
  position: relative;
  width: 100%;
  max-width: 520px; /* Nới rộng kích thước video khung Hero để cân xứng tuyệt đối với giao diện rộng */
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(3, 33, 24, 0.15);
  border: 2.5px solid var(--accent-color);
  background: #032118;
}

.about-hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-video-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(5, 52, 38, 0.9);
  backdrop-filter: blur(4px);
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(217, 185, 111, 0.25);
  z-index: 10;
}

/* 3. STORY SECTION - CÂU CHUYỆN & CHỈ SỐ */
.about-story-section {
  padding: 32px 0 40px; /* Siêu gọn gàng để dễ dàng nằm trọn trong 1 màn hình */
  background: linear-gradient(180deg, #fdfbfa 0%, #ffffff 50%, #f6faf7 100%);
}

/* Cột ảnh trái co giãn đúng chiều cao cột nội dung bên phải */
.about-story-section .col-lg-6:first-child {
  display: flex;
  flex-direction: column;
}

.about-story-visual {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: flex-end; /* Đẩy sát lưới ảnh về bên phải, gần cột chữ hơn */
  align-items: stretch; /* Kéo giãn lưới ảnh lấp đầy toàn bộ chiều cao cột */
  flex: 1; /* Chiếm hết chiều cao còn lại của cột trái */
  min-height: 0;
}

/* Lưới 2 ảnh tự giãn theo chiều cao cột nội dung bên phải */
.about-story-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr; /* 1 hàng tự động co giãn đầy chiều cao */
  gap: 20px;
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  height: 100%; /* Lấp đầy chiều cao của .about-story-visual */
}

/* Khung card ảnh tự giãn bằng chiều cao cột chữ bên phải - không cố định height */
.about-story-img-wrap {
  position: relative;
  height: 100%; /* Lấp đầy ô grid theo chiều dọc */
  min-height: 260px; /* Chiều cao tối thiểu để không bị xẹp khi màn hình nhỏ */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(5, 52, 38, 0.08);
  border: 2px solid rgba(217, 185, 111, 0.35);
  background: #ffffff;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.about-story-gallery .about-story-img-wrap {
  transform: none !important;
}

.about-story-img-wrap img {
  width: 100%;
  flex: 1; /* Chiếm hết phần còn lại sau khi nhãn chữ chiếm chỗ */
  min-height: 0;
  object-fit: fill; /* Hiển thị 100% ảnh, kéo giãn tự nhiên theo tỷ lệ khung */
  display: block;
  transition: transform 0.5s ease;
}

/* Hiệu ứng di chuột tinh tế */
.about-story-img-wrap:hover {
  transform: translateY(-6px) !important; /* Bay bổng hơn khi di chuột */
  border-color: #d9b96f;
  box-shadow: 0 20px 48px rgba(5, 52, 38, 0.18);
}

.about-story-img-wrap:hover img {
  transform: scale(1.05); /* Phóng đại nhẹ mượt mà */
}

/* Nhãn chữ hiển thị đè đè bán trong suốt phủ mờ cực kỳ cao cấp đè lên ảnh */
.about-story-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(5, 52, 38, 0.85); /* Nền xanh lục bảo bán trong suốt */
  backdrop-filter: blur(8px); /* Phủ mờ kính gương cao cấp (Glassmorphism) */
  -webkit-backdrop-filter: blur(8px);
  color: #e3c27a; /* Màu vàng kim thương hiệu sáng rõ */
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  border-top: 1px solid rgba(217, 185, 111, 0.25);
  z-index: 5;
  box-sizing: border-box;
}

/* Bỏ các lớp trang trí phụ */
.about-story-img-wrap::before,
.about-story-img-wrap::after {
  display: none;
}

.about-story-content {
  padding-left: 0; /* Sát lại gần ảnh hơn, không padding thừa */
}

.about-story-desc {
  font-size: 15.5px; /* Tăng cỡ chữ thân rõ ràng hơn */
  line-height: 1.75;
  color: #4e5552;
  margin-bottom: 14px;
}

/* Lưới Stats siêu gọn, hiện đại & cực kỳ nổi bật */
.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.about-stat-box {
  background: #ffffff;
  border: 1px solid rgba(5, 52, 38, 0.08);
  border-left: 3.5px solid var(--accent-color); /* Thanh vàng kim sang trọng bên trái */
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(5, 52, 38, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(5, 52, 38, 0.08);
  border-left-color: var(--primary-color); /* Chuyển sang xanh lục bảo khi hover */
  border-color: rgba(217, 185, 111, 0.3) rgba(217, 185, 111, 0.3) rgba(217, 185, 111, 0.3) var(--primary-color);
}

.about-stat-box .stat-num {
  font-size: 24px;
  font-weight: 850;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.about-stat-box .stat-num::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color); /* Chấm vàng tròn tinh tế */
}

.about-stat-box .stat-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #07442f;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.about-stat-box .stat-desc {
  font-size: 10.5px;
  color: #6a7c73;
  margin: 0;
  line-height: 1.35;
}

/* 4. VIDEO SHOWCASE SECTION - TRÌNH PHÁT GỌN GÀNG */
.about-video-section {
  padding: 54px 0 68px; /* Tăng padding đồng bộ các trang khác */
  background: #041e17;
  color: #ffffff;
  border-bottom: 1.5px solid rgba(217, 185, 111, 0.15);
}

.about-video-section .about-section-title {
  color: #ffffff !important;
}

.about-video-section .section-subtitle {
  color: rgba(255, 255, 255, 0.72);
}

/* Khống chế Video Player Showcase rộng rãi, tinh tế */
.about-video-showcase-row {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.about-video-player-container {
  background: #000000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--accent-color);
  position: relative;
  width: 100%;
}

.about-video-player-container video {
  width: 100%;
  max-height: 440px; /* Tăng chiều cao để phát video dọc hay ngang đều vô cùng cân đối */
  background: #000;
  object-fit: contain; /* Đảm bảo KHÔNG bị crop mất góc video */
  display: block;
}

.about-player-info-bar {
  background: linear-gradient(180deg, #053426 0%, #032118 100%);
  padding: 16px 20px;
  border-top: 1px solid rgba(217, 185, 111, 0.15);
  text-align: left;
}

.about-player-info-bar h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-color);
  margin-bottom: 6px;
  text-align: left;
}

.about-player-info-bar p {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  text-align: left;
}

/* Container danh sách phát cột dọc nằm bên phải */
.about-video-playlist-container {
  background: rgba(5, 52, 38, 0.4);
  border: 1px solid rgba(217, 185, 111, 0.15);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.about-playlist-title {
  font-size: 14px;
  font-weight: 750;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  display: flex;
  align-items: center;
}

.about-video-playlist-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

/* Thẻ item danh sách phát dạng HÀNG NGANG nằm trong cột dọc */
.about-video-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px;
  width: 100%;
  text-align: left;
}

.about-video-thumbnail {
  width: 84px;
  aspect-ratio: 16 / 10;
  background: #032118;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
}

.about-video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.about-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.about-video-card:hover {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.08);
}

.about-video-card:hover .about-video-play-btn {
  background: var(--accent-color);
  color: #ffffff;
  transform: translate(-50%, -50%) scale(1.05);
}

.about-video-card.is-active {
  border-color: var(--accent-color);
  background: rgba(217, 185, 111, 0.12);
}

.about-video-card.is-active .about-video-play-btn {
  background: var(--accent-color);
  color: #ffffff;
}

.about-video-info {
  background: transparent !important;
  padding: 0 !important;
  flex-grow: 1;
  min-height: auto !important;
  display: block !important;
}

.about-video-info h5 {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.45;
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5. COMMITMENTS SECTION - CAM KẾT CAO CẤP CHUẨN LUXURY */
.about-values-section {
  padding: 92px 0 104px;
  background:
    radial-gradient(circle at 14% 22%, rgba(217, 185, 111, .18), transparent 28%),
    radial-gradient(circle at 86% 68%, rgba(7, 68, 47, .08), transparent 30%),
    linear-gradient(180deg, #f9f8f3 0%, #fffdfa 54%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.about-values-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(7, 68, 47, .14), rgba(217, 185, 111, .34), transparent);
}

.about-values-section .about-section-title {
  font-size: clamp(34px, 3vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
}

.about-values-section > .container > p {
  max-width: 720px !important;
  color: #52625c !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 46px;
}

.about-value-card {
  min-height: 338px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,243,.92));
  border: 1px solid rgba(7, 68, 47, .13);
  border-bottom: 2px solid rgba(217, 185, 111, .48);
  border-radius: 14px;
  padding: 34px 28px 30px;
  box-shadow:
    0 24px 54px rgba(7, 68, 47, .09),
    0 1px 0 rgba(255,255,255,.85) inset;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #064c37 0%, #d7b45d 100%);
  opacity: .98;
}

.about-value-card::after {
  content: var(--card-num);
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 900;
  color: rgba(194, 151, 61, .22);
  line-height: 1;
  pointer-events: none;
  transition: color .28s ease, transform .28s ease;
}

.about-value-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(145deg, #042f22, #075b42);
  border: 1px solid rgba(217, 185, 111, .9);
  color: #f6d983;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 28px;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease;
  box-shadow:
    0 18px 36px rgba(5, 52, 38, .2),
    0 0 0 8px rgba(7, 68, 47, .055);
}

.about-value-card h3 {
  font-size: 18px;
  font-weight: 900;
  color: #063f2e;
  margin-bottom: 16px;
  letter-spacing: 0;
  line-height: 1.25;
}

.about-value-card p {
  font-size: 14px;
  line-height: 1.72;
  color: #465650;
  margin: 0;
}

/* Hover Commitments */
.about-value-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 32px 72px rgba(5, 52, 38, .14),
    0 1px 0 rgba(255,255,255,.9) inset;
  border-color: rgba(217, 185, 111, .58);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.about-value-card:hover::after {
  color: rgba(194, 151, 61, .34);
  transform: scale(1.05);
}

.about-value-card:hover .about-value-icon {
  background: linear-gradient(145deg, #f7dc8d 0%, #c89a3d 100%);
  color: #063f2e;
  border-color: rgba(7, 68, 47, .16);
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 22px 42px rgba(160, 119, 43, .25),
    0 0 0 9px rgba(217, 185, 111, .12);
}

/* 6. SHOWROOM GALLERY - SIÊU NHỎ GỌN */
.about-gallery-section {
  display: none;
}



/* =========================================================
   7. RESPONSIVE FOR TABLET & MOBILE SCREENS
   ========================================================= */
@media (max-width: 1199.98px) {
  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    gap: 20px;
  }
}

@media (max-width: 991.98px) {
  .about-hero {
    padding: 30px 0;
    background:
      radial-gradient(circle at 92% 8%, rgba(216, 182, 91, 0.18), transparent 34%),
      linear-gradient(135deg, #053324 0%, #07533b 100%);
  }
  
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .about-hero-text {
    text-align: left;
  }

  .about-hero-text h1,
  .about-hero-text p {
    max-width: 720px;
  }

  .about-hero-actions {
    justify-content: flex-start;
  }

  .about-story-visual {
    margin-bottom: 15px;
    justify-content: center; /* Trả về căn giữa trên tablet và di động */
  }

  .about-story-gallery {
    margin: 0 auto; /* Căn giữa lưới ảnh trên màn hình nhỏ */
  }

  .about-story-content {
    padding-left: 0;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .about-page .container {
    max-width: 100% !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  .modern-breadcrumb {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .about-section-title {
    font-size: 22px !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }

  .about-hero {
    padding: 22px 0 24px;
  }

  .about-hero-grid {
    gap: 14px;
  }

  .about-hero .page-eyebrow {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .about-hero-text h1 {
    font-size: 27px !important;
    line-height: 1.08 !important;
    margin-bottom: 10px !important;
  }

  .about-hero-text p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  .about-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .about-hero-actions .btn {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
  }

  .about-hero-visual {
    padding-left: 0;
    justify-content: center;
  }

  .about-hero-video-frame {
    max-width: 250px;
    border-radius: 10px;
  }

  .about-video-badge {
    display: none;
  }

  .about-story-section {
    padding: 22px 0 28px;
  }

  .about-story-section .row {
    --bs-gutter-y: .75rem;
  }

  .about-story-visual {
    margin-bottom: 8px;
  }

  .about-story-gallery {
    gap: 10px;
    max-width: 310px;
  }

  .about-story-img-wrap {
    min-height: 150px;
    border-radius: 12px;
  }

  .about-story-img-label {
    min-height: 48px;
    padding: 7px 6px;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  .about-story-content {
    text-align: left;
  }

  .about-story-content .eyebrow {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    text-align: center;
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .about-story-content .about-section-title {
    text-align: center;
  }

  .about-story-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  .about-story-desc + .about-story-desc {
    display: none;
  }

  .about-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  .about-stat-box {
    padding: 10px 9px;
    border-radius: 9px;
  }

  .about-stat-box .stat-num {
    font-size: 22px;
    justify-content: center;
  }

  .about-stat-box .stat-label {
    font-size: 9.5px;
    line-height: 1.25;
    text-align: center;
  }

  .about-stat-box .stat-desc {
    font-size: 9.5px;
    line-height: 1.3;
    text-align: center;
  }

  .about-video-section {
    padding: 26px 0 32px;
  }

  .about-video-section .section-subtitle {
    display: none;
  }

  .about-video-showcase-row {
    margin-top: 16px;
    --bs-gutter-y: 1rem;
  }

  .about-video-player-container {
    border-radius: 10px;
  }

  .about-video-player-container video {
    max-height: 260px;
  }

  .about-player-info-bar {
    padding: 12px;
  }

  .about-player-info-bar h4 {
    font-size: 13px;
    margin: 0;
  }

  .about-player-info-bar p {
    display: none;
  }

  .about-video-playlist-container {
    padding: 12px;
    border-radius: 10px;
  }

  .about-playlist-title {
    font-size: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .about-video-playlist-items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 42%);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .about-video-playlist-items::-webkit-scrollbar {
    display: none;
  }

  .about-video-card {
    flex-direction: column !important;
    align-items: stretch;
    gap: 7px;
    padding: 8px;
  }

  .about-video-thumbnail {
    width: 100%;
  }

  .about-video-info h5 {
    font-size: 10.5px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .about-values-section {
    padding: 30px 0 36px;
  }

  .about-values-section > .container > p {
    display: none;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    gap: 10px;
    padding: 0;
    margin-top: 16px;
  }

  .about-value-card {
    border-radius: 12px;
    padding: 20px 10px 14px;
  }

  .about-value-card::after {
    top: 8px;
    right: 10px;
    font-size: 22px;
  }

  .about-value-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .about-value-card h3 {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 7px;
  }

  .about-value-card p {
    font-size: 10.5px;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

@media (max-width: 575.98px) {
  .about-values-section {
    padding: 42px 0 52px !important;
  }

  .about-values-section .about-section-title {
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }

  .about-values-section > .container > p {
    display: block !important;
    max-width: 92% !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .about-value-card {
    min-height: 226px !important;
    padding: 20px 13px 17px !important;
    border-radius: 10px !important;
  }

  .about-value-card::after {
    top: 10px !important;
    right: 12px !important;
    font-size: 24px !important;
  }

  .about-value-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
  }

  .about-value-card h3 {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .about-value-card p {
    color: #465650 !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Match home-page quality strip, refined for the about page. */
.about-values-section {
  padding: 72px 0 84px !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(205, 170, 95, .12), transparent 26%),
    linear-gradient(180deg, #f8f6ee 0%, #fffdf8 48%, #ffffff 100%) !important;
}

.about-values-section .about-section-title {
  color: #10211a !important;
  font-size: clamp(34px, 3.1vw, 48px) !important;
  font-weight: 900 !important;
  margin-bottom: 14px !important;
}

.about-values-section > .container > p {
  color: #66756f !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.about-values-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 1360px !important;
  margin-top: 44px !important;
  padding: 34px 30px !important;
  background: rgba(255, 252, 245, .88) !important;
  border: 1px solid rgba(157, 123, 47, .14) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 54px rgba(92, 72, 35, .07) !important;
  backdrop-filter: blur(10px);
}

.about-value-card {
  min-height: 178px !important;
  padding: 14px 30px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.about-value-card:not(:last-child) {
  border-right: 1px solid rgba(92, 72, 35, .12) !important;
}

.about-value-card::before,
.about-value-card::after {
  display: none !important;
}

.about-value-icon {
  width: auto !important;
  height: auto !important;
  margin: 0 auto 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #b79a55 !important;
  font-size: 30px !important;
}

.about-value-card h3 {
  color: #13231d !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.about-value-card p {
  color: #66756f !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  text-align: center !important;
  max-width: 250px;
  margin: 0 auto !important;
}

.about-value-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: rgba(92, 72, 35, .12) !important;
}

.about-value-card:hover .about-value-icon {
  transform: translateY(-2px) scale(1.05) !important;
  color: #07442f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 24px !important;
  }

  .about-value-card {
    padding: 22px 18px !important;
  }

  .about-value-card:not(:last-child) {
    border-right: 0 !important;
  }

  .about-value-card:nth-child(odd) {
    border-right: 1px solid rgba(92, 72, 35, .12) !important;
  }

  .about-value-card:nth-child(-n+2) {
    border-bottom: 1px solid rgba(92, 72, 35, .12) !important;
  }
}

@media (max-width: 575.98px) {
  .about-values-section {
    padding: 42px 0 50px !important;
  }

  .about-values-section .about-section-title {
    font-size: 27px !important;
  }

  .about-values-grid {
    margin-top: 24px !important;
    padding: 18px 12px !important;
    border-radius: 14px !important;
  }

  .about-value-card {
    min-height: 174px !important;
    padding: 18px 10px !important;
  }

  .about-value-icon {
    font-size: 25px !important;
    margin-bottom: 12px !important;
  }

  .about-value-card h3 {
    font-size: 13px !important;
  }

  .about-value-card p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    display: block !important;
    overflow: visible !important;
  }
}