/* =====================================================================
   About Us page (2026-09 redesign)
   Palette: navy #1d407e, deep navy #16305d, yellow #fde362
   All classes are prefixed .au- so nothing leaks into other pages.
   ===================================================================== */
.au-page {
  --au-navy: #1d407e;
  --au-navy-deep: #16305d;
  --au-yellow: #fde362;
  --au-ink: #1f2a3d;
  --au-muted: #5b6678;
  --au-line: #e3e8f1;
  background: linear-gradient(to bottom, #fde362 0, #fff7cf 280px, #ffffff 640px);
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
  color: var(--au-ink);
}
.au-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.au-page section { margin-bottom: clamp(28px, 5vw, 48px); }

/* ---- Shared bits ---- */
.au-kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--au-navy); background: rgba(253, 227, 98, .6);
  padding: 3px 10px; border-radius: 6px; margin-bottom: 10px;
}
.au-section-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.au-section-head h2 { color: var(--au-navy-deep); font-weight: 800; font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 8px; line-height: 1.2; }
.au-section-head p { color: var(--au-muted); font-size: 16px; margin: 0; }

/* ---- Hero ---- */
.au-hero { text-align: center; max-width: 760px; margin: 0 auto clamp(22px, 4vw, 34px); }
.au-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--au-navy); color: var(--au-yellow);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.au-hero h1 { color: var(--au-navy); font-weight: 800; line-height: 1.15; margin: 0 0 12px; font-size: clamp(28px, 5vw, 44px); }
.au-hero h1 span { background: linear-gradient(transparent 62%, rgba(255,255,255,.85) 62%); padding: 0 4px; }
.au-hero p { color: var(--au-navy-deep); font-size: clamp(16px, 2.2vw, 18px); margin: 0; }

/* ---- Stats ---- */
.au-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(22, 48, 93, .12);
}
.au-stat { text-align: center; padding: clamp(18px, 3vw, 28px) 12px; min-width: 0; }
.au-stat + .au-stat { border-left: 1px solid var(--au-line); }
.au-stat > i { font-size: 26px; color: var(--au-navy); display: block; margin-bottom: 6px; }
.au-stat strong { display: block; color: var(--au-navy); font-weight: 800; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.15; }
.au-stat span { color: var(--au-muted); font-size: 15px; }
.au-stars { color: #f5b301 !important; font-size: clamp(18px, 2.6vw, 26px) !important; letter-spacing: 2px; padding: 5px 0; }

/* ---- Legacy ---- */
.au-legacy {
  display: grid; grid-template-columns: 7fr 5fr; gap: 0;
  border-radius: 18px; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--au-navy) 0%, var(--au-navy-deep) 100%);
  box-shadow: 0 18px 48px rgba(22, 48, 93, .22);
}
.au-legacy-text { padding: clamp(24px, 4.5vw, 48px); }
.au-legacy .au-kicker { background: var(--au-yellow); color: var(--au-navy-deep); }
.au-legacy h2 {
  color: var(--au-yellow); font-weight: 800; margin: 0 0 16px; text-align: left;
  font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1;
}
.au-legacy p { color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.au-legacy .au-legacy-lead { color: #fff; font-size: clamp(17px, 2.2vw, 19px); }
.au-founder { color: var(--au-yellow); font-weight: 700; }
.au-quote {
  margin: 20px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--au-yellow);
  font-size: clamp(17px, 2.3vw, 20px); font-style: italic; color: #fff; line-height: 1.5;
}
.au-sign { display: flex; flex-direction: column; margin-top: 18px; }
.au-sign-name {
  font-family: "Great Vibes", "Brush Script MT", cursive; color: var(--au-yellow);
  font-size: clamp(30px, 4vw, 40px); line-height: 1.1;
}
.au-sign-role { color: rgba(255,255,255,.75); font-size: 14px; letter-spacing: .03em; }

.au-legacy-media { position: relative; margin: 0; min-height: 320px; }
.au-legacy-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-legacy-media::before {           /* fade photo into the navy text panel */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--au-navy) 0%, rgba(29,64,126,0) 35%),
              linear-gradient(0deg, rgba(22,48,93,.85) 0%, rgba(22,48,93,0) 45%);
}
.au-legacy-media figcaption {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.au-fact {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.95); color: var(--au-navy-deep);
  font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.au-fact i { color: var(--au-navy); }

/* ---- Mission / Vision ---- */
.au-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.au-mv-card {
  background: #fff; border-radius: 18px; padding: clamp(22px, 3.5vw, 32px);
  border-top: 4px solid var(--au-yellow);
  box-shadow: 0 14px 40px rgba(22, 48, 93, .10), 0 2px 6px rgba(22, 48, 93, .05);
}
.au-mv-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--au-navy); color: var(--au-yellow); font-size: 24px; margin-bottom: 14px;
}
.au-mv-card h2 { color: var(--au-navy-deep); font-weight: 800; font-size: 24px; margin: 0 0 8px; text-align: left; }
.au-mv-card p { font-size: 16px; line-height: 1.65; margin: 0; color: var(--au-ink); }

