/* ============================================================
   ABOUT.CSS
   "Built with Forward Thinking" — dark #111 rounded card,
   large 3D logo visual left, gradient intro + body text right.

   LAYOUT REFERENCE (Figma canvas: 1440px wide, ~756px tall)
   All horizontal positions are expressed as % of section width
   (px_value / 1440) so the layout scales with the viewport.
   All vertical positions use fixed px values from the Figma.
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION SHELL
   ------------------------------------------------------------ */
.about {
  position: relative;
  background: #111111;
  border-radius: 22.5px;
  overflow: hidden;
  height: 756px;          /* calculated: caption-bottom(719) + ~37px bottom pad */
  margin-top: var(--sp-4);
}


/* ------------------------------------------------------------
   2. BINARY TEXTURE  (far right, mix-blend-mode: difference)
   Figma inset: top -11.37%, right -32.55%, bottom -14.31%, left 54.61%
   ------------------------------------------------------------ */
.about__binary {
  position: absolute;
  top: -11.37%;
  right: -32.55%;
  bottom: -14.31%;
  left: 54.61%;
  mix-blend-mode: difference;
  opacity: 0.1;
  overflow: hidden;
  pointer-events: none;
}

.about__binary img {
  position: absolute;
  left: -7.7%;
  top: -8.05%;
  width: 113.87%;
  height: 113.87%;
  object-fit: cover;
  max-width: none;
}


/* ------------------------------------------------------------
   3. GLOW ELLIPSES  (decorative, behind the 3D logo)
   ------------------------------------------------------------ */
.about__glows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* All glow images share absolute positioning */
.about__glow {
  position: absolute;
  display: block;
  max-width: none;
}

/* Duplicate small glow — appears at two horizontal positions */
.about__glow--a {
  left: 158.88px;
  top: 173.47px;
  width: 282px;
  height: 282px;
}

.about__glow--b {
  left: 328.38px;
  top: 173.47px;
  width: 282px;
  height: 282px;
}

/* Large diffuse left glow */
.about__glow--lg {
  left: -48.88px;
  top: 293.47px;
  width: 549.75px;
  height: 442.5px;
}

/* Small accent glow (centre-left) */
.about__glow--xs {
  left: 500.88px;
  top: 360.97px;
  width: 177px;
  height: 177px;
}


/* ------------------------------------------------------------
   4. 3D LOGO IMAGE
   Figma: left 47.13px, top 103.72px, size 678.75px square.
   Horizontal: 47.13/1440 = 3.27%  |  width: 678.75/1440 = 47.14%
   ------------------------------------------------------------ */
.about__logo {
  position: absolute;
  left: 3.27%;
  top: 104px;
  width: 47.14%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}


/* ------------------------------------------------------------
   5. HEADING BLOCK  (top-left, above logo)
   Figma: left 187.5px (13.02%), top 75px
   ------------------------------------------------------------ */
.about__heading {
  position: absolute;
  left: 13.02%;
  top: 75px;
  color: #ffffff;
  z-index: 2;
}

.about__section-label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #ffffff;
}

.about__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -0.05em;    /* Figma: -2.25px at 45px */
  color: #ffffff;
}


/* ------------------------------------------------------------
   6. BRANDMARK CAPTION  (bottom-left, italic)
   Figma: left 194.88px (13.53%), top 660.97px, width 395.25px
   ------------------------------------------------------------ */
.about__caption {
  position: absolute;
  left: 13.53%;
  top: 661px;
  width: 27.45%;             /* 395.25/1440 */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 25.4px;
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}


/* ------------------------------------------------------------
   7. RIGHT TEXT COLUMN
   Figma: left 742.5px (51.56%), top 227.47px, width 393.75px (27.34%)
   ------------------------------------------------------------ */
.about__text {
  position: absolute;
  left: 51.56%;
  top: 227px;
  width: 27.34%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 2;
}

/* ── Gradient intro paragraph ─────────────────────────────── */
.about__intro {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 21px;
  line-height: 24px;
  /* Figma: linear-gradient(265.22deg, #919191 2.88%, #6099ed 54.33%, #ff4442 100%) */
  background: linear-gradient(
    265.22deg,
    #919191 2.88%,
    #6099ed 54.33%,
    #ff4442 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Body paragraphs ──────────────────────────────────────── */
.about__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
}

.about__body strong {
  font-weight: var(--fw-bold);
}

/* ── "Explore more" pill button ───────────────────────────── */
.about__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 37.5px;
  padding: 0 20px 0 14px;
  border: 0.75px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 1;
  color: #ffffff;
  transition:
    background var(--ease-default),
    border-color var(--ease-default);
}

