/* ==========================================================================
   ABOUT US 2026 — page-templates/template-about-us.php
   Everything is scoped under `main.about` so shared components (hero,
   imperative, benefits, cta) are only adjusted on this page.
   Brand: Montserrat, weights 400–700 only (no 800/900), tokens from
   src/scss/base/_tokens.scss. Plain CSS (no build step needed).
   ========================================================================== */

.about {
  --about-gray: var(--ct-gray-50, #f6f7f7);
  --about-card-border: var(--ct-gray-200, #dfe3e5);
  --about-pad: clamp(3.5rem, 6vw, 6rem);
  --about-ink: var(--ct-black, #000);
  --about-body: var(--ct-gray-700, #353d40);

  /* Type scale = the theme's own utilities (same values as on Home / Xshield):
     section H2 = .text-40, card H3 = .text-24, lead = .text-18, body = 16px,
     eyebrows/kickers = 12px. RFS-style: fluid below 1200px, fixed above. */
  --about-fs-h2: min(calc(1.375rem + 1.5vw), 2.5rem);      /* 40px */
  --about-fs-h3: min(calc(1.275rem + 0.3vw), 1.5rem);      /* 24px */
  --about-fs-cta: min(calc(1.475rem + 2.7vw), 3.5rem);     /* 56px — CTA title, as Home/Xshield CTA */
  --about-fs-lead: 1.125rem;                               /* 18px */
  --about-fs-body: 1rem;                                   /* 16px */
  --about-fs-small: 0.875rem;                              /* 14px */
  --about-fs-eyebrow: 0.75rem;                             /* 12px */
}

/* ---- shared bits ------------------------------------------------------- */
/* Solid white button (design) — same size/transition as the theme .btn; hover inverts
   to the white-outline look, the same swap .btn-red does (red fill → white fill). */
.about .btn-white {
  background: #fff;
  color: var(--ct-black, #000);
  border: 2px solid #fff;
  padding-top: calc(0.75rem - 2px);
  padding-bottom: calc(0.75rem - 2px);
  min-height: 2.5rem; /* = .btn-red with its arrow (40px) */
}
.about .about-recognition__btn { min-height: 2.5rem; }
.about .btn-white:hover,
.about .btn-white:focus-visible {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.about .btn-white .arrow { display: none !important; }

.about h1, .about h2, .about h3 { text-transform: none; } /* copy is already Title Case (keeps "for the", "of" lowercase) */

/* ==========================================================================
   01 · HERO (template-parts/hero, variant .about-hero)
   ========================================================================== */
.about .about-hero {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background:
    url("../../images/about-us/about-hero-lines.webp") right center / auto 100% no-repeat,
    radial-gradient(ellipse 45% 70% at 76% 50%, rgba(0, 198, 163, 0.14), transparent 70%),
    linear-gradient(90deg, #3d0000 0%, #140000 22%, #000 48%, #000 100%);
}
.about .about-hero .cs-eyebrow { color: #fff; }
.about .about-hero h1.display { max-width: 14ch; } /* size: theme .hero h1.display (55px) */
.about .about-hero .hero-sub { margin-top: 1.25rem; max-width: 40rem; } /* size: theme .hero-sub */
.about .about-hero__kicker {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--ct-teal, #00c6a3);
  font-size: var(--about-fs-h3);
  font-weight: 600;
  line-height: 1.3;
  max-width: 24em;
}

.about-orbit { display: flex; justify-content: flex-end; }
.about-orbit svg { width: 100%; max-width: 500px; height: auto; overflow: visible; }
.about-orbit__ring { fill: none; stroke: rgba(0, 198, 163, 0.45); stroke-width: 1.5; }
.about-orbit__ring--dash { stroke-dasharray: 5 6; stroke: rgba(0, 198, 163, 0.6); }
.about-orbit__ring--faint { stroke: rgba(0, 198, 163, 0.25); }
.about-orbit__spokes path { stroke: rgba(0, 198, 163, 0.3); stroke-width: 1; fill: none; }
.about-orbit__dots circle { fill: var(--ct-teal, #00c6a3); }
.about-orbit__dots circle.faint { fill: rgba(255, 255, 255, 0.35); }
.about-orbit__attack path { fill: none; stroke: #e20000; stroke-width: 1.2; opacity: 0.75; }
.about-orbit__attack .about-orbit__arc { stroke-width: 4; opacity: 1; stroke-linecap: round; }
.about-orbit__core { fill: #fff; filter: drop-shadow(0 0 22px rgba(0, 198, 163, 0.55)); }
.about-orbit__tile { color: #fff; }
.about-orbit__tile rect { fill: #04454e; stroke: rgba(0, 198, 163, 0.75); stroke-width: 1.5; }
.about-orbit__tile--red rect { fill: #e20000; stroke: #ff4d4d; filter: drop-shadow(0 0 14px rgba(226, 0, 0, 0.8)); }

@media (prefers-reduced-motion: no-preference) {
  .about-orbit__ring--dash { animation: aboutOrbitSpin 40s linear infinite; transform-origin: 220px 220px; }
  @keyframes aboutOrbitSpin { to { transform: rotate(360deg); } }
}

/* ==========================================================================
   03 · WHO WE ARE (template-parts/imperative style2, variant .about-intro)
   ========================================================================== */
.about .about-intro { padding: var(--about-pad) 0; background: #fff; }
.about .about-intro .imperative__title { font-size: var(--about-fs-h2); line-height: 1.1; color: var(--about-ink); margin: 0; }
.about .about-intro .imperative__intro { row-gap: 1.5rem; }
.about .about-intro p { font-size: var(--about-fs-lead); line-height: 1.6; color: var(--about-body); margin: 0 0 1.5rem; }
.about .about-intro p:last-child { margin-bottom: 0; }

/* ==========================================================================
   04 · PROTECT THE BUSINESS (template-parts/benefits, variant .about-pillars)
   ========================================================================== */
.about .about-pillars { background: var(--about-gray); padding: var(--about-pad) 0; }
.about .about-pillars .benefits__head { margin-bottom: 3rem; }
.about .about-pillars .benefits__head h2 { margin: 0; font-size: var(--about-fs-h2); line-height: 1.1; text-transform: none; }
.about .about-pillars .benefits__grid { --bs-gutter-x: 0.75rem; row-gap: 0.75rem; }
.about .about-pillars .benefit {
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.75rem 2.75rem 2.25rem;
  border: 2px solid var(--about-card-border);
  border-radius: 8px;
  box-shadow: none;
  background: #fff;
}
.about .about-pillars .benefit:hover { transform: none; box-shadow: 0 8px 24px rgba(17, 22, 26, 0.08); }
.about .about-pillars .benefit__icon { width: 64px; height: 64px; background: none; margin-bottom: 1rem; }
.about .about-pillars .benefit__icon svg { width: 60px; height: 60px; stroke: var(--ct-black, #000); stroke-width: 1.1; }
.about .about-pillars .benefit__icon svg circle:nth-of-type(1) { fill: rgba(0, 198, 163, 0.85); stroke: var(--ct-black, #000); }
.about .about-pillars .benefit__title { font-size: var(--about-fs-h3); line-height: 1.25; max-width: 13em; }
.about .about-pillars .benefit__lead { font-size: var(--about-fs-body); line-height: 1.5; color: var(--about-body); max-width: 20em; }

/* ==========================================================================
   05 · 90% RISK REDUCTION
   ========================================================================== */
.about-risk { background: #000; color: #fff; padding: clamp(3.5rem, 5vw, 4.5rem) 0; }
.about-risk__row { row-gap: 2.5rem; }
.about-risk .cs-eyebrow { color: #fff; }
.about-risk__title { color: #fff; font-size: var(--about-fs-h2); font-weight: 700; line-height: 1.1; margin: 0 0 1.5rem; max-width: 17em; }
.about-risk__lead { color: rgba(255, 255, 255, 0.85); font-size: var(--about-fs-lead); line-height: 1.6; margin: 0; max-width: 32em; }

.about-risk__media { max-width: 574px; }
.about-risk__media svg { display: block; width: 100%; height: auto; }
/* graph animation waits until the section scrolls into view (class added in about-us.js) */
.about-risk.js-wait:not(.is-inview) .about-risk__media svg * { animation-play-state: paused !important; }

/* ==========================================================================
   06 · WHY COLORTOKENS
   ========================================================================== */
.about-why { background: var(--about-gray); padding: var(--about-pad) 0; }
.about-why__title { font-size: var(--about-fs-h2); font-weight: 700; line-height: 1.1; color: var(--about-ink); margin: 0 0 2.5rem; }
.about-why__grid { --bs-gutter-x: 0.75rem; row-gap: 0.75rem; }
.about-why__card {
  height: 100%;
  background: #fff;
  border: 2px solid var(--about-card-border);
  border-radius: 8px;
  padding: 2.25rem 1.75rem 2.25rem;
}
.about-why__eyebrow { margin: 0 0 2.75rem; font-size: var(--about-fs-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ct-teal, #00c6a3); }
.about-why__card-title { margin: 0 0 0.75rem; font-size: var(--about-fs-h3); font-weight: 700; line-height: 1.25; color: var(--about-ink); }
.about-why__body { margin: 0; font-size: var(--about-fs-body); line-height: 1.5; color: var(--about-body); }

/* ==========================================================================
   07 · INDUSTRY RECOGNITION
   ========================================================================== */
.about-recognition {
  color: #fff;
  padding: clamp(3rem, 4vw, 3.75rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(ellipse 70% 90% at 50% 45%, rgba(0, 120, 105, 0.55), transparent 70%),
    linear-gradient(180deg, #03474f 0%, #035f5a 100%);
}
.about-recognition__head { text-align: center; margin-bottom: 3.5rem; }
.about-recognition__head .cs-eyebrow { color: #fff; margin-bottom: 0.75rem; }
.about-recognition__head .cs-eyebrow::before { background: var(--ct-teal, #00c6a3); width: 1rem; height: 1px; }
.about-recognition__title { color: #fff; margin: 0; font-size: var(--about-fs-h2); font-weight: 700; line-height: 1.1; }
.about-recognition__title span { color: var(--ct-teal, #00c6a3); }
.about-recognition__grid { row-gap: 3rem; }
.about-recognition__col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 2rem; }
@media (min-width: 768px) {
  .about-recognition__col + .about-recognition__col { border-left: 1px solid rgba(255, 255, 255, 0.16); }
}
.about-recognition__label { margin: 0 0 1.25rem; font-size: var(--about-fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; min-height: 2.7em; }
/* Forrester label: 2 lines on desktop ("The Forrester Wave™:" / "Microsegmentation Solutions, Q3 2026") */
@media (min-width: 992px) {
  .about-recognition__label .nw { white-space: nowrap; }
  .about-recognition__col { padding: 0 1.25rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .about-recognition__label { font-size: 0.6875rem; letter-spacing: 0.1em; }
}
.about-recognition__name { margin: 0 0 1.25rem; color: #fff; font-size: var(--about-fs-h3); font-weight: 700; line-height: 1.25; max-width: 8em; }
.about-recognition__badge { height: 136px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.about-recognition__badge img { max-height: 136px; max-width: 160px; width: auto; height: auto; }
.about-recognition__body { margin: 0 0 1.75rem; font-size: var(--about-fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.85); max-width: 15em; }
.about .about-recognition__btn { margin-top: auto; } /* theme .btn.btn-outline-white (size + hover) */
.about .about-recognition__btn:hover { color: var(--ct-dark-teal, #04454e); }

/* ==========================================================================
   08 · LEADERSHIP (tabs + bio popup)
   ========================================================================== */
.about-team { background: #fff; padding: var(--about-pad) 0; scroll-margin-top: 100px; }
.about-team .cs-eyebrow { color: var(--about-ink); margin-bottom: 0.75rem; }
.about-team__title { margin: 0 0 1.75rem; font-size: var(--about-fs-h2); font-weight: 700; line-height: 1.1; color: var(--about-ink); }
.about-team__title .text-red { color: var(--ct-red, #e20000); }

.about-team__tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 2.5rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ct-gray-100, #eceef0);
  border-radius: 999px;
}
.about-team__tabs::-webkit-scrollbar { display: none; }
.about-team__tab {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font: 600 var(--about-fs-small)/1.2 var(--font-sans, "Montserrat", sans-serif);
  color: var(--ct-gray-500, #6d777b);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.about-team__tab:hover { color: var(--about-ink); }
.about-team__tab.is-active { background: #fff; color: var(--about-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(17, 22, 26, 0.12); }
.about-team__tab:focus-visible { outline: 2px solid var(--ct-teal, #00c6a3); outline-offset: 2px; }

/* the panel is the popup's positioning box (cells stay static) */
.about-team__panel { position: relative; }
.about-team__featured, .about-team__grid { --bs-gutter-x: 1.5rem; row-gap: 1.5rem; }
.about-team__featured { margin-bottom: 1.5rem; }

/* card reset — cards are <button>s */
.about-team__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-sans, "Montserrat", sans-serif);
  cursor: pointer;
  transition: opacity 0.25s, box-shadow 0.25s;
}
.about-team__trigger:focus-visible { outline: 2px solid var(--ct-teal, #00c6a3); outline-offset: 4px; }
.about-team__trigger img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); }

/* featured (co-founders) */
.about-feature { display: flex; aspect-ratio: 2.45 / 1; border-radius: 6px; overflow: hidden; }
/* square photo panel (≈41% of the card) so the whole head-and-shoulders portrait shows, anchored to the bottom like the design */
.about-feature__photo { flex: 0 0 41%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--ct-gray-100, #eceef0); }
.about-team__trigger .about-feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.about-feature__info { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem 1.5rem; color: #fff; }
.about-feature--red .about-feature__info { background: linear-gradient(90deg, #0d0000 0%, #5a0000 100%); }
.about-feature--teal .about-feature__info { background: linear-gradient(90deg, #011012 0%, #04454e 100%); }
.about-feature__eyebrow { font-size: var(--about-fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-teal, #00c6a3); margin-bottom: 0.25rem; }
.about-feature__name { font-size: min(calc(1.3rem + 0.6vw), 1.75rem); font-weight: 700; line-height: 1.2; } /* 28px */
.about-feature__role { font-size: var(--about-fs-body); margin-top: 0.25rem; opacity: 0.9; }

/* grid members */
.about-member { border-radius: 6px; }
.about-member__photo {
  display: block;
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  border: 2px solid var(--about-card-border);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 0.875rem;
  transition: border-color 0.2s;
}
.about-member:hover .about-member__photo { border-color: var(--ct-gray-300, #c6cccf); }
.about-member__name { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: var(--about-ink); }
.about-member__role { display: block; margin-top: 0.375rem; font-size: var(--about-fs-small); line-height: 1.4; color: var(--about-body); }

/* centre an incomplete last row (as in the design) */
.about-team__grid { justify-content: center; }
@media (min-width: 992px) {
  .about-team__grid { justify-content: flex-start; }
  .about-team__grid > .about-team__cell:nth-last-child(-n+3):nth-child(4n+1) { margin-left: auto; }
  .about-team__grid > .about-team__cell:last-child:nth-child(4n+1),
  .about-team__grid > .about-team__cell:last-child:nth-child(4n+2),
  .about-team__grid > .about-team__cell:last-child:nth-child(4n+3) { margin-right: auto; }
}

/* open state: selected card lifted with a teal base line, all other cards faded */
.about-team__panel.has-open .about-team__trigger[aria-expanded="false"] { opacity: 0.35; }
.about-member[aria-expanded="true"] {
  background: #fff;
  border: 1px solid var(--about-card-border);
  border-bottom: 3px solid var(--ct-teal, #00c6a3);
  padding-bottom: 1rem;
  box-shadow: 0 10px 28px rgba(17, 22, 26, 0.1);
}
.about-member[aria-expanded="true"] .about-member__photo { border: 0; border-radius: 6px 6px 0 0; margin-bottom: 0.875rem; }
.about-member[aria-expanded="true"] .about-member__name,
.about-member[aria-expanded="true"] .about-member__role { padding: 0 0.75rem; }
.about-member[aria-expanded="true"] .about-member__role { color: var(--about-ink); }
.about-feature[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ct-teal, #00c6a3); }

/* bio popup — centred on the grid, just below the selected card's row (top set in about-us.js) */
.about-bio {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(42rem, 100%);
  background: #fff;
  border: 2px solid var(--ct-teal, #00c6a3);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(17, 22, 26, 0.18);
  padding: 1.25rem 1.5rem 1.75rem;
}
.about-bio[hidden] { display: none; }
.about-bio__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.875rem; margin-bottom: 1.125rem; border-bottom: 1px solid var(--ct-gray-200, #dfe3e5); }
.about-bio__name { margin: 0; font-size: var(--about-fs-h3); font-weight: 700; line-height: 1.25; color: var(--ct-dark-teal, #04454e); }
.about-bio__close { flex: 0 0 auto; display: inline-flex; padding: 0.25rem; border: 0; background: none; color: var(--ct-teal, #00c6a3); cursor: pointer; }
.about-bio__close:focus { outline: none; }
.about-bio__close:focus-visible { outline: 2px solid var(--ct-teal, #00c6a3); }
.about-bio__body { max-height: 22rem; overflow-y: auto; }
.about-bio__body p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--about-body); } /* 15px = theme card body */
.about-bio__body p:last-child { margin-bottom: 0; }
.about-bio-backdrop { display: none; }

@media (max-width: 991.98px) {
  .about-team__featured, .about-team__grid { --bs-gutter-x: 1rem; row-gap: 1.25rem; }
  .about-feature__info { padding: 1.25rem 1rem; }
}

/* phones: the bio opens as a centred modal with a backdrop */
@media (max-width: 767.98px) {
  .about-team__tabs { margin-bottom: 1.75rem; }
  .about-team__tab { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
  .about-feature__info { padding: 1rem; }
  .about-feature__name { font-size: 1.125rem; }
  .about-feature__role { font-size: var(--about-fs-small); }
  .about-member__name { font-size: var(--about-fs-body); }
  .about-member__role { font-size: 0.8125rem; }
  .about-member[aria-expanded="true"] .about-member__name,
  .about-member[aria-expanded="true"] .about-member__role { padding: 0 0.5rem; }
  .about-bio {
    position: fixed;
    top: 50% !important;
    left: 1rem;
    right: 1rem;
    width: auto;
    transform: translateY(-50%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem 1.25rem;
    z-index: 100001;
  }
  .about-bio__body { max-height: none; overflow-y: auto; }
  .about-bio-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.55); }
  .about-team__panel.has-open .about-team__trigger[aria-expanded="false"] { opacity: 1; }
}

/* ==========================================================================
   09 · GET TO KNOW COLORTOKENS
   ========================================================================== */
.about-links { background: var(--about-gray); padding: var(--about-pad) 0; }
.about-links__title { text-align: center; margin: 0 0 2.5rem; font-size: var(--about-fs-h2); font-weight: 700; line-height: 1.1; color: var(--about-ink); }
.about-links__grid { --bs-gutter-x: 0.75rem; row-gap: 0.75rem; }
.about-links__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.75rem 2.25rem;
  background: #fff;
  border: 2px solid var(--about-card-border);
  border-radius: 8px;
  color: var(--about-ink);
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.about-links__card:hover { color: var(--about-ink); box-shadow: 0 10px 28px rgba(17, 22, 26, 0.08); border-color: var(--ct-gray-300, #c6cccf); }
.about-links__icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-links__card-title { margin: 1.25rem 0 0.5rem; font-size: var(--about-fs-h3); font-weight: 700; line-height: 1.2; color: var(--about-ink); }
.about-links__body { margin: 0 0 3rem; font-size: var(--about-fs-body); line-height: 1.5; color: var(--about-body); max-width: 22em; }
.about-links__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.875rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ct-red, #e20000); }
.about-links__cta svg { transition: transform 0.2s; }
.about-links__cta { transition: color 0.25s; }
.about-links__card:hover .about-links__cta { color: var(--ct-red-600, #b50000); }
.about-links__card:hover .about-links__cta svg { transform: translateX(4px); }

/* ==========================================================================
   10 · CLOSING CTA (template-parts/cta style1, variant .about-cta) — left aligned
   ========================================================================== */
.about .about-cta {
  text-align: left !important;
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: #070b0d url("../../images/about-us/about-cta-bg.webp") right center / cover no-repeat;
}
.about .about-cta .cta-inner { align-items: flex-start !important; }
.about .about-cta .cta-title { max-width: 14em; } /* size: theme .cta-title.text-56 */
.about .about-cta .cta-actions { justify-content: flex-start !important; gap: 0.75rem; }

/* fixes after browser check */
.about .about-cta .cta-inner, .about .about-cta .cta-title, .about .about-cta .cta-lead { text-align: left !important; }
.about .about-hero .about-orbit svg { width: 100% !important; max-width: 520px; height: auto !important; }
.about .about-hero .hero-right { justify-content: flex-end; }
.about .about-hero .about-orbit { width: 100%; }

/* ==========================================================================
   RESPONSIVE (tablet ≤991px, phone ≤767px, small phone ≤575px)
   Container widths come from the shared .container, so every section keeps
   the header/footer content edges at all sizes.
   ========================================================================== */
.about .about-pillars .benefits__grid,
.about .about-why__grid,
.about .about-links__grid { justify-content: center; }

@media (max-width: 991.98px) {
  /* hero: copy first, visual below */
  .about .about-hero { background-position: right -10% top 0, 0 0, 0 0; background-size: auto 60%, auto, auto; }
  .about .about-hero h1.display { max-width: none; }
  .about .about-hero .hero-right { justify-content: center; }
  .about .about-hero .about-orbit svg { max-width: 420px; }

  .about .about-intro .imperative__head { margin-bottom: 0.5rem; }
  .about .about-pillars .benefit { padding: 1.5rem 1.5rem 2rem; }

  .about-risk__title { max-width: none; margin-bottom: 1.25rem; }
  .about-risk__media { max-width: 574px; margin: 0 auto; }

  .about-why__eyebrow { margin-bottom: 1.5rem; }

  .about-recognition__col { padding: 0 1rem; }
  .about-recognition__label { min-height: 0; }
}

@media (max-width: 767.98px) {
  .about { --about-pad: 3.5rem; }

  .about .about-hero { padding: 3.5rem 0 3rem; background-size: auto 45%, auto, auto; background-position: right -40% top 0, 0 0, 0 0; }
  .about .about-hero .about-orbit svg { max-width: 320px; }

  .about .about-pillars .benefits__head { margin-bottom: 2rem; }

  .about-recognition__head { margin-bottom: 2.5rem; }
  .about-recognition__grid { row-gap: 0; }
  .about-recognition__col { padding: 2.25rem 1rem; }
  .about-recognition__col + .about-recognition__col { border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .about-recognition__col:first-child { padding-top: 0; }
  .about-recognition__col:last-child { padding-bottom: 0; }

  .about-links__title { margin-bottom: 1.75rem; }
  .about-links__card { padding: 1.5rem 1.5rem 1.75rem; }
  .about-links__body { margin-bottom: 2rem; }

  .about .about-cta {
    padding: 4rem 0;
    background:
      linear-gradient(180deg, rgba(7, 11, 13, 0.92) 0%, rgba(7, 11, 13, 0.7) 100%),
      #070b0d url("../../images/about-us/about-cta-bg.webp") 70% center / cover no-repeat;
  }
}

@media (max-width: 575.98px) {
  .about .about-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .about .about-hero .hero-actions .btn,
  .about .about-cta .cta-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .about .about-cta .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
}


/* ==========================================================================
   02 · TRUSTED BY ENTERPRISES (shared client-marquee) — label on one line on
   every desktop width: label takes its own width, logos take the rest.
   ========================================================================== */
@media (min-width: 992px) {
  .about .clients-row { flex-wrap: nowrap; }
  .about .clients-label { flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap; padding-right: 2.5rem; }
  .about .clients-logos { flex: 1 1 0; width: auto; min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .about .clients-label { letter-spacing: 0.18em; }
}