/* Apexis About: scoped to .apx-about. Palette is the site's Astra globals:
   red #cf2d22, slate #1e293b / #334155, light #F0F5FA, near-black #111. */

/* Let the page run full width inside Astra's container. */
body.apx-about-page .site-content > .ast-container { max-width: 100%; padding: 0; display: block; }
body.apx-about-page #primary, body.apx-about-page .site-main { margin: 0; padding: 0; width: 100%; }

.apx-about {
  --apx-red: #cf2d22;
  --apx-red-dk: #a8231a;
  --apx-ink: #1e293b;
  --apx-body: #334155;
  --apx-muted: #64748b;
  --apx-tint: #f0f5fa;
  --apx-line: #d1d5db;
  --apx-black: #111111;
  --apx-slate: #2b2f36;
  color: var(--apx-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}
.apx-about *, .apx-about *::before, .apx-about *::after { box-sizing: border-box; }
.apx-about h1, .apx-about h2, .apx-about h3 { color: var(--apx-ink); margin: 0; font-weight: 700; line-height: 1.2; }
.apx-about p { margin: 0 0 1em; }
.apx-about p:last-child { margin-bottom: 0; }
.apx-about figure { margin: 0; }
.apx-about img { display: block; max-width: 100%; height: auto; }
.apx-about ul, .apx-about ol { list-style: none; margin: 0; padding: 0; }
.apx-about a { color: var(--apx-red); text-underline-offset: 3px; }
.apx-about a:focus-visible { outline: 3px solid var(--apx-red); outline-offset: 3px; border-radius: 4px; }
.apx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.apx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.apx-narrow { max-width: 820px; }
.apx-section { padding: clamp(56px, 8vw, 104px) 0; }
.apx-tint { background: var(--apx-tint); }

.apx-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--apx-red); margin: 0 0 12px !important;
}
.apx-eyebrow--light { color: #fca5a0; }

/* Site heading style: bold, with the short red rule underneath. */
.apx-h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.01em; text-wrap: balance; }
.apx-h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--apx-red); border-radius: 2px; margin-top: 18px; }

