/* About Us — the shared banner, then labelled sections: an introduction, client cards,
   guiding principles and a commitment band, ending with buttons to Contact and How We Work. */
.page--about-us { height: auto; background: #f5f5f5; }

/* Small uppercase label above a heading. The text takes the "Contact Thunderbird" button's
   navy-to-blue gradient (text only, no button shape); on the navy band a light blue-to-white
   version keeps it readable. fit-content keeps the gradient to the label's own width. */
.eyebrow {
  width: fit-content; max-width: 100%; margin-bottom: 16px;
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; overflow-wrap: anywhere;
  color: var(--blue);   /* where gradient text is not supported */
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eyebrow--on-navy { color: color-mix(in srgb, var(--blue) 45%, var(--white)); background-image: linear-gradient(100deg, color-mix(in srgb, var(--blue) 45%, var(--white)) 0%, var(--white) 70%); }
/* the hairline that draws in after the label (motion.css) keeps a visible colour of its own */
.page--about-us .eyebrow.mp-line::after { background: linear-gradient(90deg, var(--blue), transparent); }
.page--about-us .eyebrow--on-navy.mp-line::after { background: linear-gradient(90deg, var(--white), transparent); }

/* Hero banner */
.banner { position: relative; width: 1440px; min-height: 420px; padding: 144px 112px 108px 76px; display: grid; grid-template-columns: 548px 493px; column-gap: 211px; align-content: start; align-items: center; overflow: hidden; background: var(--navy); color: var(--white); }
.banner__lines { position: absolute; width: 720px; height: 1616px; pointer-events: none; }
.banner__lines--r { left: 720px; top: -564px; }
.banner__lines--l { left: 0; top: -604px; }
.banner__title { position: relative; font-size: 56px; line-height: 1; font-weight: 500; text-transform: capitalize; overflow-wrap: anywhere; }
.banner__sub { position: relative; font-size: 24px; line-height: 28px; color: var(--steel); white-space: pre-line; overflow-wrap: anywhere; }

/* Document */
.about-us { position: relative; isolation: isolate; width: 1440px; padding: 96px 76px 112px; color: var(--black); }
.about-us__heading { font-size: 40px; line-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.about-us__intro { width: 760px; }
.about-us__lede { margin-top: 28px; }
.about-us__lede p { font-size: 18px; line-height: 28px; opacity: .76; overflow-wrap: anywhere; }
.about-us__lede p:first-child { font-size: 24px; line-height: 36px; opacity: 1; }
.about-us__lede p + p { margin-top: 20px; }
.about-us__block { margin-top: 104px; }
.about-us__block > .about-us__heading { max-width: 760px; margin-bottom: 40px; }

/* Whom we serve: one card per kind of client */
/* Whom we serve: the Careers benefit cards (careers.css), the second card navy;
   hovering turns a card navy and the navy card white (motion.css) */
.about-us__cards { display: grid; grid-template-columns: repeat(var(--card-columns, 4), minmax(0, 1fr)); gap: 16px; }
.about-us__cards .info-card { position: relative; min-width: 0; min-height: 176px; padding: 24px; border-radius: 28px; overflow: hidden; background: var(--white); color: var(--black); overflow-wrap: anywhere; }
.about-us__cards .info-card--2 { background: var(--navy); color: var(--white); }
.about-us__cards .info-card__lines { position: absolute; width: 185.609px; height: 416.588px; transform: rotate(-30deg); pointer-events: none; }
.about-us__cards .info-card__lines--a { left: 269.61px; top: -120.57px; }
.about-us__cards .info-card__lines--b { left: 103.71px; top: -36.7px; }
.about-us__cards .info-card__icon { position: relative; width: 56px; height: 56px; padding: 14px; border-radius: 88px; background: #f5f5f5; display: flex; align-items: center; }
.about-us__cards .info-card__icon img { width: 28px; height: 28px; filter: brightness(0); }
/* The client icons (24 grid with a 3-unit margin) are shown a little larger in the same circle */
.about-us__cards .info-card__icon img:is([src$="/executives.svg"], [src$="/families.svg"], [src$="/individuals.svg"], [src$="/organizations.svg"]) { width: 36px; height: 36px; margin: -4px; }
.about-us__cards .info-card--2 .info-card__icon { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.16); padding: 12.5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.about-us__cards .info-card--2 .info-card__icon img { filter: brightness(0) invert(1); }
.about-us__cards .info-card__title { position: relative; margin-top: 24px; font-size: 24px; line-height: 1; font-weight: 500; text-transform: capitalize; }
.about-us__cards .info-card__sub { position: relative; margin-top: 8px; font-size: 16px; line-height: 1.25; opacity: .7; }
.about-us__cards .info-card--2 .info-card__sub { color: var(--steel); opacity: 1; }
@media (hover: hover) {
  .about-us__cards .info-card:hover .info-card__icon img { filter: brightness(0) invert(1); }
  .page--about-us .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img { filter: brightness(0); }   /* outranks the shared rule in motion.css */
}
/* phones: the card in the middle of the screen (motion.js) */
.about-us__cards .info-card.is-active .info-card__icon img { filter: brightness(0) invert(1); }
.page--about-us .about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon img { filter: brightness(0); }

/* Our approach: titled rows rather than a numbered sequence */
.about-us__rows { border-top: 1px dashed rgba(0,0,0,.16); }
.about-us__row { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; padding: 28px 0; border-bottom: 1px dashed rgba(0,0,0,.16); }
.about-us__row h3 { font-size: 22px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.about-us__row p { max-width: 760px; font-size: 18px; line-height: 28px; opacity: .76; overflow-wrap: anywhere; }

/* Our commitment: one statement on a navy band carrying the footer's artwork, like the page
   banners (base.css): anchored to the bottom so its notch is cropped away, with the band's own
   diagonal lines hidden so the stripes do not double up */
.commitment { position: relative; width: 1440px; padding: 104px 76px; overflow: hidden; background: var(--navy) url(../assets/img/footer-union.webp) center bottom / 1440px auto no-repeat; color: var(--white); }
.commitment__lines { position: absolute; width: 720px; height: 1616px; pointer-events: none; visibility: hidden; }
.commitment__lines--r { left: 720px; top: -604px; }
.commitment__lines--l { left: 0; top: -644px; }
.commitment__copy { position: relative; width: 760px; }
.commitment__copy p:not(.eyebrow) { margin-top: 24px; font-size: 20px; line-height: 32px; color: rgba(255,255,255,.76); overflow-wrap: anywhere; }

/* Closing: next steps, with buttons to Contact and How We Work */
.closing { position: relative; width: 1440px; padding: 112px 76px 96px; text-align: center; }
.closing__heading { font-size: 40px; line-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.closing__text { width: 712px; margin: 16px auto 0; font-size: 20px; line-height: 28px; color: rgba(0,0,0,.6); overflow-wrap: anywhere; }
.closing__actions { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
/* Buttons as on the About page design: a blue gradient for the main action and an outlined
   one beside it. They keep the site's .btn behaviour (lift on hover, focus ring). */
.closing .closing__btn { min-height: 56px; padding: 0 30px; font-size: 16px; line-height: 1; font-weight: 600; background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 70%); }
.closing .closing__btn--ghost { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); }
.closing .closing__btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.24), 0 10px 24px rgba(0,0,0,.06); filter: none; }

/* Footer in flow */
.page--about-us .footer { position: relative; bottom: auto; height: 658px; }
.page--about-us .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
.footer-spacer { height: 98px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 899px) {
  .eyebrow { margin-bottom: 12px; font-size: 11px; line-height: 14px; }

  .banner { width: 402px; min-height: 308px; padding: 132px 32px 64px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* The lines keep their desktop size so the spacing matches; the banner clips the overflow. */
  .banner__lines--r { left: 50%; }
  .banner__lines--l { left: calc(50% - 720px); }
  .banner__tagline { position: absolute; left: 0; top: 68px; width: 100%; font-size: 12px; line-height: 16px; text-align: center; text-transform: capitalize; white-space: nowrap; }
  .banner__title { max-width: 300px; font-size: 24px; text-wrap: balance; }
  .banner__sub { font-size: 14px; line-height: 18px; }

  .about-us { width: 402px; padding: 48px 24px 32px; }
  .about-us__heading { font-size: 24px; line-height: 28px; }
  .about-us__intro { width: 354px; }
  .about-us__lede { margin-top: 16px; }
  .about-us__lede p { font-size: 15px; line-height: 24px; }
  .about-us__lede p:first-child { font-size: 17px; line-height: 26px; }
  .about-us__lede p + p { margin-top: 16px; }
  .about-us__block { margin-top: 56px; }
  .about-us__block > .about-us__heading { margin-bottom: 24px; }
  .about-us__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .about-us__cards .info-card { min-height: 144px; padding: 16px; border-radius: 24px; }
  .about-us__cards .info-card__lines { width: 163.481px; height: 366.918px; }
  .about-us__cards .info-card__lines--a { left: 280px; top: -124.49px; }
  .about-us__cards .info-card__lines--b { left: 134px; top: -50.61px; }
  .about-us__cards .info-card__title { margin-top: 16px; font-size: 18px; line-height: 20px; }
  .about-us__cards .info-card__sub { margin-top: 4px; font-size: 14px; line-height: 16px; }
  .about-us__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 20px 0; }
  .about-us__row h3 { font-size: 18px; line-height: 24px; }
  .about-us__row p { font-size: 15px; line-height: 24px; }

  .commitment { width: 402px; padding: 56px 24px; background-image: url(../assets/img/footer-union-mobile.webp); background-size: 402px auto; }
  .commitment__lines--r { left: 50%; }
  .commitment__lines--l { left: calc(50% - 720px); }
  .commitment__copy { width: 354px; }
  .commitment__copy p:not(.eyebrow) { margin-top: 16px; font-size: 15px; line-height: 24px; }

  .closing { width: 402px; padding: 56px 24px 112px; }   /* clears the footer ring, which rises 64px above the mobile footer */
  .closing__heading { font-size: 24px; line-height: 28px; }
  .closing__text { width: 354px; margin-top: 12px; font-size: 14px; line-height: 20px; }
  .closing__actions { flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
  .closing .closing__btn { width: 304px; min-height: 52px; font-size: 15px; }

  .footer-spacer { height: 56px; }
}