/* =========================================================
   ABOUT.CSS — About Us page-only enhancements, layered on
   main.css + home.css. Loaded by about.html only.
   ========================================================= */

/* ---------- Hero background swap ---------- */
.hero.hero-about{ background-image: url("../images/about-team.jpg"); }

/* ---------- Glassmorphism collaboration illustration ---------- */
.glass-card{
  background: rgba(22,32,58,.55); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  transition: box-shadow .4s var(--ease), border-color .4s;
}
.glass-card:hover{ border-color: var(--teal); box-shadow: 0 30px 60px -20px rgba(10,154,144,.35); }

/* Badges and the collab card are laid out as ordered flex children
   (not absolutely positioned) — fc-a above, the card in the middle,
   fc-b below, each with its own gap. That makes it structurally
   impossible for their boxes to intersect at any viewport width,
   while the bob animation (a transform, which never affects layout)
   still gives them a "floating" feel. */
.collab-illustration{ position:relative; display:flex; flex-direction:column; gap:22px; }
.collab-illustration .collab-card{ order:2; }
.collab-illustration .fc-a{ order:1; align-self:flex-end; }
.collab-illustration .fc-b{ order:3; align-self:flex-start; margin-left:8px; }
.collab-card{ padding: 40px 26px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.collab-node{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; flex:1; }
.collab-avatar{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background: rgba(10,154,144,.22); color: var(--teal-light); font-size:1.5rem; }
.collab-avatar.gold{ background: var(--teal); color: var(--ink); }
.collab-node strong{ color: var(--paper); font-family: var(--f-display); font-size:1rem; font-weight:600; }
.collab-node span{ color: rgba(247,245,240,.55); font-size:.78rem; }
.collab-link{ display:flex; gap:7px; flex:0 0 auto; }
.collab-dot{ width:6px; height:6px; border-radius:50%; background: var(--teal); animation: collabPulse 1.4s infinite; }
.collab-dot:nth-child(2){ animation-delay:.2s; }
.collab-dot:nth-child(3){ animation-delay:.4s; }
@keyframes collabPulse{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

/* Fixed width + no-wrap label keeps these corner badges a consistent,
   predictable size across every viewport. */
.collab-illustration .float-card.fc-sm{ width:230px; }
.collab-illustration .float-card.fc-sm .fc-label{ white-space:nowrap; }
.collab-illustration .fc-a{ animation-delay:.4s; }
.collab-illustration .fc-b{ animation-delay:1s; }
@media (max-width: 560px){
  .collab-illustration .fc-a, .collab-illustration .fc-b{ align-self:center; width:auto; margin-left:0; }
}

/* ---------- Image reveal on scroll (Our Story) ---------- */
.img-reveal{ position:relative; overflow:hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.img-reveal img{ display:block; width:100%; height:100%; object-fit:cover; transform: scale(1.18); transition: transform 1.2s var(--ease); }
.img-reveal::after{
  content:""; position:absolute; inset:0; background: var(--ink); transform-origin:right; z-index:1;
  transition: transform 1s var(--ease);
}
.img-reveal.in-view::after{ transform: scaleX(0); }
.img-reveal.in-view img{ transform: scale(1); }

/* ---------- Mission / Vision glass panels (on dark section) ---------- */
.mv-card{
  background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  padding: 38px 34px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.mv-card:hover{ transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 30px 60px -20px rgba(10,154,144,.3); }
.mv-card .icon{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background: rgba(10,154,144,.16); color: var(--teal); font-size:1.3rem; margin-bottom:22px; transition: transform .5s var(--ease); }
.mv-card:hover .icon{ transform: scale(1.12) rotate(-6deg); }
.mv-card h3{ color: var(--paper); }
.mv-card p{ color: rgba(247,245,240,.65); margin:0; }

/* ---------- Before / After comparison ---------- */
.compare-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:26px; }
@media (max-width: 760px){ .compare-grid{ grid-template-columns: 1fr; } }
.compare-card{ border-radius: var(--radius-lg); padding: 34px 30px; }
.compare-card h3{ display:flex; align-items:center; gap:.5em; margin-bottom:1.1em; }
.compare-card ul{ display:grid; gap:14px; }
.compare-card li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; }
.compare-before{ background: var(--paper-dim); border: 1px solid var(--rule); }
.compare-before h3{ color: var(--slate); }
.compare-before i{ color:#C0392B; margin-top:4px; }
.compare-after{
  background: var(--ink); color: rgba(247,245,240,.85); position:relative; overflow:hidden;
  box-shadow: var(--shadow-lift); transform: scale(1.02);
}
.compare-after::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 90% 0%, rgba(10,154,144,.22), transparent 60%); pointer-events:none; }
.compare-after h3{ color: var(--paper); position:relative; }
.compare-after ul{ position:relative; }
.compare-after i{ color: var(--teal); margin-top:4px; }
@media (max-width: 760px){ .compare-after{ transform:none; } }

/* ---------- Gold-border hover cards (Core Values) ---------- */
.card-gold{ transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.card-gold:hover{ transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 24px 48px -20px rgba(10,154,144,.3); }
.card-gold .icon{ transition: transform .5s var(--ease), background .3s, color .3s; }
.card-gold:hover .icon{ transform: rotate(8deg) scale(1.1); background: var(--teal-deep); color:#fff; }