.apx-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.apx-head__intro { margin-top: 20px; font-size: 17px; }
.apx-head--light .apx-h2 { color: #fff; }

.apx-lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--apx-ink); font-weight: 500; }
.apx-prose p { margin-bottom: 1em; }
.apx-prose--light, .apx-prose--light p { color: rgba(255,255,255,.82); }
.apx-prose--light a { color: #fff; text-decoration: underline; }

.apx-closing {
  margin-top: clamp(32px, 4vw, 48px) !important; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55;
  color: var(--apx-ink); font-weight: 500; border-left: 3px solid var(--apx-red); padding-left: 20px; max-width: 820px;
}

/* Buttons */
.apx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 26px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none !important;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.apx-btn:hover { transform: translateY(-1px); }
.apx-btn--primary { background: var(--apx-red); color: #fff !important; border: 2px solid var(--apx-red); }
.apx-btn--primary:hover { background: var(--apx-red-dk); border-color: var(--apx-red-dk); }
.apx-btn--ghost { color: #fff !important; border: 2px solid rgba(255,255,255,.7); }
.apx-btn--ghost:hover { background: #fff; color: var(--apx-ink) !important; border-color: #fff; }
.apx-btn--light { background: #fff; color: var(--apx-red) !important; border: 2px solid #fff; }
.apx-btn--light:hover { background: transparent; color: #fff !important; }

/* 1. Hero */
.apx-hero {
  position: relative; color: #fff; padding: clamp(96px, 14vw, 168px) 0 clamp(80px, 10vw, 128px);
  background: linear-gradient(100deg, rgba(10,12,16,.92) 0%, rgba(10,12,16,.78) 45%, rgba(10,12,16,.35) 100%), var(--apx-hero-img) center / cover no-repeat, var(--apx-black);
}
.apx-hero__inner { max-width: 1200px; }
.apx-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -.02em; max-width: 19ch; text-wrap: balance; }
.apx-hero__sub { margin-top: 22px !important; font-size: clamp(17px, 1.8vw, 20px); max-width: 44em; color: rgba(255,255,255,.86); }
.apx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.apx-intro__grid { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .apx-intro__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Split text / media */
.apx-split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .apx-split { grid-template-columns: 1.05fr .95fr; }
  .apx-split--media-first { grid-template-columns: .9fr 1.1fr; }
  .apx-split--top { align-items: start; }
}
.apx-split__media img { width: 100%; border-radius: 14px; object-fit: cover; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -30px rgba(15,23,42,.55); }
.apx-split__text .apx-h2 { margin-bottom: 24px; }

/* Cards */
.apx-cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .apx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .apx-cards--cap { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .apx-cards--cap .apx-card { grid-column: span 2; }
  .apx-cards--cap .apx-card:nth-child(4) { grid-column: 2 / span 2; }
  .apx-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.apx-card {
  background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid var(--apx-red); border-radius: 12px;
  padding: 28px 26px; font-size: 15px;
}
.apx-card--flat { border-top: 1px solid #e5e7eb; }
.apx-card h3 { font-size: 19px; margin: 18px 0 12px; }
.apx-card__top { display: flex; align-items: center; justify-content: space-between; }
.apx-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fdecea; color: var(--apx-red); }
.apx-card--flat .apx-card__icon { background: var(--apx-ink); color: #fff; }
.apx-ico { width: 24px; height: 24px; }
.apx-card__num { font-size: 40px; font-weight: 700; color: #e5e7eb; line-height: 1; }

/* 4. TEEX */
.apx-dark { background: var(--apx-ink); color: rgba(255,255,255,.82); }
.apx-teex__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .apx-teex__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.apx-teex__badge { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.apx-teex__mark {
  flex: none; display: inline-grid; place-items: center; height: 52px; padding: 0 16px; border-radius: 8px;
  background: #fff; color: #500000; font-weight: 800; font-size: 20px; letter-spacing: .08em;
}
.apx-teex__badge h3 { color: #fff; font-size: clamp(20px, 2.2vw, 24px); }
.apx-callout {
  margin: 8px 0 28px !important; padding: 20px 22px; border-radius: 10px; background: rgba(255,255,255,.07);
  border-left: 3px solid var(--apx-red); color: #fff; font-weight: 500;
}
.apx-teex__media img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; }

.apx-about blockquote.apx-quote { margin: 28px 0 0; padding: 0; border: 0; background: none; }
.apx-quote p { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; font-style: italic; font-weight: 500; color: var(--apx-ink); }
.apx-quote p::before { content: ""; display: block; width: 32px; height: 3px; background: var(--apx-red); margin-bottom: 14px; }
.apx-quote--light p { color: #fff; }

/* 7. Steps */
.apx-steps { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 680px) { .apx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .apx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apx-step { position: relative; padding: 28px 24px 26px; border-radius: 12px; background: var(--apx-tint); font-size: 15px; }
.apx-step__num { display: block; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--apx-red); margin-bottom: 14px; }
.apx-step h3 { font-size: 18px; margin-bottom: 10px; }
@media (min-width: 1040px) {
  .apx-step:not(:last-child)::after {
    content: ""; position: absolute; top: 38px; right: -14px; width: 8px; height: 8px;
    border-top: 2px solid var(--apx-red); border-right: 2px solid var(--apx-red); transform: rotate(45deg);
  }
}

/* 8. Mission & vision: the existing page's red and black bands, side by side. */
.apx-mv { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .apx-mv { grid-template-columns: 1fr 1fr; } }
.apx-mv__panel { padding: clamp(56px, 7vw, 96px) 24px; color: #fff; }
.apx-mv__panel--mission { background: var(--apx-red); }
.apx-mv__panel--vision { background: var(--apx-black); }
.apx-mv__inner { max-width: 520px; margin: 0 auto; }
.apx-mv .apx-h2 { color: #fff; margin-bottom: 22px; }
.apx-mv__panel--mission .apx-h2::after { background: #fff; }
.apx-mv p { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; color: rgba(255,255,255,.92); }

/* 9. Principles */
.apx-slate { background: var(--apx-slate); color: rgba(255,255,255,.8); }
.apx-principles { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 680px) { .apx-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1040px) { .apx-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.apx-principles li { padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15px; }
.apx-principles h3 { color: #fff; font-size: 19px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.apx-principles h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--apx-red); flex: none; }

/* 10. Leaders */
.apx-leaders { display: grid; gap: 16px; }
.apx-leader {
  display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 14px; border: 1px solid #e5e7eb; background: #fff;
}
.apx-leader__photo {
  flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--apx-ink); color: #fff; font-weight: 700; font-size: 24px; letter-spacing: .04em;
}
.apx-leader h3 { font-size: 19px; }
.apx-leader p { color: var(--apx-red); font-weight: 600; font-size: 15px; margin-top: 4px; }

/* 12. CTA */
.apx-cta { background: var(--apx-red); color: rgba(255,255,255,.92); padding: clamp(56px, 7vw, 88px) 0; }
.apx-cta__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .apx-cta__inner { grid-template-columns: 1.5fr 1fr; } }
.apx-cta .apx-h2 { color: #fff; margin-bottom: 20px; }
.apx-cta .apx-h2::after { background: #fff; }
.apx-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 960px) { .apx-cta__actions { justify-content: flex-end; } }

@media (max-width: 520px) {
  .apx-wrap { padding: 0 16px; }
  .apx-hero__actions .apx-btn, .apx-cta__actions .apx-btn { width: 100%; }
  .apx-card, .apx-step { padding: 22px 20px; }
  .apx-leader__photo { width: 64px; height: 64px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .apx-btn { transition: none; } .apx-btn:hover { transform: none; } }