/* ============================================================
   Mind Theory — About page stylesheet (about.css)
   Loads after home.css and reuses its design tokens (colors,
   shadows, radii, easing, nav/section/footer classes).
   Only page-specific rules live here — self-contained, does not
   modify home.css, styles.css or script.js.
   ============================================================ */

/* ---------------- HERO ---------------- */
.mta-hero{
  background:radial-gradient(120% 100% at 82% 0%, #EAF2FE 0%, #F6F9FF 45%, #FFFFFF 78%);
  overflow:hidden;
}
.mta-hero-inner{
  padding:clamp(52px, 8vw, 84px) 0 clamp(56px, 9vw, 100px);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px, 5vw, 56px); align-items:center;
}
.mta-hero-title{
  font-size:clamp(2.5rem, 1.8rem + 2.8vw, 3.6rem);
  line-height:1.1; font-weight:800; margin:16px 0 12px; color:var(--navy-2);
}
.mta-accent{ color:var(--blue); }
.mta-hero-tagline{
  font-size:1.28rem; font-weight:700; color:var(--text-head); margin:0 0 16px; line-height:1.4;
}
.mta-hero-desc{
  font-size:1.08rem; color:var(--text-body); line-height:1.7; max-width:480px; margin:0 0 26px;
}
.mta-thanks{
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,#0D2158,var(--navy-2)); color:#fff;
  font-weight:700; font-size:.95rem; padding:13px 22px; border-radius:999px;
  box-shadow:var(--shadow-sm);
}

.mta-hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.mta-hero-art::before{
  content:''; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #DCEAFB 0%, transparent 72%); z-index:0;
}
.mta-hero-art img{
  position:relative; z-index:1; height:clamp(240px, 32vw, 360px); width:auto;
  filter:drop-shadow(0 18px 26px rgba(20,30,70,.16));
  animation:mtaFloat 7s ease-in-out infinite;
}
@keyframes mtaFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.mta-bubble{
  position:absolute; top:6%; left:6%; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border-radius:16px 16px 4px 16px; padding:10px 16px;
  font-weight:700; font-size:.88rem; color:var(--pink-deep);
  box-shadow:var(--shadow-sm); transform:rotate(-3deg);
}
@media (max-width:900px){
  .mta-hero-inner{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .mta-hero-art{ order:-1; }
  .mta-hero-desc{ margin-left:auto; margin-right:auto; }
  .mta-hero .mt-eyebrow{ justify-content:center; }
  .mta-bubble{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .mta-hero-art img{ animation:none; } }

/* ---------------- ICON CHIP (shared) ---------------- */
.mta-icon{
  width:56px; height:56px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.mta-icon--blue{ background:var(--card-blue-bg); }
.mta-icon--pink{ background:var(--card-pink-bg); }
.mta-icon--orange{ background:var(--card-orange-bg); }
.mta-icon--green{ background:#E4F5EF; }

/* ---------------- MISSION + VALUES ---------------- */
.mta-mv-grid{
  display:grid; grid-template-columns:0.85fr 2fr; gap:28px; align-items:stretch;
}
@media (max-width:960px){ .mta-mv-grid{ grid-template-columns:minmax(0,1fr); } }

.mta-mission{ display:flex; flex-direction:column; gap:16px; }
.mta-mission h2{ font-size:1.4rem; letter-spacing:-.01em; }
.mta-mission p{ font-size:1rem; color:var(--text-body); line-height:1.65; margin:0; }

.mta-values-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-xl);
  padding:clamp(24px,3vw,32px); box-shadow:var(--shadow-xs);
}
.mta-values-heading{ font-size:1.4rem; margin-bottom:22px; letter-spacing:-.01em; }
.mta-values-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.mta-value{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:4px 16px; border-left:1px solid var(--border-soft);
}
.mta-value:first-child{ border-left:none; padding-left:4px; }
.mta-value b{ font-family:var(--font-head); font-size:1.02rem; color:var(--text-head); letter-spacing:-.005em; }
.mta-value span{ font-size:.88rem; color:var(--text-body); line-height:1.5; }

@media (max-width:700px){
  .mta-values-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 8px; }
  .mta-value{ border-left:none; padding:0 8px; }
}

/* ---------------- WHAT YOU'LL FIND HERE ---------------- */
.mta-find-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
}
.mta-find{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:4px 24px; border-left:1px solid var(--border-soft);
}
.mta-find:first-child{ border-left:none; padding-left:4px; }
.mta-find b{ font-family:var(--font-head); font-size:1.06rem; color:var(--text-head); letter-spacing:-.005em; }
.mta-find span{ font-size:.9rem; color:var(--text-body); line-height:1.55; }

@media (max-width:900px){
  .mta-find-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
  .mta-find{ border-left:none; padding:0; }
}