/* ==========================================================================
   Page: About Us — extends assets/css/style.css
   Reuses existing tokens/components; only net-new rules below.
   ========================================================================== */

/* ---- Hero ---- */
.about-hero {
  padding: 160px 64px 0;
  max-width: var(--container-max);
  margin: 0 auto;
}

.pill-badge.accent {
  display: inline-flex;
  background: rgba(66, 165, 202, 0.1);
  color: var(--color-blue);
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  border: none;
}

.about-hero h1 {
  font-size: 48px;
  letter-spacing: -0.96px;
  max-width: 768px;
  margin-bottom: 24px;
}

.about-hero h1 .gradient {
  background: linear-gradient(130deg, var(--color-navy) 0%, var(--color-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-hero p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 672px;
 
}

@media (max-width: 900px) {
  .about-hero { padding: 120px 24px 0; }
}

/* ---- Story section ---- */
.story-section {
  background: #fff;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.story-grid {
  display: flex;
  align-items: center;
  gap: 64px;
}

.story-copy {
  flex: 1;
}

.story-copy h2 {
  font-size: 32px;
  margin-bottom: 24px;
}

.story-copy p {
  margin-bottom: 16px;
}

.story-stats {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}

.story-stats .value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  color: var(--color-blue);
}

.story-stats .label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.story-media {
  flex: 1;
}

.story-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.story-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.6s var(--ease);
}

.story-media:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .story-grid { flex-direction: column; }
}

/* ---- Mission / Vision ---- */
.mission-vision-section {
  background: var(--color-navy);
  color: #fff;
}

.mission-vision-grid {
  display: flex;
  gap: 24px;
}

.mission-vision-col {
  flex: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 48px;
}

.mv-icon {
  /* icon-mission.svg is 44x34, icon-vision.svg is 44x30 — Figma SVGs use
     preserveAspectRatio="none" on the root, so leaving height unset lets
     the browser fall back to a distorted default box. */
  width: 44px;
  height: 34px;
  margin-bottom: 24px;
}

.mv-icon[src*="icon-vision"] {
  height: 30px;
}

.mission-vision-col h3 {
  font-size: 32px;
  color: #fff;
  margin-bottom: 24px;
}

.mission-vision-col p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(215, 226, 255, 0.8);
}

@media (max-width: 900px) {
  .mission-vision-grid { flex-direction: column; }
  .mission-vision-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding: 32px 0; }
}

/* ---- Leadership team ---- */
.leadership-team-section {
  background: var(--color-bg-soft);
}

.leader-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.leader-photo {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow var(--duration) var(--ease);
}

.leader-card:hover .leader-photo {
  box-shadow: var(--shadow-lg);
}

.leader-photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.leader-card:hover .leader-photo img {
  transform: scale(1.05);
}

.leader-card h4 {
  font-size: 16px;
  margin-bottom: 2px;
}

.leader-title {
  font-size: 16px;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.leader-bio {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24px;
  color: var(--color-text);
}

@media (max-width: 900px) {
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Synaptic Way / values ---- */
.synaptic-way-section {
  background: var(--color-bg-soft-2);
}

.synaptic-way-grid {
  display: flex;
  gap: 64px;
  align-items: stretch;
}

.synaptic-way-copy {
  flex: 0 0 340px;
}

.synaptic-way-copy h2 {
  font-size: 32px;
  margin-bottom: 24px;
}

.synaptic-way-copy p {
  margin-bottom: 24px;
}

.accent-bar {
  width: 80px;
  height: 4px;
  background: var(--color-blue);
}

.values-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.value-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 33px;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(66, 165, 202, 0.35);
}

.value-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgba(66, 165, 202, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.value-icon img {
  width: 22px;
  height: 21px;
}

.value-card h4 {
  font-size: 16px;
  margin-bottom: 12px;
}

.value-card p {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .synaptic-way-grid { flex-direction: column; }
  .synaptic-way-copy { flex: none; }
  .values-grid { grid-template-columns: 1fr; }
}

/* ---- The Synaptic Edge (bento) ---- */
.edge-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.edge-card {
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.edge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.edge-resilience {
  grid-column: span 8;
  background: var(--color-navy);
  color: #fff;
  gap: 24px;
}

.edge-resilience h3 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 16px;
}

.edge-resilience p {
  color: rgba(215, 226, 255, 0.7);
  max-width: 448px;
}

.edge-quantum {
  grid-column: span 4;
  background: var(--color-blue);
  color: #fff;
  gap: 16px;
}

.edge-quantum-icon {
  /* icon-quantum-security.svg declares a 288x50 viewBox but the actual
     shield glyph only occupies the ~40x50 sub-region — the true visual
     aspect ratio is 40:50 (0.8), not the full viewBox's 288:50. */
  width: 32px;
  height: 40px;
}

.edge-quantum h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
}

.edge-quantum p {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.edge-integration {
  grid-column: span 4;
  background: transparent;
  border: 1px solid var(--color-border);
  gap: 24px;
}

.edge-integration h4 {
  font-size: 16px;
  margin-bottom: 16px;
}

.edge-integration p {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.integration-tags {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.integration-tags span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24px;
}

.integration-tags i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
  display: inline-block;
}

.edge-hubs {
  grid-column: span 8;
  background: #e6e8ea;
  flex-direction: row;
  align-items: center;
  gap: 48px;
}

.edge-hubs-copy h4 {
  font-size: 16px;
  margin-bottom: 16px;
}

.edge-hubs-copy p {
  margin-bottom: 16px;
}

.hub-tags {
  display: flex;
  gap: 16px;
}

.hub-tags span {
  background: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.edge-hubs-globe {
  width: 220px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .edge-grid { grid-template-columns: 1fr; }
  .edge-resilience, .edge-quantum, .edge-integration, .edge-hubs { grid-column: span 1; }
  .edge-hubs { flex-direction: column; }
  .hub-tags { flex-wrap: wrap; }
}

/* ---- CTA ---- */
.cta-section {
  padding-left: 192px;
  padding-right: 192px;
}

.cta-card {
  background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
  border: 1px solid var(--color-border-soft);
  border-radius: 40px;
  padding: 65px 21px;
  text-align: center;
}

.cta-card h2 {
  font-size: 32px;
  margin-bottom: 24px;
}

.cta-card p {
  max-width: 560px;
  margin: 0 auto 24px;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 900px) {
  .cta-section { padding-left: 24px; padding-right: 24px; }
  .cta-actions { flex-direction: column; }
}
@media (max-width: 575px) {
.story-media img{aspect-ratio: auto;}
.about-hero h1{font-size: 30px;line-height: 36px;margin-bottom: 15px;}
.story-grid{gap: 30px;}
.mission-vision-col h3 { font-size: 20px; margin-bottom: 15px;}
.mission-vision-col { border-top: 1px solid rgba(255, 255, 255, 0.1);  padding: 20px 0; }
.mission-vision-col:first-child { border-top: none; }
.leader-grid { grid-template-columns: auto;}
.leader-photo img{aspect-ratio: auto;}
.synaptic-way-grid {gap: 30px;}
.edge-card {min-height: 245px;}
.edge-hubs-globe{width:auto;}
.edge-hubs {gap: 30px;}
}