/* =========================================================
   ABOUT PAGE — PREMIUM IMAGE-LED REDESIGN
   Header, nav, hero framework and footer remain from site CSS.
   ========================================================= */

.about-section {
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 769px) {
  .about-section { padding: 90px 0; }
}

.about-hero .hero-image-placeholder img {
  object-position: 62% center;
  transform: scale(1.01);
}
.about-hero .hero-bg {
  background:
    radial-gradient(circle at 78% 34%, rgba(184,150,46,.18), transparent 26%),
    linear-gradient(90deg, rgba(6,14,30,.90) 0%, rgba(10,31,68,.78) 46%, rgba(10,31,68,.38) 100%);
}
.about-trust-strip { margin: 0; }

.about-section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.about-section-head .section-title { margin-bottom: 14px; }
.about-section-head .section-subtitle { margin: 0 auto; }

.about-showcase { background: var(--white); }
.about-showcase::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  background: linear-gradient(180deg, rgba(10,31,68,.045), transparent);
  pointer-events: none;
}
.about-showcase-grid,
.quality-premium-grid,
.services-gallery-grid {
  display: grid;
  gap: 42px;
  align-items: center;
}
@media (min-width: 920px) {
  .about-showcase-grid { grid-template-columns: minmax(0, .96fr) minmax(360px, 1.04fr); gap: 64px; }
  .quality-premium-grid { grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr); gap: 66px; }
  .services-gallery-grid { grid-template-columns: minmax(0, .8fr) minmax(380px, 1.2fr); gap: 58px; }
}

.about-lead,
.about-showcase-copy p,
.quality-copy p,
.services-gallery-copy p,
.integrity-premium-card p {
  color: var(--text-body);
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: 18px;
}
.about-lead {
  color: var(--text-dark);
  font-weight: 650;
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
}
.about-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.about-outline-dark { color: var(--navy) !important; border-color: rgba(10,31,68,.28) !important; }
.about-outline-dark:hover { color: var(--white) !important; background: var(--navy); border-color: var(--navy) !important; }

.about-feature-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
}
@media (min-width: 620px) { .about-feature-list { grid-template-columns: repeat(2, 1fr); } }
.about-feature-list div {
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f7f8fc);
  border: 1px solid rgba(10,31,68,.08);
  box-shadow: 0 18px 48px rgba(10,31,68,.08);
}
.about-feature-list strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.15rem; line-height: 1.2; margin-bottom: 8px; }
.about-feature-list span { color: var(--text-body); font-size: .95rem; line-height: 1.5; }

.about-image-stack {
  position: relative;
  min-height: 560px;
}
.about-main-photo {
  position: absolute;
  inset: 24px 18px 32px 0;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 38px 90px rgba(10,31,68,.24);
  border: 1px solid rgba(255,255,255,.75);
}
.about-main-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,31,68,.58));
}
.about-main-photo img,
.quality-photo img,
.team-premium-card img,
.mini-service-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-floating-card {
  position: absolute;
  z-index: 2;
  width: min(300px, 78%);
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 24px 70px rgba(10,31,68,.22);
  backdrop-filter: blur(16px);
}
.about-floating-card strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.35rem; margin-bottom: 8px; }
.about-floating-card span { color: var(--text-body); line-height: 1.5; font-weight: 650; }
.card-one { left: -18px; bottom: 52px; }
.card-two { right: -6px; top: 0; background: var(--navy); }
.card-two strong { color: var(--gold-light); }
.card-two span { color: rgba(255,255,255,.78); }