.about__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
}

.about__btn-icon {
  width: 9.75px;
  height: 9.75px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);    /* Figma: -scale-y-100 */
}


/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */

/* Narrow desktop — scale text sizes down slightly */
@media (max-width: 1200px) {
  .about__intro {
    font-size: 18px;
  }

  .about__title {
    font-size: 38px;
    line-height: 46px;
  }
}

/* Tablet — switch to stacked layout */
@media (max-width: 1024px) {
  .about {
    height: auto;
    padding: 48px 40px 52px;
  }

  /* Hide glow ellipses on tablet (too offset at narrow widths) */
  .about__glows { display: none; }

  /* Logo — centred block above text */
  .about__logo {
    position: relative;
    left: auto;
    top: auto;
    width: 60%;
    max-width: 420px;
    margin: 0 auto 32px;
    display: block;
  }

  /* Heading and caption become in-flow */
  .about__heading,
  .about__caption,
  .about__text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .about__binary {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  /* Stack vertically */
  .about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about__caption {
    order: 10;      /* push below text on tablet */
    margin-top: 32px;
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .about {
    padding: 36px 24px 40px;
    border-radius: 16px;
  }

  .about__logo {
    width: 80%;
  }

  .about__title {
    font-size: 30px;
    line-height: 38px;
  }

  .about__intro {
    font-size: 16px;
  }

  .about__text {
    gap: 12px;
  }
}


/* ============================================================
   ABOUT PAGE (about.html)  — Figma nodes 3355-12545 onwards
   Sections:
     A. Page layout & header override
     B. Sodel Story        (3355-12545)
     C. Rahul's Section    (3431-9816)
     D. What We Believe    (3355-12591)
     E. Team + Team Card   (3355-12735)
     F. Responsive
   ============================================================ */


/* ------------------------------------------------------------
   A. PAGE LAYOUT & HEADER OVERRIDE
   ------------------------------------------------------------ */
body.page--about .site-header.is-scrolled {
  position: sticky;
  top: 0;
  animation: none;
  border-radius: var(--radius-md);   /* all 4 corners — Figma: rounded-[16px] */
}

body.page--about .site-header.is-scrolled.is-stuck {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.about-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 0;
}


/* ------------------------------------------------------------
   A2. TOP BANNER   Figma 3431-10470
   bg #1f1f1f  rounded-24px  pt-110 pb-124 pl-100
   Heading: "We Build What / Businesses Run On"
   60px Sora Regular, white, tracking -1.6px, line-height 70px
   Text constrained to left ~510px (pr-772 on 1380px frame)
   ------------------------------------------------------------ */
.about-banner {
  background: #1f1f1f;
  border-radius: var(--radius-lg);      /* 24px */
  padding: 110px 100px 124px;
  margin: 0 16px;                       /* slight side margins match other dark cards */
}

.about-banner__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -1.6px;
  color: #ffffff;
  max-width: 510px;                     /* matches left text area: 1380 - 100 - 772 = 508px */
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 1024px) {
  .about-banner {
    padding: 72px 64px 80px;
  }

  .about-banner__heading {
    font-size: 48px;
    line-height: 56px;
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .about-banner {
    padding: 56px 40px 64px;
    margin: 0 8px;
    border-radius: 16px;
  }

  .about-banner__heading {
    font-size: 38px;
    line-height: 46px;
    letter-spacing: -1.2px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .about-banner {
    padding: 48px 28px 56px;
  }

  .about-banner__heading {
    font-size: 32px;
    line-height: 40px;
  }
}


/* ------------------------------------------------------------
   B. SODEL STORY   Figma: flex gap-[90px] items-center pr-[24px]
      Left: image 640×473.73px rounded-25px + date tab
      Right: flex-1 / About Us / label + 54px heading + body 16px
   ------------------------------------------------------------ */
.about-story {
  background: var(--clr-page-bg);
}

.about-story__inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 80px 24px 80px 0;
  display: flex;
  gap: 90px;
  align-items: center;
}

.about-story__media {
  flex-shrink: 0;
}

.about-story__picture {
  position: relative;
  width: 640px;
  height: 474px;
  border-radius: 25px;
  overflow: hidden;
}

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

/* Date tab: #f1f2f4 pill, rounded top corners only, concave right wing */
.about-story__date-tab {
  position: absolute;
  bottom: 0;
  left: 27px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f1f2f4;
  border-radius: 25px 25px 0 0;
  padding: 9px 24px 3px;
  white-space: nowrap;
}

.about-story__date-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 20px;
  height: 40px;
  background: transparent;
  border-bottom-left-radius: 20px;
  box-shadow: 0 20px 0 0 #f1f2f4;
  pointer-events: none;
}

.about-story__date-text,
.about-story__date-sep,
.about-story__date-author {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: 30px;
  color: #9b9b9b;
}

.about-story__date-author {
  text-decoration: underline;
}

.about-story__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-story__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #111111;
}

