/* ==========================================================
   About / Developer page — builds on cinematic-hero.css + home-lively.css
   ========================================================== */

/* ---------- Top menu bar (replaces the page banner) ---------- */
.ab-topbar { position: relative; z-index: 20; background: #121a14; padding: .9rem clamp(1rem, 4vw, 3.5rem); box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
.ab-topbar nav { margin-top: 0 !important; }
.ab-topbar #logo { color: #fff !important; }
.ab-topbar + .cp-home .cp-intro { padding-top: clamp(3.5rem, 7vw, 6rem); }

/* ---------- Page hero (a shorter cinematic hero, not currently used) ---------- */
.cine-hero--page { height: 80vh; height: 80svh; min-height: 560px; }
.cine-hero--page .cine-content { max-width: 980px; }
.cine-hero--page .cine-title { font-size: clamp(2.8rem, 7vw, 6.2rem) !important; }
.cine-hero--page .cine-slide img { animation-duration: 18s !important; }
.ab-crumbs a { color: inherit; text-decoration: none; opacity: .75; transition: opacity .3s; }
.ab-crumbs a:hover { opacity: 1; }
.ab-crumbs span { opacity: .5; margin: 0 .5rem; }

/* ---------- Intro: location chips ---------- */
.ab-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.2rem; padding: 0; list-style: none; }
.ab-chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(18,26,20,.1);
  font-size: .82rem; color: var(--cp-ink);
  transition: transform .4s var(--cp-ease), border-color .3s, box-shadow .4s;
}
.ab-chips li i { color: var(--cp-green); font-size: 1rem; }
.ab-chips li:hover { transform: translateY(-3px); border-color: var(--cp-green); box-shadow: 0 12px 24px -14px rgba(18,26,20,.4); }
.ab-intro-visual .cp-intro-main { aspect-ratio: 5 / 6; }

/* ---------- Expertise (reuses .cp-stats band) ---------- */
.ab-expertise .cp-lead { color: rgba(255,255,255,.72); max-width: 44rem; }
.ab-expertise .cp-stat-num { font-size: 2.6rem; }
.ab-expertise .cp-stat { position: relative; overflow: hidden; }
.ab-expertise .cp-stat::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cp-gold-soft), var(--cp-green));
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--cp-ease);
}
.ab-expertise .cp-stat:hover::after { transform: scaleX(1); }

