/* ===== About Page ===== */

.about-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

/* Shared section heading bits (reused across About sections) */
.section-eyebrow {
   display: inline-block;
   color: #C9A84C;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.section-heading {
   font-family: 'Playfair Display', Georgia, serif;
   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 700;
   line-height: 1.15;
   color: #FFFFFF;
   margin: 0 0 16px;
}
.section-heading--mb0 { margin-bottom: 0; }
.section-heading--mb40 { margin-bottom: 40px; }
.section-heading-accent { color: #C9A84C; }
.section-divider {
   width: 48px;
   height: 3px;
   background: #C9A84C;
   border-radius: 2px;
   margin: 8px 0;
}
.section-header-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 56px;
   gap: 32px;
   flex-wrap: wrap;
}
.section-header-desc {
   font-size: 16px;
   color: #999999;
   line-height: 1.8;
   max-width: 360px;
   margin: 0;
}

/* ── Section 1: Our Story ── */
.about-section-story {
   background: #111111;
   padding: 96px 0;
}
.about-hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
}
.about-image-wrap { position: relative; }
.about-image-frame {
   aspect-ratio: 3/4;
   border-radius: 12px;
   border: 1px solid rgba(201,168,76,0.2);
   overflow: hidden;
}
.about-image-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
}
.about-float-card {
   position: absolute;
   bottom: -24px;
   right: -24px;
   background: #C9A84C;
   color: #0A0A0A;
   border-radius: 12px;
   padding: 24px;
   box-shadow: 0 16px 48px rgba(0,0,0,0.5);
   min-width: 180px;
}
.about-float-year { font-size: 36px; font-weight: 800; line-height: 1; }
.about-float-caption {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
}
.about-est-tag {
   position: absolute;
   top: 24px;
   left: 16px;
   background: #1F1F1F;
   border: 1px solid rgba(201,168,76,0.2);
   color: #C9A84C;
   padding: 10px 16px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
}
.about-content-col {
   display: flex;
   flex-direction: column;
   gap: 24px;
}
.about-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 8px;
}
.about-chip {
   border: 1px solid rgba(201,168,76,0.2);
   color: #C9A84C;
   padding: 8px 18px;
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   background: rgba(201,168,76,0.08);
}
.about-btn-gold {
   display: inline-block;
   background: #C9A84C;
   color: #0A0A0A;
   padding: 14px 32px;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 700;
   text-decoration: none;
   letter-spacing: 0.5px;
   transition: background 0.2s;
}
.about-btn-gold:hover { background: #E2C170; }

/* ── Section 2: Why Choose Us ── */
.about-section-why {
   background: #0A0A0A;
   padding: 96px 0;
}
.why-cards-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2px;
   border: 1px solid rgba(201,168,76,0.2);
   border-radius: 16px;
   overflow: hidden;
}
.why-card {
   background: #181818;
   padding: 36px 28px;
   transition: background 0.3s;
   cursor: default;
}
.why-card:hover { background: #1F1F1F; }
.why-card-icon {
   width: 52px;
   height: 52px;
   border-radius: 10px;
   background: rgba(201,168,76,0.08);
   border: 1px solid rgba(201,168,76,0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 20px;
}
.why-card-title {
   font-size: 16px;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 10px;
}
.why-card-desc {
   font-size: 14px;
   color: #999999;
   line-height: 1.7;
}

/* ── Section 3: Mission & Services ── */
.about-section-mission {
   background: #111111;
   padding: 96px 0;
}
.mission-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
}
.mission-sticky {
   position: sticky;
   top: 100px;
}

.mission-tab {
   border: 1px solid transparent;
   border-radius: 10px;
   padding: 24px 28px;
   cursor: pointer;
   margin-bottom: 4px;
   transition: all 0.25s;
}
.mission-tab.active {
   background: #1F1F1F;
   border-color: rgba(201,168,76,0.2);
}
.mission-tab-num {
   font-size: 11px;
   color: #C9A84C;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 8px;
}
.mtab-title {
   font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 10px;
}
.mission-tab.active .mtab-title { color: #C9A84C; }
.mission-tab-body {
   font-size: 14px;
   color: #999999;
   line-height: 1.8;
   display: none;
}
.mission-tab-body.open { display: block; }

.mission-quote-card {
   background: #1F1F1F;
   border: 1px solid rgba(201,168,76,0.2);
   border-radius: 16px;
   padding: 40px;
   margin-bottom: 20px;
}
.mission-quote-mark {
   font-family: 'Playfair Display', Georgia, serif;
   font-size: 80px;
   font-weight: 700;
   color: rgba(201,168,76,0.15);
   line-height: 1;
   margin-bottom: -16px;
}
.mission-quote-text {
   font-family: 'Playfair Display', Georgia, serif;
   font-size: 22px;
   color: #FFFFFF;
   line-height: 1.5;
   font-style: italic;
   margin-bottom: 20px;
}
.mission-quote-desc {
   font-size: 15px;
   color: #999999;
   line-height: 1.8;
   margin-bottom: 24px;
}
.mission-quote-author { font-size: 14px; color: #CCCCCC; }
.mission-quote-author-name { color: #E2C170; }

.mission-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}
.mission-stat {
   background: #1F1F1F;
   border: 1px solid rgba(201,168,76,0.2);
   border-radius: 10px;
   padding: 20px;
   text-align: center;
}
.mission-stat-num {
   font-family: 'Playfair Display', Georgia, serif;
   font-size: 28px;
   color: #C9A84C;
   font-weight: 700;
}
.mission-stat-label {
   font-size: 11px;
   color: #999999;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
}

/* ── Section 4: Client Reviews ── */
.about-section-reviews {
   background: #111111;
   padding: 96px 0;
}
.reviews-rating { text-align: right; }
.reviews-rating-num {
   font-family: 'Playfair Display', Georgia, serif;
   font-size: 48px;
   font-weight: 800;
   color: #C9A84C;
   line-height: 1;
}
.reviews-rating-sub {
   font-size: 13px;
   color: #999999;
   margin-top: 4px;
}

.reviews-viewport {
   overflow: hidden;
   position: relative;
   width: 100%;
}
@media (max-width: 767px) {
   .reviews-viewport { touch-action: pan-y; }
}
.reviews-track {
   display: flex;
   gap: 20px;
   transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
   will-change: transform;
}
.rev-card {
   background: #1F1F1F;
   border: 1px solid rgba(201,168,76,0.2);
   border-radius: 12px;
   padding: 32px;
   flex-shrink: 0;
   transition: border-color 0.3s;
   box-sizing: border-box;
}
.rev-card:hover { border-color: #C9A84C; }
.rev-stars {
   color: #C9A84C;
   font-size: 16px;
   letter-spacing: 2px;
   margin-bottom: 16px;
}
.rev-quote {
   font-size: 15px;
   color: #CCCCCC;
   line-height: 1.8;
   font-style: italic;
   margin-bottom: 24px;
}
.rev-footer {
   display: flex;
   align-items: center;
   gap: 14px;
}
.rev-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: rgba(201,168,76,0.1);
   border: 1px solid rgba(201,168,76,0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: #C9A84C;
   font-size: 16px;
   flex-shrink: 0;
}
.rev-name { font-weight: 700; color: #FFFFFF; font-size: 15px; }
.rev-role {
   font-size: 11px;
   color: #C9A84C;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 2px;
}

.reviews-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 28px;
   flex-wrap: wrap;
}
.reviews-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(201,168,76,0.25);
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
}
.reviews-dot.active {
   background: #C9A84C;
   width: 24px;
   border-radius: 4px;
}

/* ── Our Clients ── */
.about-clients-accent { color: #b90808; }
.about-client-figure { border: 1px solid #000; }

/* ── Get In Touch (office info) ── */
.about-office-label { color: #f1c40f; }
.about-office-address-text { font-size: 17px; }

/* ── Responsive ── */
@media (max-width: 991px) {
   .why-cards-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 767px) {
   .about-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
   }
   .about-float-card {
      bottom: -16px;
      right: 12px;
      min-width: 140px;
      padding: 16px;
   }
   .about-float-year { font-size: 28px; }

   .why-cards-grid {
      grid-template-columns: 1fr 1fr;
   }

   .mission-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }
   .mission-sticky {
      position: static;
   }
}

@media (max-width: 480px) {
   .why-cards-grid {
      grid-template-columns: 1fr;
   }
}