.about-story__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 54px;
  line-height: 52.5px;
  letter-spacing: -2.25px;
  color: #111111;
  margin: 0;
}

.about-story__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}

.about-story__body p {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ------------------------------------------------------------
   C. RAHUL'S SECTION   Figma: flex items-center px-[40px]
      Left: text (flex-1)
      Right: image stack — red abstract bg + Rahul photo on top
   ------------------------------------------------------------ */
.about-rahul {
  background: var(--clr-page-bg);
  overflow: hidden;
}

/* Figma: pl-[40px], flex items-center, full width — image bleeds right */
.about-rahul__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 80px 0 80px 40px;   /* right=0 so image can reach the edge */
  display: flex;
  align-items: center;
}

.about-rahul__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 40px;         /* breathing room between text and image */
}

.about-rahul__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 54px;
  line-height: 70px;
  letter-spacing: -2px;
  color: #111111;
  margin: 0;
}

/* Details: gap-24px between meta group and quote */
.about-rahul__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Meta group: role + bio paragraphs, gap-16px (Figma 3431:9820) */
.about-rahul__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-rahul__role {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 30px;
  color: #333333;
  margin: 0;
  max-width: 320px;
}

.about-rahul__bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-rahul__bio p {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
  max-width: 518px;
}

.about-rahul__quote {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 30px;
  color: #e74154;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 518px;
}

/* Image composite: red pattern bg + Rahul PNG on top
   Figma 3487:6463 — w=820px h=754px */
.about-rahul__image-wrap {
  flex-shrink: 0;
  position: relative;
  width: 820px;
  height: 754px;
  overflow: hidden;
}

/* Background: red chevron pattern, fills container */
.about-rahul__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rahul photo PNG (transparent bg): Figma left=26px top=65px w=608px h=689px */
.about-rahul__photo {
  position: absolute;
  left: 26px;
  top: 65px;
  width: 608px;
  height: 689px;
  object-fit: contain;
  object-position: bottom center;
}


/* ------------------------------------------------------------
   D. WHAT WE BELIEVE   Figma: bg #1f1f1f rounded-24px px-73 py-98
      Left: w=458px heading + 420px desc
      Right: w=704px, 2×2 grid 340×202px cards bg #262626
   ------------------------------------------------------------ */
.about-believe {
  padding: 0 16px;
}

.about-believe__card {
  background: #1f1f1f;
  border-radius: var(--radius-lg);
  padding: 98px 73px;
  display: flex;
  gap: 70px;
  align-items: center;
}

.about-believe__left {
  flex-shrink: 0;
  width: 458px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.about-believe__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 54px;
  line-height: 52.5px;
  letter-spacing: -2.25px;
  color: #ffffff;
  margin: 0;
}

.about-believe__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 30px;
  color: #cbc4c4;
  margin: 0;
  width: 420px;
}

.about-believe__grid {
  /* Figma: shrink-0 w-[704px] — 2×340px cards + 24px gap */
  flex-shrink: 0;
  width: 704px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-content: flex-start;
  align-items: flex-start;
}

/* Individual belief card */
.believe-card {
  background: #262626;
  border-radius: var(--radius-lg);
  width: 340px;
  height: 202px;
  padding: 34px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.believe-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1.2px;
  color: #ffffff;
  margin: 0;
}

.believe-card__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 24px;
  color: #beb9b9;
  margin: 0;
}


