/* ==========================================================================
   About Us about.css
   Replicated from Figma "About Us" (624:2150 desktop / 624:3257 mobile)
   ========================================================================== */

/* ====================== Hero ====================== */
.about-hero {
  position: relative;
  overflow: hidden;
  background: #101010 url('../img/about/about-hero-bg.webp') center / cover no-repeat;
  padding: 113px 0 127px;
  text-align: center;
  color: #fff;
}
.about-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18,18,18,0.85) 0%, rgba(16,16,16,0.22) 52%, rgba(0,0,0,0.88) 110%);
}
.about-hero-content {
  position: relative; z-index: 2;
  width: min(1138px, 100% - 48px); margin-inline: auto;
}
.about-hero-title {
  font-weight: 900; font-size: 56px; line-height: 1.1; letter-spacing: 1px;
}
.about-hero-panel {
  background: rgba(123,123,123,0.3);
  border-radius: var(--r-card);
  margin-top: 72px;
  padding: 56px 64px 48px;
}
.about-hero-desc {
  font-size: 20px; color: var(--t-lighter); line-height: 1.55; text-align: center;
}
.about-hero-stats {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  margin-top: 72px;
}
.about-hero-stats .stat { text-align: center; }
.about-hero-stats .num { font-weight: 900; font-size: 42px; color: var(--orange); line-height: 1; }
.about-hero-stats .label { font-size: 16px; color: var(--t-light); margin-top: 22px; }

/* ====================== Our Story ====================== */
.sec-story { background: var(--bg-page); padding: 141px 0 127px; }
.story-grid {
  display: grid; grid-template-columns: 1fr 512px; gap: 84px; align-items: center;
}
.story-title {
  display: flex; align-items: center; gap: 20px;
  font-weight: 700; font-size: 36px; color: #111; line-height: 1;
}
.story-bar { width: 6px; height: 32px; background: var(--orange); flex-shrink: 0; }
.story-text { font-size: 20px; color: var(--t-600); line-height: 1.6; margin-top: 56px; }
.story-image { height: 341px; border-radius: var(--r-card); overflow: hidden; }
.story-image img { width: 100%; height: 100%; object-fit: cover; }

