/* About page: vision/mission-first visual layout. */

.abt-kicker { display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--navy); }
.abt-kicker::before { content: ""; width: 24px; height: 1px; background: var(--orange); }
.abt-kicker--light { color: rgba(228,236,248,.88); }
.abt-kicker--light::before { background: rgba(228,236,248,.88); }

/* Hero uses the shared .pd-hero--light --svc pattern from product-detail.css
   (same as the service sub-pages) — no hero CSS of its own needed here. */

.abt-proof { background: #f3f8fe; padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) 0 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
.abt-proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.abt-proof__grid > * { min-width: 0; border-radius: 12px; border: 1px solid rgba(29,65,121,.12);
  background: rgba(255,255,255,.88); padding: .95rem .9rem;
  box-shadow: 0 16px 26px -24px rgba(11,24,48,.46); }
.abt-proof b { display: block; color: #10294f; font-size: clamp(1rem, .85rem + .6vw, 1.35rem); line-height: 1.1; }
.abt-proof span { display: block; margin-top: .28rem; color: #52667e; font-size: .8rem; }

.abt-story.section { padding-top: clamp(.8rem, .45rem + 1vw, 1.6rem); }
.abt-story__head { margin-bottom: clamp(1rem, .7rem + 1vw, 1.8rem); }
.abt-story__head h2 { margin: .95rem 0 .65rem; color: #10294f; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.12; letter-spacing: -.022em; max-width: 20ch; }
.abt-story__head p { margin: 0; color: #4b5f79; line-height: 1.66; max-width: 62ch; }
.abt-story__timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.abt-story__timeline > * { min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFE 100%);
  padding: .95rem .9rem 1rem; box-shadow: 0 20px 34px -30px rgba(11,24,48,.45); }
.abt-story__timeline b { display: inline-flex; border: 1px solid rgba(29,65,121,.16); border-radius: 999px;
  padding: .22rem .55rem; font-family: var(--font-mono, monospace); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: #24466d; }
.abt-story__timeline h3 { margin: .65rem 0 .35rem; color: #10294f; font-size: 1rem; line-height: 1.2; }
.abt-story__timeline p { margin: 0; color: #52667d; font-size: .83rem; line-height: 1.52; }

.abt-vm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.abt-vm__grid > * { min-width: 0; }
.abt-card { border-radius: 18px; overflow: hidden; border: 1px solid rgba(29,65,121,.15);
  box-shadow: 0 30px 54px -36px rgba(11,24,48,.5); height: 100%; display: flex; flex-direction: column; }
.abt-card__body { padding: 1.5rem 1.5rem 1.25rem; }
.abt-card h2 { margin: .85rem 0 .65rem; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); line-height: 1.15; letter-spacing: -.02em; }
.abt-card p { margin: 0; line-height: 1.62; }
.abt-card__media { margin-top: auto; }
.abt-card__media img { width: 100%; height: clamp(190px, 20vw, 260px); object-fit: cover; display: block; }
.abt-card--vision { background: #fff; }
.abt-card--vision .abt-kicker, .abt-card--vision h2 { color: #10294f; }
.abt-card--vision p { color: #4c6079; }
.abt-card--mission { color: #fff;
  background:
    linear-gradient(145deg, rgba(20,43,82,.98) 0%, rgba(29,65,121,.96) 56%, rgba(77,159,215,.78) 100%),
    linear-gradient(180deg, #142B52 0%, #1D4179 100%);
  border-color: rgba(143,194,232,.36); }
.abt-card--mission h2 { color: #fff; }
.abt-card--mission p { color: rgba(228,236,248,.9); }
.abt-card--mission ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.abt-card--mission li { display: flex; gap: .55rem; align-items: flex-start; min-width: 0;
  font-size: .85rem; line-height: 1.5; color: rgba(236,242,250,.92); }
.abt-card--mission li::before { content: ""; width: 7px; height: 7px; margin-top: .34rem;
  border-radius: 2px; background: linear-gradient(140deg, #8fc2e8, #e4effa); flex: none; }

.abt-values__head h2 { margin: .9rem 0 0; color: #10294f; font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.15; letter-spacing: -.022em; max-width: 24ch; }
.abt-values__grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.abt-values__grid > * { min-width: 0; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; padding: .95rem .9rem 1rem; box-shadow: 0 16px 30px -28px rgba(11,24,48,.44); }
.abt-values__grid i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  color: #fff; background: linear-gradient(140deg, #1D4179 0%, #2f5f9e 100%); }
.abt-values__grid h3 { margin: .65rem 0 .35rem; color: #10294f; font-size: .95rem; line-height: 1.25; }
.abt-values__grid p { margin: 0; color: #53677f; font-size: .83rem; line-height: 1.5; }

.abt-lead { padding: clamp(2.2rem, 1.4rem + 2.6vw, 4rem) 0;
  background: linear-gradient(150deg, #132D57 0%, #1D4179 52%, #2B6CA8 100%); }
.abt-lead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.abt-lead__grid > * { min-width: 0; }
.abt-lead figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(170,197,228,.34); min-height: 320px; }
.abt-lead figure img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.abt-lead article { border-radius: 16px; border: 1px solid rgba(170,197,228,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.05) 100%);
  padding: 1.5rem; display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 28px 46px -34px rgba(0,0,0,.68); }
.abt-lead h2 { margin: .9rem 0 .65rem; color: #fff; font-size: clamp(1.4rem, 1.08rem + 1.1vw, 1.95rem);
  line-height: 1.15; letter-spacing: -.02em; }
.abt-lead p { margin: 0 0 1.25rem; color: rgba(230,238,248,.9); line-height: 1.65; }
.abt-lead .btn { align-self: flex-start; }

.abt-cta__panel { border: 1px solid rgba(247,148,31,.3); border-radius: 20px;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  background:
    linear-gradient(120deg, rgba(247,148,31,.2) 0%, rgba(247,148,31,.1) 34%, rgba(77,159,215,.16) 100%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  box-shadow: 0 30px 56px -40px rgba(11,24,48,.5);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.abt-cta__panel h2 { margin: .85rem 0 .55rem; color: #10294f; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  line-height: 1.15; letter-spacing: -.02em; }
.abt-cta__panel p { margin: 0; color: #4c6078; line-height: 1.62; max-width: 54ch; }
.abt-cta__actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }

@media (max-width: 1080px) {
  .abt-vm__grid,
  .abt-lead__grid { grid-template-columns: minmax(0, 1fr); }
  .abt-lead figure { min-height: 220px; }
  .abt-lead figure img { min-height: 220px; }
  .abt-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-story__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-cta__panel { grid-template-columns: minmax(0, 1fr); }
  .abt-cta__actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .abt-proof__grid,
  .abt-story__timeline,
  .abt-values__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PARTNERSHIPS — alliance cards + a platform-badge strip. 2026-09-03.
   ========================================================================== */
.ptn-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.ptn-strip > * { min-width: 0; }
.ptn-card { border-radius: 18px; border: 1px solid var(--line); background: #fff;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); box-shadow: 0 30px 54px -38px rgba(11,24,48,.4);
  display: flex; flex-direction: column; gap: .9rem; }
.ptn-card__mark { display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy); }
.ptn-card__mark i { font-size: 1.3rem; color: var(--orange); }
.ptn-card h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.ptn-card > p { color: var(--slate); line-height: 1.62; margin: 0; }
.ptn-card__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.ptn-card__tags span { padding: .35rem .8rem; border-radius: 999px; background: var(--sky-tint, #eef3f9);
  font-size: .78rem; font-weight: 600; color: var(--navy); }

/* Marquee — the platform wordmarks (oracle-*.svg) are already self-labelled
   230×48 lockups (icon + name + one-line caption baked into the SVG), so
   this is a logo strip, not an icon grid: no separate caption markup, and
   width comes from the SVG's own aspect ratio rather than a fixed square. */
.ptn-marquee { padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) 0; border-radius: 18px;
  background: #f6faff; border: 1px solid var(--line); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ptn-marquee__track { display: flex; align-items: center; width: max-content;
  gap: clamp(2.6rem, 1.8rem + 3.2vw, 4.4rem);
  animation: ptn-scroll 28s linear infinite; }
.ptn-marquee:hover .ptn-marquee__track { animation-play-state: paused; }
.ptn-marquee__item { flex: none; display: flex; align-items: center; }
.ptn-marquee__item img { height: 34px; width: auto; display: block; }
/* Azure ships as a bare triangle mark with no baked-in wordmark, unlike the
   Oracle SVGs (each already a colour-badge-square + bold title + coloured
   caption, all in one file) — reconstruct that same three-part shape here
   so the sixth item doesn't read as a different visual language. */
.ptn-marquee__azure { display: inline-flex; align-items: center; gap: .7rem; }
.ptn-marquee__azure .ptn-marquee__azico { flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: #E8F1FB; display: grid; place-items: center; }
.ptn-marquee__azure .ptn-marquee__azico img { height: 20px; width: auto; }
.ptn-marquee__azure b { display: block; font-size: .95rem; font-weight: 800; color: #0B1830; line-height: 1.2; }
.ptn-marquee__azure span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .03em; color: #0078D4; }
@keyframes ptn-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ptn-marquee__track { animation: none; } }

@media (max-width: 780px) { .ptn-strip { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   LOCATIONS — one real HQ feature card + an honest global-presence grid
   (country/role only, no invented street addresses). 2026-09-03.
   ========================================================================== */
.loc-hq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 0;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 34px 60px -40px rgba(11,24,48,.45); }
.loc-hq > * { min-width: 0; }
.loc-hq__media { position: relative; min-height: 280px; }
.loc-hq__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-hq__body { padding: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); display: flex; flex-direction: column;
  justify-content: center; gap: 1.1rem; background: #fff; }
.loc-hq__body h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); letter-spacing: -.02em; color: var(--ink); }
.loc-hq__body address { font-style: normal; color: var(--slate); line-height: 1.7; font-size: 1rem; }
.loc-hq__meta { display: flex; flex-direction: column; gap: .5rem; }
.loc-hq__meta a { display: inline-flex; align-items: center; gap: .55rem; color: var(--navy); font-weight: 600; font-size: .92rem; }
.loc-hq__meta i { color: var(--orange); width: 16px; }

.loc-world { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.loc-world > * { min-width: 0; border-radius: 16px; border: 1px solid var(--line);
  background: #fff; padding: 1.4rem 1.3rem; box-shadow: 0 20px 36px -30px rgba(11,24,48,.4); }
.loc-world__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(140deg, var(--navy) 0%, #2f5f9e 100%); color: #fff; margin-bottom: .9rem; font-size: 1rem; }
.loc-world h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink); }
.loc-world p { margin: 0; color: var(--slate); font-size: .88rem; line-height: 1.55; }

@media (max-width: 1080px) { .loc-hq { grid-template-columns: minmax(0, 1fr); } .loc-hq__media { min-height: 220px; } }
@media (max-width: 780px) { .loc-world { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   RIA CARES — three featured-initiative cards + a click-driven region
   switcher (never scroll-triggered — see [[ria-client-preferences]]).
   2026-09-03.
   ========================================================================== */
.cares-init { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cares-init > * { min-width: 0; border-radius: 18px; border: 1px solid var(--line); background: #fff;
  padding: 1.7rem 1.5rem; text-align: center; box-shadow: 0 24px 44px -34px rgba(11,24,48,.4); }
.cares-init__ico { width: 62px; height: 62px; margin: 0 auto .9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--sky-tint, #eef3f9); color: var(--navy); font-size: 1.4rem; }
.cares-init h3 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--ink); }
.cares-init p { margin: 0; color: var(--slate); font-size: .88rem; line-height: 1.58; }

.cares-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.cares-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--slate); font-weight: 600; font-size: .86rem;
  cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cares-pill:hover { border-color: var(--sky); }
.cares-pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.cares-panel { display: none; }
.cares-panel.is-active { display: block; }
.cares-org { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem;
  padding: 1.1rem 0; border-top: 1px solid var(--line); }
.cares-org:first-child { border-top: 0; padding-top: 0; }
.cares-org h4 { margin: 0; font-size: .98rem; color: var(--ink); }
.cares-org p { margin: .3rem 0 0; color: var(--slate); font-size: .88rem; line-height: 1.58; }
.cares-org a { color: var(--navy); font-weight: 600; word-break: break-word; }

@media (max-width: 780px) { .cares-init { grid-template-columns: minmax(0, 1fr); } }