/* ------------------------------------------------------------
   E. TEAM SECTION + TEAM CARD   Figma: px-[120px]
      Rows: 4-4-3 cards, gap=30px between cards
      Card: h=412px rounded-22px overflow-hidden
      Photo area: h=272px top  |  Arrow btn at bottom-127px
      Social list: slides up on hover inside photo area
   ------------------------------------------------------------ */
.about-team {
  background: var(--clr-page-bg);
  padding: 80px 0;
}

.about-team__inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 120px;
  display: flex;
  flex-direction: column;
  gap: 33px;
}

.about-team__header {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-team__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 28px;
  color: #111111;
  margin: 0;
}

.about-team__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -3px;
  color: #111111;
  margin: 0;
}

/* Rows of cards */
.about-team__row {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Third row: 3 cards — constrain so they don't stretch full width */
.about-team__row--3col {
  max-width: calc((100% - 60px) * 0.75 + 60px);
}

/* ── TEAM CARD ── */
.team-card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 412px;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

/* Narrow fixed-width variant — Figma: w=264px */
.team-card--narrow {
  flex: 0 0 264px;
}

/* Photo top section */
.team-card__photo-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 272px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}

.team-card__photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.team-card:hover .team-card__photo-area img {
  transform: scale(1.04);
}

/* Name — Figma: top=315px left=31px Sora 17.311px */
.team-card__name {
  position: absolute;
  top: 315px;
  left: 31px;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 17.3px;
  line-height: 26px;
  letter-spacing: -0.52px;
  color: #111111;
  margin: 0;
  white-space: nowrap;
}

