:root{
  --navy:#0B1F55;--navyDark:#091A45;--ink:#0A0F1F;--muted:#6B7280;--line:#E6EAF2;--accent:#2BB24C;
}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);}
img{max-width:100%;display:block}
.container{width:min(1160px,92%);margin-inline:auto}
.between{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:40px}
.center{text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#6b7280;font-weight:800;font-size:.8rem}
.blue{color:#2B56FF}

/* Hero */
.hero--about{padding:16px 0}
.display{font-family:Poppins,Inter,sans-serif;font-size:52px;line-height:1.02;margin:6px 0 10px}
.lead{max-width:60ch;color:#4a566e}
.hero__facts{display:flex;gap:26px;margin-top:14px;justify-content:center;}
.hero__facts .fact{display:grid}
.fact .value{font-weight:800;color:var(--navy);font-size:24px}
.fact .label{color:#6b7280;font-size:.9rem}
.hero__art .story-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:linear-gradient(180deg,#f7fbff,#fff)}

/* Serve */
.serve{padding:36px 0;background:#fff}
.serve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.serve .card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.serve .card h4{margin:0 0 6px;color:#172046}
.serve .card ul{margin:8px 0 0 16px;color:#4a566e}

/* Operate */
.operate{padding:40px 0;background:#f7f9fe}
.ops-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
.step{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;position:relative}
.step .num{position:absolute;right:14px;top:10px;color:#c2cbe2;font-weight:800;font-size:26px}

/* Team */
/* .team{padding:40px 0} */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.member{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;text-align:center}
.member img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.member h5{margin:8px 0 2px}
.member span{color:#6b7280}

/* Persuade */
.persuade{padding:40px 0;background:#fff}
.persuade-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start}
.metrics{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.metrics strong{color:var(--navy)}
.logos{display:flex;gap:16px;align-items:center;margin-top:12px;opacity:.8}
.logos img{height:22px;filter:grayscale(1)}
.quote{border:1px solid var(--line);border-radius:14px;padding:16px;background:#0B1F55;color:#fff}
.quote blockquote{margin:0 0 8px;font-size:1.1rem}
.cite{opacity:.9;margin-bottom:10px}

/* CTA */
.cta{padding:30px 0;background:#f5f7fb}
.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta h3{margin:0}

/* Responsive */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr}
  .serve-grid{grid-template-columns:1fr 1fr}
  .ops-steps{grid-template-columns:1fr 1fr}
  .persuade-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .grid-2{gap:1px}
  .serve-grid{grid-template-columns:1fr}
  .ops-steps{grid-template-columns:1fr}
}
@media (max-width:680px){
  .display{font-size:40px}
  .team-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .team-grid{grid-template-columns:1fr}
  .cta-grid{flex-direction:column;align-items:flex-start}
}


/* ===== 3D ENHANCEMENTS (subtle) ===== */
:root{ --depth: 60px; }

/* Global perspective */
main{ perspective: 1200px; perspective-origin: 50% 20vh; }

/* Hero room grid background */
.hero--about{ position: relative; overflow: hidden; }
.hero--about::after{
  content:""; position:absolute; inset:-10% -20% -20% 40%;
  background-image:
    linear-gradient(transparent 43px, rgba(8,13,30,.08) 44px),
    linear-gradient(90deg, transparent 43px, rgba(8,13,30,.08) 44px);
  background-size:44px 44px, 44px 44px;
  transform: perspective(1400px) rotateX(8deg) rotateY(-24deg) translateZ(-200px);
  opacity:.8; pointer-events:none;
}

/* Layer the story card slightly forward */
.story-card{
  transform: translateZ(30px);
  box-shadow:
    0 22px 50px rgba(12,26,68,.15),
    0 10px 18px -6px rgba(12,26,68,.12);
}

/* Who we serve cards: hover tilt */
.serve .card{
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.serve .card:hover{
  transform: translateZ(18px) rotateX(3deg) rotateY(-3deg);
  box-shadow: 0 18px 42px rgba(12,26,68,.18);
}

/* Operate steps: alternating depth for a subtle staircase */
.ops-steps .step:nth-child(odd){ transform: translateZ(16px); }
.ops-steps .step:nth-child(even){ transform: translateZ(6px); }

/* Team images: float and shine on hover */
.member img{
  transform: translateZ(8px);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 16px 32px rgba(11,31,85,.12);
}
.member:hover img{
  transform: translateZ(22px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 28px 60px rgba(11,31,85,.22);
  filter: saturate(1.05);
}

/* Persuade panel depth */
.persuade-grid .proof{ transform: translateZ(10px); }
.persuade-grid .quote{
  transform: translateZ(24px);
  box-shadow: 0 24px 48px rgba(11,31,85,.28);
}

/* Reduced motion: disable transforms */
@media (prefers-reduced-motion: reduce){
  .serve .card:hover,
  .member:hover img,
  .story-card, .ops-steps .step, .persuade-grid .quote, .persuade-grid .proof{ transform:none; }
  .hero--about::after{ display:none; }
}
/* On-brand wide bio cards */
.team--bios .bio-list{
  display:grid;
  gap:22px;
  margin-top:14px;
}

/* Card container: soft surface, thin border, gentle radius */
.team--bios .bio{
  display:grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap:28px;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(11,31,85,.06);
  align-items:start;
}

/* Alternate layout automatically for visual rhythm */
/* .team--bios .bio:nth-child(even){
  grid-template-columns: 1fr minmax(280px, 420px);
}
.team--bios .bio:nth-child(even) .bio-copy{ order:1; }
.team--bios .bio:nth-child(even) .bio-media{ order:2; } */

/* Image side � matches site cards */
.team--bios .bio-media{
  border-radius: calc(var(--radius) - 6px);
  background: linear-gradient(180deg,#f7f9ff,#fff);
  border:1px solid var(--line);
}
.team--bios .bio-media img{
  display:block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(11,31,85,.08);
}

/* Text side */
.team--bios .bio-copy{ padding:6px 2px; }
.team--bios .bio-name{
  font-family:Poppins,Inter,sans-serif;
  font-size:26px;
  line-height:1.2;
  margin:0 0 4px;
  color:var(--navy);
  font-weight:800;
}
.team--bios .bio-role{
  margin:0 0 12px;
  color:#51607a;
  font-weight:700;
}

/* Quote styled like your cards/badges (not paint-style box) */
.team--bios .bio-quote{
  position:relative;
  margin:0;
  padding:14px 16px;
  /* background:#fbfcff;
  border:1px solid var(--line); */
  border-radius:12px;
  color:#000;
  line-height:1.7;
  font-size:.9rem;
  font-weight: 100;
}
/*.team--bios .bio-quote::before{
  content:"�";
  position:absolute; left:12px; top:4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size:38px; line-height:1; color:#9aa7c3; opacity:.6;
}*/

/* Responsive */
@media (max-width:1100px){
  .team--bios .bio{
    grid-template-columns: 340px 1fr;
  }
  .team--bios .bio:nth-child(even){
    grid-template-columns: 1fr 340px;
  }
}
@media (max-width:820px){
  .team--bios .bio{
    grid-template-columns: 1fr;
    gap:14px;
    padding:8px;
  }
  .team--bios .bio:nth-child(even){ grid-template-columns:1fr; }
  .team--bios .bio:nth-child(even) .bio-copy{ order:2; }
  .team--bios .bio:nth-child(even) .bio-media{ order:1; }
  .team--bios .bio-media, .team--bios .bio-copy{ order:unset; }
}

.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; border-radius:22px; overflow:hidden;
  border:1px solid var(--line);
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.12) 0%, transparent 40%),
              linear-gradient(135deg,#0c1f55,#1d2f6b);
  box-shadow:0 18px 36px rgba(11,31,85,.18) inset, 0 10px 24px rgba(11,31,85,.16);
}
#heroVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.video-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; color:#fff; z-index:2; }
.video-overlay .play{ width:54px; height:54px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); transition:transform .18s ease; }
.video-overlay:hover .play{ transform:scale(1.08); }
.video-overlay.is-hidden{ display:none; }
.video-error{ position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; padding:6px 10px; border-radius:8px; font-size:.9rem; z-index:3; }