/* ---- Why us ---- */
.au-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.au-why-item {
  background: #f6f8fc; border: 1px solid var(--au-line); border-radius: 14px; padding: 20px;
  transition: transform .2s, box-shadow .2s; min-width: 0;
}
.au-why-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22, 48, 93, .10); }
.au-why-item > i {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--au-navy); color: var(--au-yellow); font-size: 20px; margin-bottom: 12px;
}
.au-why-item h3 { font-size: 18px; font-weight: 700; color: var(--au-navy); margin: 0 0 6px; }
.au-why-item p { font-size: 15px; line-height: 1.55; margin: 0; }

/* ---- Help ---- */
.au-help {
  border-radius: 18px; padding: clamp(24px, 4.5vw, 44px);
  background: linear-gradient(135deg, var(--au-navy), var(--au-navy-deep));
  box-shadow: 0 18px 48px rgba(22, 48, 93, .22);
}
.au-section-head-light h2 { color: #fff; }
.au-section-head-light .au-kicker { background: var(--au-yellow); color: var(--au-navy-deep); }
.au-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.au-help-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 22px; color: #fff; min-width: 0;
}
.au-help-card > i { font-size: 26px; color: var(--au-yellow); margin-bottom: 10px; }
.au-help-card h3 { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.au-help-card p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; margin: 0 0 18px; flex: 1; }
.au-plain { color: #fff; font-weight: 700; text-decoration: none; }
.au-plain:hover { color: var(--au-yellow); }
.au-break { word-break: break-all; font-weight: 500; }

.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 11px 18px; border-radius: 12px; min-height: 46px;
  text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.au-btn:hover { text-decoration: none; }
.au-btn-yellow { background: var(--au-yellow); color: var(--au-navy-deep); }
.au-btn-yellow:hover { background: #fff; color: var(--au-navy-deep); }
.au-btn-ghost { border: 2px solid rgba(255,255,255,.55); color: #fff; }
.au-btn-ghost:hover { border-color: var(--au-yellow); color: var(--au-yellow); }

/* ================= Responsive ================= */
@media (max-width: 991.98px) {
  .au-legacy { grid-template-columns: 1fr; }
  .au-legacy-media { order: -1; min-height: 240px; }
  .au-legacy-media::before { background: linear-gradient(0deg, var(--au-navy) 0%, rgba(29,64,126,0) 60%); }
  .au-legacy-media figcaption { flex-direction: row; flex-wrap: wrap; }
  .au-why-grid, .au-help-grid { grid-template-columns: 1fr 1fr; }
  .au-why-grid > :last-child:nth-child(odd),
  .au-help-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .au-stats { grid-template-columns: 1fr; }
  .au-stat + .au-stat { border-left: 0; border-top: 1px solid var(--au-line); }
  .au-stat { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; text-align: left; column-gap: 12px; align-items: center; padding: 16px 20px; }
  .au-stat > i { grid-row: 1 / 3; margin: 0; font-size: 28px; }
  .au-mv, .au-why-grid, .au-help-grid { grid-template-columns: 1fr; gap: 12px; }
  .au-help-card .au-btn { width: 100%; }
  .au-legacy p { font-size: 15.5px; }
}

@media (max-width: 479.98px) {
  .au-legacy-media { min-height: 200px; }
  .au-fact { font-size: 12.5px; padding: 6px 10px; }
  .au-legacy-media figcaption { left: 14px; right: 14px; bottom: 14px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .au-why-item { transition: none; }
  .au-why-item:hover { transform: none; }
}

/* ---- Legacy portrait (2026-09-29): founder artwork on the right ----
   Keep the face, house, logo and signature in view: anchor the crop to the
   right, only fade the left edge into the text panel, and move the fact
   chips to the plain top-left area so they don't cover the logo. */
.au-legacy-media img { object-position: right center; }
.au-legacy-media::before { background: linear-gradient(90deg, var(--au-navy) 0%, rgba(29,64,126,0) 30%); }
.au-legacy-media figcaption { top: 20px; bottom: auto; }
@media (max-width: 991.98px) {
  .au-legacy-media { min-height: 0; aspect-ratio: 1000 / 1376; max-height: 620px; }
  .au-legacy-media img { object-position: center top; }
  .au-legacy-media::before { background: linear-gradient(0deg, var(--au-navy) 0%, rgba(29,64,126,0) 12%); }
  .au-legacy-media figcaption { flex-direction: column; }
}

/* ---- Legacy panel colour matched to the founder artwork (2026-09-29) ----
   The artwork fades from #163673 (top) to #0b3172 (bottom); the panel uses
   the same gradient so text side and picture read as one piece. Fact chips
   sit at the bottom-left of the picture. */
.au-legacy { background: linear-gradient(180deg, #163673 0%, #0b3172 100%); }
.au-legacy-media::before { background: none; }
.au-legacy-media figcaption { top: auto; bottom: 20px; }
@media (max-width: 991.98px) {
  .au-legacy { background: #0b3172; }            /* matches the artwork's bottom edge */
  .au-legacy-media::before { background: none; }
  .au-legacy-media figcaption { top: auto; bottom: 14px; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 991.98px) {
  /* phones/tablets: full artwork, chips in a row just below it (not over the logo) */
  .au-legacy-media { aspect-ratio: auto; max-height: none; }
  .au-legacy-media img { position: static; height: auto; }
  .au-legacy-media figcaption { position: static; padding: 14px 20px 0; }
}

/* ---- Desktop: artwork as an overlay layer behind the whole panel ----
   Instead of being clipped to its grid column (hard edge through the house),
   the picture is absolutely positioned across the right ~62% of the panel,
   anchored bottom-right, and its left side fades out with a mask so the
   house blends under the text. Text sits above it. */
@media (min-width: 992px) {
  .au-legacy { position: relative; isolation: isolate; }
  .au-legacy-text { position: relative; z-index: 2; }
  .au-legacy-media {
    position: absolute; top: 0; right: 0; bottom: 0; width: 62%; min-height: 0; z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 42%);
  }
  .au-legacy-media img { object-fit: cover; object-position: right bottom; }
  /* chips start where the old right column began (not under the text) */
  .au-legacy-media figcaption { left: 34%; right: 20px; bottom: 20px; top: auto; }
}
@media (min-width: 992px) {
  /* fade only the picture, keep the chips fully opaque */
  .au-legacy-media { -webkit-mask-image: none; mask-image: none; }
  .au-legacy-media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 42%);
  }
}

/* ---- Phones/tablets: artwork as the background of the Legacy statement ----
   The <figure> goes back into normal flow (after the text) and only holds the
   chips; the <img> and a readability overlay are positioned against the whole
   .au-legacy panel, so the portrait, house and logo sit behind the text. */
@media (max-width: 991.98px) {
  .au-legacy { position: relative; isolation: isolate; background: #0b3172; }
  .au-legacy-text { position: relative; z-index: 2; }
  .au-legacy-media {
    position: static; order: 1; min-height: 0; aspect-ratio: auto; max-height: none;
    -webkit-mask-image: none; mask-image: none;
  }
  .au-legacy-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
    object-fit: cover; object-position: right bottom;
    -webkit-mask-image: none; mask-image: none;
  }
  .au-legacy-media::before {           /* keeps the text readable over the artwork */
    content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
    background: linear-gradient(180deg, rgba(11,49,114,.78) 0%, rgba(11,49,114,.72) 55%, rgba(11,49,114,.35) 85%, rgba(11,49,114,.15) 100%);
  }
  .au-legacy-media figcaption {
    position: relative; z-index: 2; padding: 0 clamp(24px, 4.5vw, 48px) clamp(24px, 4.5vw, 40px);
    flex-direction: column; align-items: flex-start;
  }
  .au-legacy-text { padding-bottom: 18px; }
}
@media (max-width: 991.98px) {
  /* natural-size artwork pinned to the bottom of the panel; panel colour
     matches the artwork's top edge so there is no seam above it */
  .au-legacy { background: #163673; }
  .au-legacy-media img { top: auto; bottom: 0; height: auto; object-fit: initial; }
  .au-legacy-media::before {
    background: linear-gradient(180deg, rgba(22,54,115,.0) 0%, rgba(22,54,115,.55) 45%, rgba(11,49,114,.35) 80%, rgba(11,49,114,0) 100%);
  }
  .au-legacy-media figcaption { max-width: 70%; padding-bottom: clamp(90px, 22vw, 180px); }
}

/* ---- Fact chips now live under the signature (all screen sizes) ---- */
.au-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.au-facts .au-fact { box-shadow: 0 4px 12px rgba(0,0,0,.18); }
@media (max-width: 991.98px) {
  .au-legacy-text { padding-bottom: clamp(150px, 36vw, 300px); }   /* leave the house/logo visible below the chips */
}
/* chips: one row, left-aligned */
.au-facts { flex-direction: row; justify-content: flex-start; align-items: center; }
.au-facts .au-fact { font-size: 13.5px; padding: 7px 12px; white-space: nowrap; }
@media (min-width: 992px) {
  .au-facts { flex-wrap: nowrap; width: max-content; position: relative; z-index: 3; }
}
@media (max-width: 479.98px) {
  .au-facts { gap: 6px; }
  .au-facts .au-fact { font-size: 12px; padding: 6px 10px; gap: 6px; }
}