/* ---------- Vision & Mission ---------- */
.ab-vm { padding: clamp(5rem, 10vw, 8rem) 0; position: relative; }
.ab-vm-head { text-align: center; max-width: 46rem; margin: 0 auto 3.5rem; }
.ab-vm-head .cp-eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: currentColor; }
.ab-vm-head .cp-lead { margin-left: auto; margin-right: auto; }
.ab-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.ab-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 4vw, 3.2rem); border-radius: 28px; min-height: 22rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .7s var(--cp-ease), box-shadow .7s var(--cp-ease);
}
.ab-card:hover { transform: translateY(-10px); }
.ab-card--vision { background: #fff; color: var(--cp-ink); box-shadow: 0 30px 60px -40px rgba(18,26,20,.45); }
.ab-card--mission { background: linear-gradient(140deg, #0f3b25, #121a14); color: #fff; box-shadow: 0 30px 60px -35px rgba(15,59,37,.8); }
.ab-card:hover.ab-card--vision { box-shadow: 0 40px 70px -35px rgba(18,26,20,.5); }
.ab-card-no { position: absolute; top: 1.2rem; right: 1.8rem; z-index: -1; font-family: var(--cp-serif); font-size: 9rem; line-height: 1; opacity: .08; transition: transform 1s var(--cp-ease), opacity .6s; }
.ab-card:hover .ab-card-no { transform: translateY(-10px) scale(1.06); opacity: .14; }
.ab-card-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 18px; font-size: 1.8rem; margin-bottom: auto; transition: transform .7s var(--cp-ease); }
.ab-card:hover .ab-card-icon { transform: rotate(-8deg) scale(1.08); }
.ab-card--vision .ab-card-icon { background: rgba(200,164,93,.16); color: var(--cp-gold); }
.ab-card--mission .ab-card-icon { background: rgba(134,169,0,.2); color: #b8d64a; }
.ab-card h3 { font-family: var(--cp-serif) !important; font-size: clamp(2rem, 3.4vw, 2.8rem) !important; font-weight: 400; margin: 2.5rem 0 .8rem; color: inherit; }
.ab-card p { line-height: 1.85; font-weight: 300; margin: 0; max-width: 32rem; }
.ab-card--vision p { color: var(--cp-muted); }
.ab-card--mission p { color: rgba(255,255,255,.78); }
.ab-card .cp-btr-ring { left: auto; right: -12rem; bottom: -18rem; border-color: rgba(233,216,166,.16); }

.ab-values { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.5rem; margin-top: 3rem; padding: 0; list-style: none; }
.ab-values li { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--cp-serif); font-size: 1.45rem; font-style: italic; color: var(--cp-ink); }
.ab-values li i { font-style: normal; font-size: 1.1rem; color: var(--cp-gold); }

/* ---------- Leadership ---------- */
.ab-leader { padding: clamp(5rem, 10vw, 8rem) 0; background: var(--cp-sand); position: relative; overflow: hidden; }
.ab-leader::before { content: ""; position: absolute; width: 40rem; height: 40rem; left: -16rem; bottom: -20rem; border-radius: 50%; background: radial-gradient(circle, rgba(134,169,0,.14), rgba(134,169,0,0) 65%); pointer-events: none; }
.ab-portrait { position: relative; max-width: 30rem; margin: 0 auto; padding: 0 2rem 2rem 0; }
.ab-portrait-frame { position: absolute; inset: 2rem 0 0 2rem; border: 1px solid var(--cp-gold); border-radius: 28px; transform: translate(-1.5rem, -1.5rem); opacity: 0; transition: transform 1.4s var(--cp-ease) .4s, opacity 1s ease .4s; }
.ab-portrait.is-in .ab-portrait-frame { transform: none; opacity: 1; }
.ab-portrait .cp-wipe { position: relative; z-index: 1; border-radius: 28px; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(18,26,20,.6); }
.ab-portrait .cp-wipe img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ab-ring { position: absolute; z-index: 2; right: -.5rem; bottom: 0; width: 9.5rem; height: 9.5rem; border-radius: 50%; background: var(--cp-ink); color: var(--cp-gold-soft); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.ab-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cp-spin 22s linear infinite; }
.ab-ring text { font-family: 'Poppins', sans-serif; font-size: 8.6px; letter-spacing: 2.6px; text-transform: uppercase; fill: currentColor; }
.ab-ring i { font-size: 1.9rem; color: #fff; }
.ab-role { display: inline-block; padding: .4rem 1rem; border-radius: 999px; background: var(--cp-ink); color: var(--cp-gold-soft); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.6rem; }
.ab-leader .cp-heading { margin-bottom: .8rem !important; }
.ab-leader-lead { font-family: var(--cp-serif); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.5; color: var(--cp-ink); border-left: 2px solid var(--cp-gold); padding-left: 1.4rem; margin: 0 0 1.6rem; }
.ab-leader p.cp-lead { max-width: 38rem; margin-bottom: 1.2rem; }
.ab-leader .cp-btn { margin-top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .ab-vm-grid { grid-template-columns: 1fr; }
  .ab-portrait { max-width: 26rem; }
}
@media (max-width: 768px) {
  .cine-hero--page { height: 70svh; min-height: 500px; }
  .cine-hero--page .cine-content { bottom: 3rem; }
  .ab-card { min-height: 18rem; }
  .ab-card-no { font-size: 6rem; }
  .ab-ring { width: 7.5rem; height: 7.5rem; right: 0; }
  .ab-ring text { font-size: 8.2px; letter-spacing: 2px; }
  .ab-values li { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-ring svg { animation: none; }
  .ab-portrait-frame { transition: none; opacity: 1; transform: none; }
}