/* Role — Figma: top=347px left=31px Manrope Medium 12.118px #9b9b9b */
.team-card__role {
  position: absolute;
  top: 347px;
  left: 31px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12.1px;
  line-height: 26px;
  color: #9b9b9b;
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.team-card__sep {
  color: #9b9b9b;
}

/* ── Arrow button pill ──
   White pill: left=39px width=57px height=50px, rounded top only
   Concave wings via ::before / ::after box-shadow trick
   Dark circle inside: 43px, centered, contains arrow icon
   ── */
.team-card__btn-area {
  position: absolute;
  bottom: 127px;
  left: 39px;
  width: 57px;
  height: 50px;
  background: #ffffff;
  border-radius: 43px 43px 0 0;
  pointer-events: none;
  z-index: 2;
}

.team-card__btn-area::before {     /* concave left wing */
  content: '';
  position: absolute;
  bottom: 11px;                    /* -2px nudge so curve aligns with photo-content boundary */
  right: 56px;                     /* Figma: 56.26px — 1px overlap prevents hairline gap */
  width: 17px;
  height: 35px;
  background: transparent;
  border-bottom-right-radius: 17px;
  box-shadow: 0 17px 0 0 #ffffff;
  pointer-events: none;
}

.team-card__btn-area::after {      /* concave right wing */
  content: '';
  position: absolute;
  bottom: 11px;                    /* -2px nudge so curve aligns with photo-content boundary */
  left: 56px;                      /* Figma: 56.26px — 1px overlap prevents hairline gap */
  width: 17px;
  height: 35px;
  background: transparent;
  border-bottom-left-radius: 17px;
  box-shadow: 0 17px 0 0 #ffffff;
  pointer-events: none;
}

.team-card__btn-circle {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 43px;
  height: 43px;
  background: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__arrow {
  width: 9.75px;
  height: 9.75px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);           /* Figma: -scale-y-100 */
}

/* ── Social icons sliding pill ──
   Container: positioned in photo area at top=157px, w=43px h=128px
   List inside starts hidden (top=128px) → slides to top=0 on hover
   ── */
.team-card__social {
  position: absolute;
  top: 157px;
  left: 46px;                      /* center on arrow button: 39 + 57/2 - 43/2 = 46 */
  width: 43px;
  height: 128px;
  border-radius: 22px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.team-card__social-list {
  position: absolute;
  top: 128px;                      /* hidden below container initially */
  left: 0;
  right: 0;
  height: 128px;
  background: #333333;
  border-radius: 22px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  transition: top var(--ease-smooth);
  pointer-events: auto;
}

.team-card__social-list li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ffffff;
  font-size: 10px;
  text-decoration: none;
  transition: opacity var(--ease-default);
}

.team-card__social-list a:hover {
  opacity: 0.7;
}

/* Slide up on card hover */
.team-card:hover .team-card__social-list {
  top: 0;
}

.team-card:hover .team-card__social {
  pointer-events: auto;
}


/* ------------------------------------------------------------
   F. RESPONSIVE — About page sections
   ------------------------------------------------------------ */

@media (max-width: 1240px) {
  .about-story__inner {
    gap: 60px;
  }

  .about-story__picture {
    width: 520px;
    height: 385px;
  }

  .about-rahul__image-wrap {
    width: 460px;
    height: 500px;
  }

  /* Scale photo: width 460/820 ≈ 0.56 */
  .about-rahul__image-wrap .about-rahul__photo {
    left: 15px;
    top: 36px;
    width: 341px;
    height: 387px;
  }

  .about-believe__card {
    padding: 72px 48px;
    gap: 48px;
  }

  .about-believe__left {
    width: 320px;
  }

  .about-believe__left .about-believe__desc {
    width: 100%;
  }

  .about-believe__grid {
    width: auto;
    flex: 1;
  }

  .believe-card {
    width: calc(50% - 12px);
    height: auto;
    min-height: 190px;
  }

  .about-team__inner {
    padding: 0 60px;
  }

  .about-team__heading {
    font-size: 50px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  .about-story__inner {
    flex-direction: column;
    padding: 60px 24px;
    gap: 40px;
  }

  .about-story__picture {
    width: 100%;
    height: 360px;
  }

  .about-rahul__inner {
    flex-direction: column-reverse;
    gap: 40px;
    padding: 60px 40px;   /* restore symmetric padding in stacked layout */
  }

  .about-rahul__text {
    padding-right: 0;
  }

  .about-rahul__image-wrap {
    width: 100%;
    max-width: 520px;
    height: 400px;
  }

  /* Scale photo: height 400/754 ≈ 0.53 */
  .about-rahul__image-wrap .about-rahul__photo {
    left: 14px;
    top: 35px;
    width: 323px;
    height: 366px;
  }

  .about-rahul__bio p,
  .about-rahul__quote {
    max-width: 100%;
  }

  .about-believe__card {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
  }

  .about-believe__left {
    width: 100%;
  }

  .about-believe__desc {
    width: 100%;
  }

  .about-believe__grid {
    width: 100%;
    justify-content: center;
  }

  .believe-card {
    width: calc(50% - 12px);
    height: auto;
    min-height: 180px;
  }

  .about-team__inner {
    padding: 0 40px;
  }

  .about-team__heading {
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -2px;
  }

  .about-team__row {
    flex-wrap: wrap;
  }

  .team-card,
  .team-card--narrow {
    flex: 0 0 calc(50% - 15px);
  }

  .about-team__row--3col {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .about-story__inner {
    padding: 48px 20px;
    gap: 32px;
  }

  .about-story__picture {
    height: 280px;
  }

  .about-story__heading {
    font-size: 40px;
    line-height: 44px;
  }

  .about-rahul__inner {
    padding: 48px 20px;
    gap: 32px;
  }

  .about-rahul__heading {
    font-size: 40px;
    line-height: 52px;
  }

  .about-rahul__image-wrap {
    height: 320px;
  }

  /* Scale photo: height 320/754 ≈ 0.42 */
  .about-rahul__image-wrap .about-rahul__photo {
    left: 11px;
    top: 28px;
    width: 258px;
    height: 292px;
  }

  .about-believe {
    padding: 0 8px;
  }

  .about-believe__card {
    padding: 48px 24px;
    border-radius: 16px;
  }

  .about-believe__heading {
    font-size: 38px;
    line-height: 44px;
  }

  .believe-card {
    width: 100%;
    height: auto;
    min-height: 160px;
  }

  .believe-card__title {
    font-size: 26px;
    line-height: 34px;
  }

  .about-team {
    padding: 48px 0;
  }

  .about-team__inner {
    padding: 0 20px;
  }

  .about-team__heading {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1.5px;
  }
}

@media (max-width: 480px) {
  .about-team__row {
    gap: 16px;
  }

  .team-card,
  .team-card--narrow {
    flex: 0 0 100%;
    height: 400px;
  }

  .about-team__row--3col {
    max-width: 100%;
  }

  .about-story__picture {
    height: 240px;
  }

  .about-rahul__image-wrap {
    height: 260px;
  }

  /* Scale photo: height 260/754 ≈ 0.345 */
  .about-rahul__image-wrap .about-rahul__photo {
    left: 9px;
    top: 22px;
    width: 210px;
    height: 238px;
  }
}