.about-marquee {
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  border-top: 4px solid var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.about-marquee-track {
  display: flex;
  width: max-content;
  gap: 34px;
  padding: 22px 0;
  animation: aboutMarquee 30s linear infinite;
}
.about-marquee-track span {
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  font-size: .88rem;
}
@keyframes aboutMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.about-mission { background: var(--off-white); }
.mvv-premium-grid { display: grid; gap: 24px; }
@media (min-width: 820px) { .mvv-premium-grid { grid-template-columns: repeat(3, 1fr); } }
.mvv-premium-card {
  position: relative;
  isolation: isolate;
  min-height: 390px;
  padding: clamp(30px, 4vw, 44px);
  border-radius: 32px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(10,31,68,.08);
  box-shadow: 0 28px 70px rgba(10,31,68,.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.mvv-premium-card:hover { transform: translateY(-10px); box-shadow: 0 38px 95px rgba(10,31,68,.16); }
.mvv-premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 100% 0, rgba(200,16,46,.16), transparent 34%), radial-gradient(circle at 0 100%, rgba(184,150,46,.16), transparent 36%);
}
.mvv-premium-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 22px;
  background: var(--navy);
  color: var(--gold-light);
  font-weight: 950;
  margin-bottom: 34px;
  box-shadow: 0 18px 46px rgba(10,31,68,.22);
}
.mvv-premium-card:nth-child(2) { background: var(--navy); color: var(--white); }
.mvv-premium-card:nth-child(2) span { background: var(--red); color: var(--white); }
.mvv-premium-card h3,
.quality-timeline h3,
.team-premium-card h3 {
  color: var(--navy);
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 2.5vw, 2.18rem);
  line-height: 1.08;
  margin-bottom: 14px;
}
.mvv-premium-card p { color: var(--text-body); font-size: 1.04rem; line-height: 1.75; margin: 0; }
.mvv-premium-card:nth-child(2) h3 { color: var(--white); }
.mvv-premium-card:nth-child(2) p { color: rgba(255,255,255,.76); }

.about-quality-premium { background: var(--white); }
.quality-image-collage {
  min-height: 580px;
  position: relative;
}
.quality-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 30px 82px rgba(10,31,68,.18);
  border: 1px solid rgba(255,255,255,.84);
}
.quality-photo-large { inset: 0 70px 80px 0; }
.quality-photo-small { right: 0; bottom: 0; width: 54%; height: 270px; border-radius: 28px; }
.quality-badge {
  position: absolute;
  left: 32px;
  bottom: 28px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 24px 70px rgba(200,16,46,.32);
  border: 8px solid var(--white);
}
.quality-badge strong { font-family: var(--font-head); font-size: 2.3rem; line-height: 1; }
.quality-badge span { font-weight: 850; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; }
.quality-timeline {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.quality-timeline div {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #f7f8fc);
  border: 1px solid rgba(10,31,68,.08);
  box-shadow: 0 16px 44px rgba(10,31,68,.07);
}
.quality-timeline b {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--navy);
  color: var(--gold-light);
}
.quality-timeline h3 { font-size: 1.2rem; margin-bottom: 4px; }
.quality-timeline p { margin: 0; font-size: .98rem; line-height: 1.55; }

.about-integrity-premium {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy) 58%, #16366f);
  color: var(--white);
}
.about-integrity-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 86% 18%, rgba(184,150,46,.28), transparent 30%), radial-gradient(circle at 12% 90%, rgba(200,16,46,.22), transparent 32%);
}
.integrity-premium-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
  align-items: center;
}
@media (min-width: 920px) { .integrity-premium-card { grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); } }
.integrity-premium-card .section-label { color: var(--gold-light); }
.integrity-premium-card .section-title,
.integrity-premium-card p { color: var(--white); }
.integrity-premium-card p { color: rgba(255,255,255,.78); margin-bottom: 0; }
.integrity-pill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.integrity-pill-grid span {
  min-height: 86px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: var(--white);
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.about-team-premium { background: var(--off-white); }
.team-premium-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .team-premium-grid { grid-template-columns: repeat(3, 1fr); } }
.team-premium-card {
  background: var(--white);
  border: 1px solid rgba(10,31,68,.08);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(10,31,68,.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-premium-card:hover { transform: translateY(-10px); box-shadow: 0 38px 95px rgba(10,31,68,.16); }
.team-premium-card img { height: 250px; }
.team-premium-card div { padding: 28px; }
.team-premium-card span {
  display: inline-block;
  color: var(--red);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  margin-bottom: 12px;
}
.team-premium-card h3 { font-size: 1.55rem; margin-bottom: 12px; }
.team-premium-card p { color: var(--text-body); font-size: 1rem; line-height: 1.7; margin: 0; }

.about-services-gallery { background: var(--white); }
.services-gallery-copy .btn-red { margin-top: 14px; }
.mini-service-grid { display: grid; gap: 18px; }
@media (min-width: 620px) { .mini-service-grid { grid-template-columns: repeat(2, 1fr); } }
.mini-service-grid a {
  min-height: 240px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 24px 68px rgba(10,31,68,.12);
  transform: translateZ(0);
}
.mini-service-grid a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,31,68,.04), rgba(10,31,68,.82));
}
.mini-service-grid img {
  position: absolute;
  inset: 0;
  transition: transform .5s ease;
}
.mini-service-grid a:hover img { transform: scale(1.08); }
.mini-service-grid strong {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.28rem;
  line-height: 1.15;
}

