/* ============================================================
   ABOUT US — Page-Specific Styles
   Royal Technologies
   Only styles that don't exist in style.css / mobile-styles.css
   ============================================================ */

/* ============================================================
   1. ABOUT HERO
   ============================================================ */
.about-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  min-height: 680px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.about-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 73%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
  pointer-events: none;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 2;
}

.about-hero__content {
  padding: 100px 0 80px;
}

.about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(237, 46, 114, 0.08);
  border: 1px solid rgba(237, 46, 114, 0.2);
  border-radius: var(--radius-tag);
  padding: 6px 16px;
  margin-bottom: 24px;
}

.about-hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}

.about-hero__eyebrow-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-hero__headline {
  font-size: 62px;
  line-height: 1.08;
  color: #222836;
  margin-bottom: 22px;
}

.about-hero__headline .light {
  font-family: var(--font-body);
  font-weight: 400;
}

.about-hero__headline .bold {
  font-family: var(--font-bold);
  font-weight: 700;
}

.about-hero__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 520px;
}

/* Right Visual */
.about-hero__visual {
  position: relative;
  width: 100%;
  height: 640px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-hero__deco--rect {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 120px;
  background: linear-gradient(100deg, #009fed 0%, #ed2e72 100%);
  opacity: 1;
  box-shadow: inset 0 0 8px 5px #ffffff;
  top: 120px;
  left: 50%;
  transform: translateX(-50%) rotate(12deg);
  z-index: 0;
}

.about-hero__deco--cube1 {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, #009fed, #1561ed);
  bottom: 220px;
  right: 30px;
  transform: rotate(20deg);
  z-index: 3;
}

.about-hero__deco--cube2 {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff891d, #ce0aff);
  top: 110px;
  left: 40px;
  transform: rotate(-15deg);
  z-index: 3;
}

.about-hero__deco--cube3 {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(180deg, #60d769, #009fed);
  top: 220px;
  right: 60px;
  transform: rotate(30deg);
  z-index: 3;
}

.about-hero__person {
  position: relative;
  width: 380px;
  top: -50px;
  animation: slideInRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.about-hero__person img {
  width: 100%;
  display: block;
}

/* White bottom fade */
.about-hero__person::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(
    to top,
    #f8faff 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* Stat cards floating in hero */
.about-hero__stat {
  position: absolute;
  background: var(--white);
  border-radius: 20px;
  padding: 14px 20px;
  box-shadow: 0 20px 50px rgba(45, 83, 219, 0.14);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-hero__stat--1 {
  bottom: 300px;
  left: -10px;
}

.about-hero__stat--2 {
  bottom: 140px;
  right: -10px;
}

.about-hero__stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-hero__stat-icon--pink {
  background: linear-gradient(135deg, #ed2e72, #ff7eb3);
}

.about-hero__stat-icon--blue {
  background: linear-gradient(135deg, #1561ed, #009fed);
}

.about-hero__stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-hero__stat-body {}

.about-hero__stat-num {
  font-family: var(--font-bold);
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.about-hero__stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================================
   2. WHO WE ARE
   ============================================================ */
.who {
  background: var(--bg);
  padding: 100px 0;
  margin-top: 0;
}

.who__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.who__visual {
  position: relative;
}

.who__img-wrap {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 500px;
}

.who__img-wrap img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
  display: block;
}

/* Decorative badge overlapping the image */
.who__img-badge {
  position: absolute;
  bottom: 130px;
  right: 30px;
  background: var(--white);
  border-radius: 24px;
  padding: 18px 22px;
  box-shadow: 0 20px 50px rgba(19, 42, 97, 0.14);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.who__img-badge-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ed2e72, #ff7eb3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.who__img-badge-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.who__img-badge-text {}

.who__img-badge-num {
  font-family: var(--font-bold);
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.who__img-badge-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Floating accent blob behind image */
.who__img-blob {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(0, 159, 237, 0.15), rgba(237, 46, 114, 0.12));
  top: 70px;
  left: 30px;
  z-index: 0;
  pointer-events: none;
}

.who__content {}

.who__label {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 4px;
}

.who__title {
  font-family: var(--font-bold);
  font-size: 48px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 28px;
  line-height: 1.1;
}

.who__para {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.who__para:last-of-type {
  margin-bottom: 0;
}

/* ============================================================
   3. EXPERIENCE & EXPERTISE
   ============================================================ */
.expertise {
  background: url('../images/hero2-background.png') center center / cover no-repeat;
  position: relative;
  padding: 100px 0;
  margin-top: 0;
}

.expertise__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.expertise__header {
  margin-bottom: 52px;
}

.expertise__label {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 4px;
}

.expertise__title {
  font-family: var(--font-bold);
  font-size: 48px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
}

.expertise__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 640px;
}

.expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Expertise cards reuse .why__card structure but have their own extended content */
.exp-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 60px rgba(19, 42, 97, 0.16);
}

.exp-card__icon {
  background: var(--gradient-icon);
  border-radius: 15px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12.4px rgba(0, 0, 0, 0.11);
}

.exp-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exp-card__title {
  font-family: var(--font-bold);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}

.exp-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ============================================================
   4. GROWTH PHILOSOPHY — STEPS
   ============================================================ */
.philosophy {
  background: var(--bg);
  padding: 100px 0;
}

.philosophy__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.philosophy__header {
  text-align: center;
  margin-bottom: 60px;
}

.philosophy__label {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 4px;
}

.philosophy__title {
  font-family: var(--font-bold);
  font-size: 48px;
  font-weight: 700;
  color: var(--black);
}

.philosophy__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 60px rgba(19, 42, 97, 0.14);
}

/* Gradient step cards alternate */
.step-card--grad {
  background: linear-gradient(135deg, #1561ed 0%, #009fed 100%);
}

.step-card__num {
  font-family: var(--font-bold);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(229, 229, 229, 1) 0%, rgba(249, 249, 249, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.step-card--grad .step-card__num {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.step-card__title {
  font-family: var(--font-bold);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 10px;
  line-height: 1.3;
}

.step-card--grad .step-card__title {
  color: var(--white);
}

.step-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.step-card--grad .step-card__desc {
  color: rgba(255, 255, 255, 0.82);
}

/* Decorative circle in corner */
.step-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  bottom: -30px;
  right: -30px;
  pointer-events: none;
}

.step-card--grad::after {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   5. WHY TRUST US
   ============================================================ */
.trust {
  background: var(--bg);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.trust::before {
  content: '';
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%) rotate(-20deg);
  width: 500px;
  height: 500px;
  border-radius: 140px;
  background: var(--gradient-brand);
  opacity: 0.07;
  filter: blur(40px);
  pointer-events: none;
}

.trust__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 1;
}

.trust__content {}

.trust__label {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 4px;
}

.trust__title {
  font-family: var(--font-bold);
  font-size: 48px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
  line-height: 1.1;
}

.trust__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 36px;
}

.trust__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.trust__item:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 40px rgba(19, 42, 97, 0.12);
}

.trust__item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trust__item-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust__item-body {}

.trust__item-title {
  font-family: var(--font-bold);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}

.trust__item-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Right visual — stacked metric cards */
.trust__visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trust__metric {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust__metric:hover {
  transform: translateY(-4px);
}

.trust__metric--grad {
  background: linear-gradient(135deg, #ed2e72, #009fed);
}

.trust__metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust__metric-icon--light {
  background: linear-gradient(135deg, rgba(237, 46, 114, 0.1), rgba(0, 159, 237, 0.1));
}

.trust__metric-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust__metric-icon--light svg {
  stroke: var(--pink);
}

.trust__metric-body {}

.trust__metric-num {
  font-family: var(--font-bold);
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.trust__metric--light .trust__metric-num {
  color: var(--black);
}

.trust__metric-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

.trust__metric--light .trust__metric-label {
  color: var(--text-muted);
}

/* ============================================================
   6. COMMITMENT
   ============================================================ */
.commitment {
  background: url('../images/hero2-background.png') center center / cover no-repeat;
  position: relative;
  padding: 100px 0;
}

.commitment__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.commitment__header {
  text-align: center;
  margin-bottom: 52px;
}

.commitment__label {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 4px;
}

.commitment__title {
  font-family: var(--font-bold);
  font-size: 48px;
  font-weight: 700;
  color: var(--black);
}

.commitment__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.commit-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  display: flex;
  gap: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.commit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 60px rgba(19, 42, 97, 0.14);
}

/* Full-width accent card */
.commit-card--accent {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #0f153c 0%, #1561ed 100%);
  align-items: center;
}

.commit-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--gradient-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.commit-card--accent .commit-card__icon {
  background: rgba(255, 255, 255, 0.15);
}

.commit-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.commit-card__body {}

.commit-card__title {
  font-family: var(--font-bold);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
  line-height: 1.3;
}

.commit-card--accent .commit-card__title {
  color: var(--white);
  font-size: 22px;
}

.commit-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.commit-card--accent .commit-card__desc {
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   7. FINAL CTA
   ============================================================ */
.about-cta {
  background: var(--bg);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.about-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(105deg);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: var(--gradient-brand);
  opacity: 0.09;
  filter: blur(60px);
  pointer-events: none;
}

.about-cta__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-cta__card {
  background: var(--white);
  border-radius: 40px;
  padding: 64px 56px;
  box-shadow: 0 4px 80px rgba(19, 42, 97, 0.12);
  position: relative;
  overflow: hidden;
}

/* Top gradient bar */
.about-cta__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #ed2e72, #009fed);
}

.about-cta__label {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--accent-blue);
  font-weight: 400;
  margin-bottom: 16px;
}

.about-cta__headline {
  font-family: var(--font-bold);
  font-size: 40px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 20px;
}

.about-cta__subtext {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.about-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE ANIMATIONS
   ============================================================ */
.about-hero__deco--rect {
  animation: floatRectAbout 7s ease-in-out infinite;
}

@keyframes floatRectAbout {
  0%, 100% { transform: translateX(-50%) rotate(12deg) translateY(0); }
  50%       { transform: translateX(-50%) rotate(12deg) translateY(-12px); }
}

.about-hero__deco--cube1 {
  animation: floatCube1About 5.5s ease-in-out infinite;
}

@keyframes floatCube1About {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50%       { transform: rotate(20deg) translateY(-10px); }
}

.about-hero__deco--cube2 {
  animation: floatCube2About 4.8s ease-in-out 0.4s infinite;
}

@keyframes floatCube2About {
  0%, 100% { transform: rotate(-15deg) translateY(0); }
  50%       { transform: rotate(-15deg) translateY(-8px); }
}

.about-hero__deco--cube3 {
  animation: floatCube3About 6s ease-in-out 1s infinite;
}

@keyframes floatCube3About {
  0%, 100% { transform: rotate(30deg) translateY(0); }
  50%       { transform: rotate(30deg) translateY(-6px); }
}

.about-hero__stat--1 {
  animation:
    slideInLeftAbout 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both,
    bobLeftAbout 4s ease-in-out 1.7s infinite;
}

.about-hero__stat--2 {
  animation:
    slideInRightAbout 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both,
    bobRightAbout 4.5s ease-in-out 1.8s infinite;
}

@keyframes slideInLeftAbout {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRightAbout {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes bobLeftAbout {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

@keyframes bobRightAbout {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ============================================================
   SECTION SEAMLESS JOINS — Remove gaps between sections 1–3
   ============================================================ */

/* Hero bottom edge flush */
.about-hero {
  padding-bottom: 0;
}

.about-hero__content {
  padding-bottom: 80px; /* keep internal spacing */
}

/* Who We Are — no top gap, flush against hero */
.who {
  padding-top: 0;
}

/* Expertise — no top gap, flush against who section */
.expertise {
  padding-top: 0;
}

/* Preserve bottom padding on who so content doesn't feel cramped */
.who {
  padding-bottom: 80px;
}

/* ============================================================
   RESPONSIVE — TABLET (769–1100px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {

  .about-hero__inner {
    grid-template-columns: 1fr;
    padding: 0 40px 60px;
  }

  .about-hero__content {
    padding: 80px 0 40px;
  }

  .about-hero__headline {
    font-size: 48px;
  }

  .about-hero__visual {
    display: none;
  }

  .who__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .who__img-wrap {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .who__title,
  .expertise__title,
  .philosophy__title,
  .trust__title,
  .commitment__title {
    font-size: 38px;
  }

  .expertise__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .philosophy__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .commitment__grid {
    grid-template-columns: 1fr;
  }

  .commit-card--accent {
    grid-column: 1 / -1;
  }

  .about-cta__headline {
    font-size: 32px;
  }

  .about-cta__card {
    padding: 48px 36px;
  }

}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Hero ─────────────────────────────────────────── */
  .about-hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .about-hero__inner {
    grid-template-columns: 1fr;
    padding: 0 20px 0;
    gap: 0;
  }

  .about-hero__content {
    padding: 80px 0 24px;
  }

  .about-hero__headline {
    font-size: 32px;
    line-height: 1.15;
  }

  .about-hero__desc {
    font-size: 15px;
    max-width: 100%;
  }

  /* Show hero visual on mobile — simplified layout */
  .about-hero__visual {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 320px;
    position: relative;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
  }

  /* Scale down decorative rect for mobile */
  .about-hero__deco--rect {
    width: 260px;
    height: 260px;
    border-radius: 80px;
    top: 40px;
  }

  /* Hide small cubes on mobile to reduce clutter */
  .about-hero__deco--cube1,
  .about-hero__deco--cube2,
  .about-hero__deco--cube3 {
    display: none;
  }

  /* Person image — centered, fits mobile width */
  .about-hero__person {
    width: 80%;
    max-width: 300px;
    top: 0;
    position: relative;
    z-index: 2;
  }

  /* Stat cards repositioned for mobile */
  .about-hero__stat {
    padding: 10px 14px;
    border-radius: 14px;
    gap: 8px;
  }

  .about-hero__stat--1 {
    bottom: 100px;
    left: 4px;
  }

  .about-hero__stat--2 {
    bottom: 20px;
    right: 4px;
  }

  .about-hero__stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .about-hero__stat-icon svg {
    width: 16px;
    height: 16px;
  }

  .about-hero__stat-num {
    font-size: 16px;
  }

  .about-hero__stat-label {
    font-size: 10px;
  }

  /* ── Who We Are ───────────────────────────────────── */
  .who {
    padding: 48px 0 60px;
  }

  .who__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }

  /* Image container — fixed height, no overflow */
  .who__img-wrap {
    max-width: 100%;
    width: 100%;
    aspect-ratio: unset;
    height: 280px;
    border-radius: 24px;
    overflow: hidden;
  }

  .who__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* Badge repositioned to not overflow */
  .who__img-badge {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    border-radius: 16px;
  }

  .who__img-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .who__img-badge-icon svg {
    width: 18px;
    height: 18px;
  }

  .who__img-badge-num {
    font-size: 18px;
  }

  .who__img-badge-sub {
    font-size: 11px;
  }

  /* Blob — scale down so it doesn't overflow */
  .who__img-blob {
    width: 180px;
    height: 180px;
    top: 40px;
    left: 10px;
  }

  .who__title {
    font-size: 28px;
  }

  .who__label {
    font-size: 18px;
  }

  /* ── Expertise ────────────────────────────────────── */
  .expertise {
    padding: 60px 0;
  }

  .expertise__inner {
    padding: 0 20px;
  }

  .expertise__title {
    font-size: 28px;
  }

  .expertise__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Philosophy ───────────────────────────────────── */
  .philosophy {
    padding: 60px 0;
  }

  .philosophy__inner {
    padding: 0 20px;
  }

  .philosophy__title {
    font-size: 28px;
  }

  .philosophy__steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .step-card {
    padding: 24px 20px;
  }

  .step-card__num {
    font-size: 48px;
  }

  /* ── Trust ────────────────────────────────────────── */
  .trust {
    padding: 60px 0;
  }

  .trust__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  .trust__title {
    font-size: 28px;
  }

  .trust__visual {
    gap: 12px;
  }

  /* ── Commitment ───────────────────────────────────── */
  .commitment {
    padding: 60px 0;
  }

  .commitment__inner {
    padding: 0 20px;
  }

  .commitment__title {
    font-size: 28px;
  }

  .commitment__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .commit-card {
    padding: 24px 20px;
  }

  .commit-card--accent {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 14px;
  }

  /* ── CTA ──────────────────────────────────────────── */
  .about-cta {
    padding: 60px 0;
  }

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

  .about-cta__card {
    padding: 40px 24px;
    border-radius: 24px;
  }

  .about-cta__headline {
    font-size: 26px;
  }

  .about-cta__subtext {
    font-size: 14px;
    margin-bottom: 28px;
  }

  .about-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

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

}