/* ====================== Our Value Proposition ====================== */
.sec-value {
  position: relative;
  background:
    linear-gradient(rgba(23,23,23,0.8), rgba(23,23,23,0.8)),
    #161616 url('../img/about/about-value-bg.webp') center / cover no-repeat;
  padding: 116px 0 96px;
}
.value-head { text-align: left; }
.value-title { font-weight: 900; font-size: 36px; color: #fff; line-height: 1.2; letter-spacing: .5px; }
.value-sub { font-size: 16px; color: #cfcfcf; margin-top: 16px; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 68px;
}
.value-card {
  background: rgba(123,123,123,0.3);
  border-radius: var(--r-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 37px 37px;
}
.value-icon { width: 112px; height: 94px; display: flex; align-items: center; justify-content: center; }
.value-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.value-body { width: 100%; }
.value-name {font-weight: 900;font-size: 24px;color: #fff;margin-top: 32px;}
.value-desc {font-size: 16px;color: #787a80;line-height: 1.55;margin-top: 17px;}

/* ====================== FAQ ====================== */
.sec-faq {background: var(--bg-page);padding: 125px 0 122px;}
.sec-faq .section-title { color: #111; }
.faq-list { display: flex; flex-direction: column; gap: 20px; margin-top: 56px; }
.faq-item {
  background: #fff; border-radius: var(--r-sm);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 33px 0 25px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.faq-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.faq-q { font-weight: 700; font-size: 20px; color: var(--t-600); line-height: 1.45; }
.faq-arrow {
  width: 24px; height: 14px; margin-left: auto; flex-shrink: 0;
  background: var(--orange);
  -webkit-mask: url('../img/about/about-chevron.svg') center / contain no-repeat;
  mask: url('../img/about/about-chevron.svg') center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform .2s ease;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .24s ease;
}
.faq-a p {
  padding: 0 33px 24px 54px;
  color: var(--t-600);
  font-size: 16px;
  line-height: 1.75;
}
.faq-item.open .faq-arrow {
  transform: rotate(0deg);
}
.faq-item.open .faq-a {
  max-height: 260px;
}
.faq-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 258px;
  margin: 77px auto 0;
  padding: 0;
  height: 72px;
  border-radius: 66px;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: transparent;
  font-size: 20px;
  transition: all .18s ease;
}
.faq-more:hover { background: var(--orange); color: #fff; }

/* ====================== CTA ====================== */
.sec-cta {
  position: relative; overflow: hidden;
  background: #f6f6f6 url('../img/about/about-cta-bg.webp') center / cover no-repeat;
  padding: 148px 0 161px;
}
.cta-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(186,194,208,0.2);
}
.sec-cta .container { position: relative; z-index: 2; }
.cta-inner { text-align: center; }
.cta-title { font-weight: 900; font-size: 36px; color: #111; line-height: 1.2; letter-spacing: .5px; }
.cta-sub {font-size: 20px;color: var(--t-600);margin-top: 26px;}
.cta-actions {display: flex;justify-content: center;gap: 32px;margin-top: 67px;}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 260px; height: 68px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 20px; transition: all .18s ease;
}
.cta-btn.solid { background: var(--orange); color: #fff; }
.cta-btn.solid:hover { filter: brightness(1.06); }
.cta-btn.outline { border: 1px solid var(--orange); color: var(--orange); }
.cta-btn.outline:hover { background: var(--orange); color: #fff; }

/* ==========================================================================
   Responsive — mobile (<1080) — matches Figma mobile 624:3257
   ========================================================================== */
@media (max-width: 1080px) {
  /* Hero */
  /* Bottom padding = gap between panel and stats area clamp(20,12vw,56) + 110px (stats area height approx 60 + bottom buffer approx 50);
     reserves space for the absolutely-positioned, non-height-stretching .about-hero-stats, otherwise it would be clipped by overflow:hidden.
     Use calc instead of scaling up with vw, so the bottom buffer stays stable across devices and does not leave a large blank area on wide screens */
  .about-hero {height: 100%;padding: clamp(42px, 11.3vw, 122px) 0 calc(clamp(20px, 12vw, 56px) + 110px);}
  .about-hero-content { width: 100%; height: 100%; }
  .about-hero-title {width: calc(100% - 30px);margin-inline: auto;font-size: clamp(19px, 5.19vw, 56px);line-height: 1.25;}
  .about-hero-panel {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: clamp(42px, 11.2vw, 121px) clamp(14px, 3.7vw, 40px) 0;
    padding: clamp(36px, 9.63vw, 104px) clamp(27px, 7.22vw, 78px) clamp(36px, 9.63vw, 104px) clamp(17px, 4.63vw, 50px);
    border-radius: clamp(8px, 2.22vw, 24px);
  }
  .about-hero-desc {font-size: clamp(10px, 2.59vw, 28px);line-height: 1.45;}
  /* Figma: number 72px / label 24px (approx 3:1) — number should be noticeably larger than label */
  /* Anchored to the bottom of hero-content (including the panel) plus a margin-top gap, adapting to the panel height,
     replacing the hardcoded top:264px (which overlapped the panel on wide screens and misaligned on narrow ones) */
  .about-hero-stats {
    position: absolute;
    left: clamp(12px, 3.24vw, 35px);
    right: clamp(27px, 7.22vw, 78px);
    top: 100%;
    margin-top: clamp(20px, 12vw, 56px);
    gap: clamp(12px, 3.24vw, 35px);
  }
  .about-hero-stats .stat {flex: 1;min-width: 0;height: 100%;}
  .about-hero-stats .num { font-size: 24px; }
  .about-hero-stats .label {font-size: 9px;margin-top: clamp(12px, 3.24vw, 35px);line-height: 1.25;}

  /* Our Story: centered title, stacked image and text */
  .sec-story {padding: clamp(39px, 10.37vw, 112px) 0 clamp(36px, 9.72vw, 105px);}
  .story-grid {grid-template-columns: 1fr;gap: 24px;margin: auto clamp(14px, 3.7vw, 40px);}
  .story-title {justify-content: center;font-size: clamp(19px, 5.19vw, 56px);}
  .story-bar { display: none; }
  /* Figma mobile body text centered (text-center) */
  .story-text {font-size: clamp(11px, 2.96vw, 32px);line-height: 1.6;margin-top: clamp(17px, 4.44vw, 48px);text-align: center;}
  .story-image { height: auto; aspect-ratio: 1000 / 603; border-radius: 8px; }

  /* Value Proposition: centered title, single-column cards, icon on the left */
  .sec-value {padding: clamp(50px, 13.33vw, 144px) 0 clamp(36px, 9.72vw, 105px);}
  .value-head { text-align: center; }
  .value-title {font-size: clamp(19px, 5.19vw, 56px);}
  .value-sub {font-size: clamp(10px, 2.59vw, 28px);margin-top: clamp(8px, 2.13vw, 23px);}
  .value-grid {grid-template-columns: 1fr;gap: clamp(14px, 3.7vw, 40px);margin-top: clamp(27px, 7.13vw, 77px);}
  .value-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    height: auto;
    padding: clamp(19px, 5.19vw, 56px) clamp(24px, 6.3vw, 68px) clamp(19px, 5.19vw, 56px) clamp(19px, 5vw, 54px);
    gap: clamp(16px, 4.26vw, 46px);
    border-radius: 8px;
    /* Figma mobile card is darker: rgba(74,74,74,0.5) */
    background: rgba(74, 74, 74, 0.5);
  }
  .value-icon { width: 68px; height: 58px; flex-shrink: 0; }
  .value-card .value-body { flex: 1; min-width: 0; }
  .value-name { font-size: 17px; margin-top: 0; }
  .value-desc {font-size: clamp(10px, 2.59vw, 28px);margin-top: clamp(10px, 2.59vw, 28px);line-height: 1.45;}

  /* FAQ */
  .sec-faq {padding: clamp(54px, 14.44vw, 156px) 0 clamp(46px, 12.22vw, 132px);}
  /* Mobile title centered, font size aligned with other sections (left-aligned on desktop) */
  .sec-faq .section-title { text-align: center; font-size: clamp(19px, 5.19vw, 56px); }
  .faq-list {gap: clamp(10px, 2.78vw, 30px);margin-top: clamp(28px, 7.59vw, 82px);}
  .faq-item {height: auto;padding: 0;}
  .faq-question {
    min-height: 39px;
    padding: 0 20px 0 18px;
    gap: clamp(6px, 1.57vw, 17px);
  }
  .faq-dot { width: 10px; height: 10px; }
  .faq-q {font-size: clamp(13px, 3.33vw, 36px);}
  .faq-arrow { width: 19px; height: 11px; }
  .faq-a p {
    padding: 0 20px 16px 44px;
    font-size: clamp(12px, 3.1vw, 15px);
    line-height: 1.65;
  }
  .faq-more {width: clamp(132px, 35.19vw, 380px);height: clamp(38px, 10vw, 108px);font-size: clamp(13px, 3.33vw, 36px);margin-top: clamp(37px, 9.81vw, 106px);padding: 0;}

  /* CTA */
  .sec-cta {padding: clamp(36px, 9.54vw, 103px) 0;}
  .cta-overlay { background: rgba(204,214,226,0.28); }
  .cta-title {font-size: clamp(19px, 5.19vw, 56px);}
  .cta-sub {font-size: clamp(10px, 2.59vw, 28px);margin-top: clamp(10px, 2.78vw, 30px);line-height: 1.5;}
  .cta-actions {gap: clamp(9px, 2.5vw, 27px);margin-top: clamp(34px, 8.98vw, 97px);}
  .cta-btn {width: clamp(106px, 28.33vw, 306px);flex: 0 0 clamp(106px, 28.33vw, 306px);max-width: none;height: clamp(35px, 9.44vw, 102px);font-size: clamp(10px, 2.59vw, 28px);}
}

@media (max-width: 560px) {
  .about-hero-stats .num {font-size: clamp(25px, 6.67vw, 72px);}
  .about-hero-stats .label {font-size: clamp(8px, 2.22vw, 24px);}
  .value-name {font-size: clamp(13px, 3.33vw, 36px);}
}