.about-final-cta { padding-top: 0; }
.about-final-cta .cta-banner-inner { overflow: hidden; }
.about-final-cta .cta-banner-inner::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(184,150,46,.18);
}

.about-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}
.about-reveal.about-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.about-reveal:nth-child(2) { transition-delay: 80ms; }
.about-reveal:nth-child(3) { transition-delay: 140ms; }

@media (max-width: 768px) {
  .about-section { padding: 58px 0; }
  .about-image-stack,
  .quality-image-collage { min-height: 430px; }
  .about-main-photo { inset: 0; }
  .about-floating-card { padding: 18px; border-radius: 20px; }
  .card-one { left: 14px; bottom: 18px; }
  .card-two { right: 14px; top: 18px; }
  .quality-photo-large { inset: 0 36px 92px 0; }
  .quality-photo-small { width: 62%; height: 200px; }
  .quality-badge { width: 126px; height: 126px; left: 12px; bottom: 18px; border-width: 6px; }
  .quality-badge strong { font-size: 1.7rem; }
  .integrity-pill-grid { grid-template-columns: 1fr; }
  .about-actions { flex-direction: column; }
  .about-actions a { justify-content: center; width: 100%; }
}
@media (max-width: 520px) {
  .about-image-stack,
  .quality-image-collage { min-height: 390px; }
  .about-floating-card { width: calc(100% - 28px); }
  .card-two { top: 14px; }
  .card-one { bottom: 14px; }
  .quality-timeline div { grid-template-columns: 1fr; }
  .quality-timeline b { margin-bottom: 12px; }
  .team-premium-card img { height: 210px; }
  .mini-service-grid a { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-reveal { opacity: 1; transform: none; transition: none; }
  .about-marquee-track { animation: none; }
  .mini-service-grid img { transition: none; }
}

/* =========================================================
   RESPONSIVE REFINEMENT — equal-height image/content sections
   Mobile-first optimization for About page
   ========================================================= */

.about-showcase-grid,
.quality-premium-grid {
  align-items: stretch;
}

.about-showcase-copy,
.quality-copy {
  position: relative;
  z-index: 2;
}

.about-image-stack,
.quality-image-collage {
  width: 100%;
}

@media (min-width: 921px) {
  .about-showcase-grid,
  .quality-premium-grid {
    align-items: stretch;
  }

  .about-showcase-copy,
  .quality-copy,
  .about-image-stack,
  .quality-image-collage {
    min-height: 100%;
  }

  .about-image-stack,
  .quality-image-collage {
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .about-main-photo {
    inset: 0 18px 0 0;
  }

  .card-one {
    bottom: 28px;
  }

  .quality-photo-large {
    inset: 0 70px 0 0;
  }

  .quality-photo-small {
    bottom: 24px;
  }

  .quality-badge {
    bottom: 32px;
  }
}

@media (max-width: 920px) {
  .about-showcase-grid,
  .quality-premium-grid,
  .services-gallery-grid {
    gap: 34px;
  }

  .about-section-head {
    margin-bottom: 34px;
  }

  .about-showcase-copy,
  .quality-copy,
  .services-gallery-copy {
    max-width: 100%;
  }

  .about-main-photo,
  .quality-photo {
    border-radius: 26px;
  }
}

@media (max-width: 640px) {
  .about-section {
    padding: 46px 0;
  }

  .about-section-head {
    text-align: left;
    margin-bottom: 28px;
  }

  .about-lead,
  .about-showcase-copy p,
  .quality-copy p,
  .services-gallery-copy p,
  .integrity-premium-card p {
    font-size: 1rem;
    line-height: 1.68;
  }

  .about-feature-list div,
  .quality-timeline div,
  .team-premium-card div {
    padding: 20px;
  }

  .mvv-premium-card {
    min-height: auto;
    padding: 28px 24px;
    border-radius: 26px;
  }

  .mvv-premium-card span {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    margin-bottom: 24px;
  }

  .integrity-pill-grid span {
    min-height: 70px;
  }

  .about-marquee-track {
    gap: 24px;
    padding: 16px 0;
  }
}

@media (max-width: 420px) {
  .about-image-stack,
  .quality-image-collage {
    min-height: 360px;
  }

  .about-floating-card {
    padding: 15px 16px;
  }

  .about-floating-card strong {
    font-size: 1.08rem;
  }

  .about-floating-card span {
    font-size: .9rem;
  }

  .quality-photo-small {
    height: 170px;
  }

  .quality-badge {
    width: 108px;
    height: 108px;
  }

  .quality-badge strong {
    font-size: 1.42rem;
  }

  .quality-badge span {
    font-size: .68rem;
  }
}

/* =========================================================
   FINAL MOBILE-FIRST ABOUT PAGE FIX
   This block intentionally overrides the earlier desktop-led
   collage rules so small screens get clean, readable layouts.
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.about-section,
.about-marquee,
.about-final-cta {
  max-width: 100%;
}

.about-section .container,
.about-marquee .container,
.about-final-cta .container {
  width: min(100% - 32px, var(--container));
}

.about-hero .hero-content {
  max-width: 100%;
}

.about-hero .hero-desc {
  margin-bottom: 48px !important;
}

@media (max-width: 920px) {
  .about-showcase-grid,
  .quality-premium-grid,
  .services-gallery-grid,
  .integrity-premium-card,
  .team-premium-grid,
  .mvv-premium-grid,
  .mini-service-grid {
    grid-template-columns: 1fr !important;
  }

  .about-showcase-grid,
  .quality-premium-grid,
  .services-gallery-grid,
  .integrity-premium-card {
    gap: 30px;
  }

  .quality-copy {
    order: 1;
  }

  .quality-image-collage {
    order: 2;
  }

  .about-section-head {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .about-section .container,
  .about-marquee .container,
  .about-final-cta .container {
    width: min(100% - 28px, var(--container));
  }

  .about-section {
    padding: 42px 0;
  }

  .about-showcase::before {
    height: 220px;
  }

  .about-hero {
    min-height: 650px;
  }

  .about-hero .hero-inner {
    min-height: 650px;
    padding-top: 120px;
    padding-bottom: 64px;
    align-items: flex-end;
  }

  

  .about-hero .hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-hero .hero-actions a,
  .about-actions a,
  .cta-banner-actions a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .service-trust-strip.about-trust-strip .container {
    width: 100%;
  }

  .service-trust-strip.about-trust-strip {
    padding-inline: 0;
  }

  .trust-strip-inner {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .trust-item {
    min-width: 78vw;
    scroll-snap-align: center;
  }

  .about-section-head {
    text-align: left;
    margin-bottom: 26px;
  }

  .about-section-head .section-subtitle,
  .about-section-head .section-title {
    margin-left: 0;
    margin-right: 0;
  }

  .about-section .section-title,
  .integrity-premium-card .section-title,
  .about-final-cta h2 {
    font-size: clamp(2rem, 9.5vw, 2.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em;
  }

  .section-label {
    font-size: .78rem;
  }

  .about-lead,
  .about-showcase-copy p,
  .quality-copy p,
  .services-gallery-copy p,
  .integrity-premium-card p {
    font-size: .98rem;
    line-height: 1.68;
  }

  .about-feature-list,
  .integrity-pill-grid,
  .mini-service-grid {
    grid-template-columns: 1fr !important;
  }

  .about-feature-list div,
  .quality-timeline div,
  .team-premium-card div,
  .integrity-pill-grid span {
    padding: 18px;
    border-radius: 20px;
  }

  .about-image-stack {
    min-height: 0 !important;
    display: grid;
    gap: 12px;
  }

  .about-main-photo {
    position: relative !important;
    inset: auto !important;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }

  .about-floating-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(10,31,68,.13);
    backdrop-filter: none;
  }

  .about-floating-card strong {
    font-size: 1.14rem;
  }

  .about-floating-card span {
    font-size: .93rem;
    line-height: 1.45;
  }

  .quality-image-collage {
    min-height: 0 !important;
    display: grid;
    gap: 12px;
  }

  .quality-photo {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }

  .quality-photo-small {
    aspect-ratio: 16 / 10;
  }

  .quality-badge {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 84px;
    border-radius: 22px;
    border: 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .quality-badge strong {
    font-size: 2rem;
  }

  .quality-badge span {
    max-width: 120px;
    font-size: .78rem;
    line-height: 1.25;
  }

  .quality-timeline {
    gap: 12px;
  }

  .quality-timeline div {
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
  }

  .quality-timeline b {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    margin: 0;
  }

  .quality-timeline h3 {
    font-size: 1.08rem;
    line-height: 1.2;
  }

  .quality-timeline p {
    font-size: .92rem;
    line-height: 1.5;
  }

  .mvv-premium-card {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .mvv-premium-card span {
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
  }

  .mvv-premium-card h3,
  .team-premium-card h3 {
    font-size: 1.45rem;
    line-height: 1.1;
  }

  .mvv-premium-card p,
  .team-premium-card p {
    font-size: .96rem;
    line-height: 1.62;
  }

  .integrity-premium-card {
    padding: 0;
  }

  .integrity-pill-grid span {
    min-height: auto;
    font-size: .98rem;
  }

  .team-premium-grid {
    gap: 18px;
  }

  .team-premium-card {
    border-radius: 24px;
  }

  .team-premium-card img {
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  .services-gallery-copy .btn-red {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .mini-service-grid {
    gap: 14px;
  }

  .mini-service-grid a {
    min-height: 170px;
    border-radius: 22px;
    padding: 18px;
  }

  .mini-service-grid strong {
    font-size: 1.12rem;
  }

  .about-final-cta .cta-banner-inner {
    padding: 32px 20px;
    border-radius: 24px;
  }

  .about-final-cta .cta-banner-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 12px;
  }

  .about-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 480px) {
  .about-section .container,
  .about-marquee .container,
  .about-final-cta .container {
    width: min(100% - 24px, var(--container));
  }

  .about-section {
    padding: 38px 0;
  }

  .about-hero,
  .about-hero .hero-inner {
    min-height: 620px;
  }

  .about-hero .hero-inner {
    padding-top: 110px;
    padding-bottom: 58px;
  }

  .about-hero h1 {
    font-size: clamp(2rem, 11.8vw, 2.75rem) !important;
  }

  .about-hero .hero-desc {
    font-size: .96rem;
    line-height: 1.58;
  }

  .trust-item {
    min-width: 86vw;
  }

  .about-section .section-title,
  .integrity-premium-card .section-title,
  .about-final-cta h2 {
    font-size: clamp(1.85rem, 9vw, 2.28rem) !important;
  }

  .about-feature-list div,
  .quality-timeline div,
  .team-premium-card div,
  .integrity-pill-grid span {
    padding: 16px;
  }

  .about-main-photo,
  .quality-photo {
    aspect-ratio: 1.12 / 1;
    border-radius: 20px;
  }

  .quality-photo-small {
    aspect-ratio: 1.35 / 1;
  }

  .quality-timeline div {
    grid-template-columns: 1fr;
  }

  .quality-timeline b {
    margin-bottom: 2px;
  }

  .about-marquee-track {
    animation-duration: 42s;
  }

  .about-marquee-track span {
    font-size: .76rem;
  }

  .mini-service-grid a {
    min-height: 158px;
  }
}

/* =========================================================
   FINAL REQUESTED FIX — Quality image consistency + mobile ribbon marquee
   ========================================================= */
@media (max-width: 768px) {
  .quality-image-collage {
    position: relative !important;
    display: block !important;
    min-height: clamp(360px, 92vw, 560px) !important;
    width: 100%;
  }

  .quality-photo {
    position: absolute !important;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 24px 62px rgba(10,31,68,.18);
  }

  .quality-photo-large {
    inset: 0 12% 14% 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: clamp(22px, 5vw, 34px) !important;
  }

  .quality-photo-small {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 54% !important;
    height: 46.5% !important;
    aspect-ratio: auto !important;
    border-radius: clamp(18px, 4vw, 28px) !important;
  }

  .quality-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .quality-badge {
    position: absolute !important;
    left: 5.5% !important;
    bottom: 4.8% !important;
    width: clamp(104px, 25vw, 150px) !important;
    height: clamp(104px, 25vw, 150px) !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: clamp(5px, 1.5vw, 8px) solid var(--white) !important;
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
    text-align: center !important;
  }

  .quality-badge strong {
    font-size: clamp(1.35rem, 5vw, 2.1rem) !important;
  }

  .quality-badge span {
    max-width: 96px;
    font-size: clamp(.62rem, 2vw, .82rem) !important;
    line-height: 1.15;
  }

  .about-marquee {
    border-top-width: 4px;
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .about-marquee-track {
    gap: 34px !important;
    padding: 6px 0 !important;
    min-height: 42px;
    align-items: center;
    animation-duration: 40s;
  }

  .about-marquee-track span {
    line-height: 1.15;
  }
}

@media (max-width: 420px) {
  .quality-image-collage {
    min-height: clamp(320px, 94vw, 390px) !important;
  }

  .about-marquee {
    min-height: 40px;
  }

  .about-marquee-track {
    padding: 5px 0 !important;
    min-height: 40px;
  }
}

@media (max-width: 768px) {
  .about-marquee {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .about-marquee-track {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
  }

  .about-marquee-track span {
    font-size: .88rem !important;
    line-height: 48px !important;
  }
}

@media (max-width: 420px) {
  .about-marquee {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  .about-marquee-track {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* =========================================================
   ABOUT PAGE — MOBILE CONTENT POLISH + IMAGE DEPTH EFFECTS
   Scope: small screens only. Navigation styles untouched.
   ========================================================= */
@media (max-width: 768px) {
  .about-section {
    overflow-x: clip;
  }

  .about-hero h1,
  .about-section .section-title,
  .about-final-cta h2 {
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .about-showcase-grid,
  .quality-premium-grid,
  .services-gallery-grid,
  .integrity-premium-card {
    align-items: start;
  }

  .about-main-photo,
  .quality-photo,
  .team-premium-card,
  .mvv-premium-card,
  .about-feature-list div,
  .integrity-pill-grid span,
  .mini-service-grid a,
  .quality-timeline div {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .about-main-photo::before,
  .quality-photo::before,
  .team-premium-card::before,
  .mvv-premium-card::after,
  .about-feature-list div::after,
  .integrity-pill-grid span::after,
  .quality-timeline div::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 32%, rgba(184,150,46,.10));
    opacity: .58;
    pointer-events: none;
  }

  .team-premium-card > *,
  .mvv-premium-card > *,
  .about-feature-list div > *,
  .integrity-pill-grid span > *,
  .quality-timeline div > * {
    position: relative;
    z-index: 2;
  }

  .about-main-photo img,
  .quality-photo img,
  .team-premium-card img,
  .mini-service-grid img {
    transform: scale(1.015);
    transition: transform .36s ease;
  }

  .about-main-photo:active img,
  .quality-photo:active img,
  .team-premium-card:active img,
  .mini-service-grid a:active img {
    transform: scale(1.055);
  }

  .about-floating-card {
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 18px 44px rgba(10,31,68,.16);
  }

  .card-two {
    box-shadow: 0 18px 44px rgba(10,31,68,.24), inset 0 1px 0 rgba(255,255,255,.12);
  }

  .mvv-premium-card:active,
  .about-feature-list div:active,
  .quality-timeline div:active,
  .team-premium-card:active,
  .mini-service-grid a:active,
  .integrity-pill-grid span:active {
    transform: translateY(-2px) scale(.992);
  }

  .quality-badge {
    box-shadow: 0 18px 42px rgba(10,31,68,.18);
    animation: qualityBadgePulse 4.8s ease-in-out infinite;
  }

  .about-reveal,
  .animate-on-scroll,
  .animate-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: transform .24s ease, box-shadow .24s ease !important;
  }
}

@media (max-width: 420px) {
  .about-feature-list div,
  .mvv-premium-card,
  .quality-timeline div,
  .team-premium-card div,
  .integrity-pill-grid span {
    box-shadow: 0 12px 30px rgba(10,31,68,.08);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .quality-badge {
    animation: none !important;
  }
}

@keyframes qualityBadgePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 18px 42px rgba(10,31,68,.18); }
  50% { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(10,31,68,.22); }
}