/* Keep every About module on the same track as the hero inside the dashboard shell. */
body[data-page="about"] .content {
  width: 100%;
  max-width: none;
  padding-left: 18px;
  padding-right: 18px;
}

body[data-page="about"] .content > section {
  width: 100%;
  max-width: none;
}

body[data-page="about"] .page-hero {
  min-height: 340px;
  display: flex;
  align-items: center;
  padding-block: 58px 62px !important;
  background-image:
    linear-gradient(90deg, rgba(12, 27, 46, .97) 0%, rgba(12, 27, 46, .9) 46%, rgba(12, 27, 46, .48) 76%, rgba(12, 27, 46, .24) 100%),
    url("../static/all/tu4.png");
  background-position: center 52%;
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-page="about"] .page-hero h1 { margin-top: 0; }

body[data-page="about"] .main-area > #sharedFooter {
  margin-left: 0;
  margin-right: 0;
}

body[data-page="about"] .content > section > .container {
  /* The source page's 1160px cap created the large blue-marked side gaps
     inside the dashboard content area. Keep a modest responsive gutter, but
     let each module use the same wide track as the hero. */
  --about-module-gutter: clamp(24px, 3.8vw, 64px);
  width: calc(100% - (var(--about-module-gutter) * 2));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 650px) {
  body[data-page="about"] .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  body[data-page="about"] .content > section > .container {
    width: calc(100% - 32px);
  }

  body[data-page="about"] .page-hero {
    min-height: 300px;
    padding-block: 42px 46px !important;
    background-position: 62% center;
  }
}

/* ---- Readable orange text on light sections ----
   The About page paints orange headings and labels on light cards. The brand
   orange stays for fills and borders, but text uses a darker tone so it clears
   the 4.5:1 contrast bar, while dark bands keep their own highlight colours. */
body[data-page="about"] {
  --orange-readable: #a95e08;
}

body[data-page="about"] .kicker,
body[data-page="about"] .about-values-pledge strong {
  color: var(--orange-readable);
}

body[data-page="about"] .services-section .appeal-service-card a span,
body[data-page="about"] .underline-link span,
body[data-page="about"] .section-label span,
body[data-page="about"] .card-code,
body[data-page="about"] .about-process-list li > span,
body[data-page="about"] .adv-no {
  color: var(--orange-readable) !important;
}

/* Repeated service entries sit below the module-heading tier. */
body[data-page="about"] .services-section .appeal-service-card .service-no {
  color: #a35c00 !important;
}
body[data-page="about"] .services-section .appeal-service-card h3 {
  color: #17283c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Dark bands and panels keep the bright accent. */
body[data-page="about"] .service-promise-heading .kicker {
  color: #ff9900 !important;
}

body[data-page="about"] .contact-section .kicker {
  color: #ff9900 !important;
}

body[data-page="about"] .positioning-sign strong i,
body[data-page="about"] .case-visual span,
body[data-page="about"] .case-visual i,
body[data-page="about"] .footer-links span,
body[data-page="about"] .phone,
body[data-page="about"] .proof-line strong,
body[data-page="about"] .hero h1 em,
body[data-page="about"] .hero-stamp span,
body[data-page="about"] .hero-scroll span,
body[data-page="about"] .status-arrow {
  color: #ffb347 !important;
}

/* The FAQ toggle sits on a light card, so it keeps the darker orange. */
body[data-page="about"] .faq-toggle-icon:not(.is-open) {
  color: #975800 !important;
}

/* Dark navy panels keep light copy so body text stays readable on #0c1b2e. */
body[data-page="about"] .positioning-copy > p:not(.kicker),
body[data-page="about"] .about-vision-copy .about-vision-statement {
  color: #d5dee8 !important;
}

/* Keep the closing sections compact without dropping copy or imagery. */
body[data-page="about"] .about-vision-section {
  padding-bottom: 50px;
}
body[data-page="about"] .about-vision-panel {
  height: 390px;
  min-height: 0;
}
body[data-page="about"] .about-vision-copy {
  padding-block: 42px;
}
body[data-page="about"] .about-vision-visual {
  min-height: 0;
}
body[data-page="about"] .about-vision-visual img {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}
body[data-page="about"] .team-support-band {
  min-height: 0;
  padding-block: 42px;
}
body[data-page="about"] .team-support-band > .container > .kicker {
  margin-bottom: 12px;
}
body[data-page="about"] .contact-section {
  padding-block: 30px;
}

body.poa-content-page[data-page="about"] .services-section {
  padding-bottom: 44px;
}
body[data-page="about"] .about-process-section {
  padding-top: 56px;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-page="about"] .about-vision-panel {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  }
  body[data-page="about"] .about-vision-copy {
    padding-inline: 24px;
  }
  body[data-page="about"] .about-vision-panel .about-vision-copy .kicker {
    font-size: 20px !important;
    letter-spacing: .02em !important;
  }
  body[data-page="about"] .team-support-band {
    padding-block: 36px;
  }
  body[data-page="about"] .team-support-layout {
    gap: 20px;
  }
}

@media (max-width: 760px) {
  body.poa-content-page[data-page="about"] .services-section {
    padding-bottom: 28px;
  }
  body[data-page="about"] .about-process-section {
    padding-top: 48px;
  }
  body[data-page="about"] .about-vision-section {
    padding-bottom: 42px;
  }
  body[data-page="about"] .about-vision-panel {
    height: auto;
  }
  body[data-page="about"] .about-vision-copy {
    min-height: 280px;
    padding: 34px 28px;
  }
  body[data-page="about"] .about-vision-visual {
    height: 200px;
    min-height: 0;
  }
  body[data-page="about"] .about-vision-visual img {
    max-height: none;
  }
  body[data-page="about"] .team-support-band {
    padding-block: 36px;
  }
  body[data-page="about"] .team-support-layout {
    gap: 20px;
  }
  body[data-page="about"] .contact-section {
    padding-block: 32px;
  }
}