/* ============================================================
   IZYSCO — About Us Page Styles v1.0
   Extends style.css + additions.css design tokens.
   Sections: breadcrumb hero, snapshot, trust pillars, CEO message,
   org structure, parent trust, vision/mission, global impact.
   ============================================================ */

/* ── Signature font (CEO digital signature) ─────────────── */
.ceo-sign {
  font-family: 'Allura', cursive;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--t1);
  display: inline-block;
}
.ceo-sign em { color: var(--red2); font-style: normal; }

/* ── Section background rhythm ──────────────────────────── */
#about-hero     { background: var(--bg); }
#who-we-are     { background: var(--bg2); padding: 6rem 0 7rem; }
#trust-pillars  { background: var(--bg);  padding: 7rem 0; }
#ceo-message    { background: var(--bg2); padding: 7rem 0; }
#org-structure  { background: var(--bg);  padding: 7rem 0; }
#parent-trust   { background: var(--bg2); padding: 7rem 0; }
#vision-mission { background: var(--bg);  padding: 7rem 0; }
#global-impact  { background: var(--bg2); padding: 7rem 0; }

/* ============================================================
   ABOUT HERO
   ============================================================ */
#about-hero {
  position: relative;
  padding: 9.5rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 55% at 50% -10%, rgba(232,41,28,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 95% 90%,  rgba(41,121,255,0.12) 0%, transparent 70%),
    var(--bg);
}
.about-crumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--t2); font-weight: 500;
  margin-bottom: 1.6rem;
}
.about-crumb a { color: var(--t2); transition: color 0.25s; }
.about-crumb a:hover { color: var(--red2); }
.about-crumb i { font-size: 0.85rem; color: var(--t3); }
.about-crumb .here { color: var(--t1); font-weight: 600; }

.about-hero-inner { max-width: 760px; position: relative; z-index: 1; }
.about-hero-inner h1 { margin-bottom: 1.3rem; }
.about-hero-inner h1 em { font-style: normal; color: var(--red2); }
.about-hero-inner h1 .b { font-style: normal; color: var(--blue2); }
.about-hero-desc {
  font-size: 1.08rem; color: var(--t2); max-width: 640px;
  margin-bottom: 2.4rem; line-height: 1.85;
}
.about-hero-desc strong { color: var(--t1); }

.about-hero-chips {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
}
.ah-chip {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50px; padding: 0.55rem 1.2rem 0.55rem 0.6rem;
  backdrop-filter: blur(12px);
}
.ah-chip .ah-ico {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.ah-chip .ah-ico.r { background: rgba(232,41,28,0.15); color: var(--red2); }
.ah-chip .ah-ico.b { background: rgba(41,121,255,0.15); color: var(--blue2); }
.ah-chip .ah-ico.g { background: rgba(255,208,96,0.15); color: var(--gold); }
.ah-chip .ah-ico.gr{ background: rgba(34,209,122,0.15); color: var(--green); }
.ah-chip strong { display: block; font-size: 0.88rem; color: var(--t1); font-weight: 700; }
.ah-chip span { font-size: 0.72rem; color: var(--t2); }

/* ── About Hero — two-column layout + 3D trust visual ───── */
.about-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.95fr;
  gap: 3rem; align-items: center;
}
.about-hero-inner { max-width: none; position: relative; z-index: 1; }
.about-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }

.ah3d-scene { width: 420px; height: 420px; position: relative; transform-style: preserve-3d; perspective: 800px; }
.ah3d-core {
  width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 35%, #1e1e3a, #06060F);
  border: 1px solid rgba(232,41,28,0.28);
  box-shadow: 0 0 60px rgba(232,41,28,0.22), 0 0 120px rgba(41,121,255,0.12), inset 0 0 40px rgba(232,41,28,0.08);
  display: flex; align-items: center; justify-content: center;
  animation: globe-breathe 5s ease-in-out infinite;
}
.ah3d-core-inner { text-align: center; }
.ah3d-core-inner i {
  font-size: 3.6rem; color: var(--red2);
  filter: drop-shadow(0 0 20px rgba(232,41,28,0.6));
  animation: globe-spin 8s linear infinite;
  display: block;
}
.ah3d-core-lbl {
  font-size: 0.68rem; color: var(--t2); margin-top: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
}
.ah3d-orbit {
  position: absolute; border-radius: 50%; border: 1px solid;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: ring-spin linear infinite;
}
.ah3d-orbit-1 { width: 280px; height: 280px; border-color: rgba(41,121,255,0.22); animation-duration: 14s; }
.ah3d-orbit-2 { width: 345px; height: 345px; border-color: rgba(255,208,96,0.15); animation-duration: 22s; animation-direction: reverse; }
.ah3d-orbit-3 { width: 410px; height: 410px; border-color: rgba(232,41,28,0.12); animation-duration: 32s; }
.ah3d-orbit-dot { width: 9px; height: 9px; border-radius: 50%; position: absolute; top: -4.5px; left: 50%; transform: translateX(-50%); }
.ah3d-orbit-1 .ah3d-orbit-dot { background: var(--blue2); box-shadow: 0 0 12px var(--blue2); }
.ah3d-orbit-2 .ah3d-orbit-dot { background: var(--gold);  box-shadow: 0 0 12px var(--gold); }
.ah3d-orbit-3 .ah3d-orbit-dot { background: var(--red2);  box-shadow: 0 0 12px var(--red2); }
.ah3d-fbadge {
  position: absolute; z-index: 10; background: rgba(13,13,28,0.85);
  border: 1px solid var(--border2); backdrop-filter: blur(16px);
  border-radius: var(--r); padding: 0.65rem 1rem; display: flex; align-items: center; gap: 0.6rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.ah3d-fbadge i { font-size: 1.3rem; color: var(--gold); }
.ah3d-fbadge .fbv { font-family: var(--ff-display); font-weight: 800; color: var(--t1); font-size: 0.86rem; display: block; line-height: 1.1; }
.ah3d-fbadge .fbl { font-size: 0.64rem; color: var(--t3); }
.ah3d-fb-1 { top: 2%;   right: -2%; animation: float1 5s ease-in-out infinite; }
.ah3d-fb-2 { bottom: 30%; left: -8%; animation: float2 6s ease-in-out infinite; }
.ah3d-fb-3 { bottom: 4%; right: 8%;  animation: float1 7s ease-in-out infinite 1s; }
.ah3d-fb-4 { top: 32%;  left: -10%; animation: float2 5.5s ease-in-out infinite 0.5s; }

@media (max-width: 1100px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-visual { display: none; }
}

/* ============================================================
   WHO WE ARE — Snapshot cards
   ============================================================ */
.snap-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem; align-items: center;
}
.snap-text p { font-size: 1.02rem; margin-bottom: 1.3rem; max-width: 540px; }
.snap-text p:last-child { margin-bottom: 0; }
.snap-text strong { color: var(--t1); }

.snap-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.snap-card {
  padding: 1.6rem 1.4rem; border-radius: var(--r2);
}
.snap-card .sc-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem; font-size: 1.3rem;
}
.snap-card h4 { font-size: 1rem; color: var(--t1); margin-bottom: 0.4rem; }
.snap-card p { font-size: 0.85rem; margin: 0; line-height: 1.6; }

/* ============================================================
   TRUST PILLARS (Student Success / Partnerships / Global / Support)
   ============================================================ */
.pillars-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
.pillar-card {
  padding: 2.2rem 1.8rem; border-radius: var(--r2);
  text-align: left;
}
.pillar-card .icon-box { margin-bottom: 1.4rem; }
.pillar-card h3 { font-size: 1.15rem; margin-bottom: 0.7rem; color: var(--t1); }
.pillar-card p { font-size: 0.88rem; margin: 0; }

/* ============================================================
   CEO MESSAGE
   ============================================================ */
.ceo-grid {
  display: grid; grid-template-columns: 0.85fr 1.4fr;
  gap: 3.5rem; align-items: start;
}

/* Photo card */
.ceo-photo-wrap {
  position: relative;
  border-radius: var(--r3);
  padding: 3px;
  background: linear-gradient(160deg, var(--red) 0%, var(--blue2) 55%, var(--gold) 100%);
  box-shadow: var(--sh-card);
}
.ceo-photo-glow {
  position: absolute; inset: -40px;
  border-radius: var(--r3);
  background: radial-gradient(circle at 50% 30%, rgba(232,41,28,0.35), transparent 60%);
  filter: blur(40px);
  opacity: 0.6;
  z-index: -1;
  animation: spotlight-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spotlight-pulse {
  0%,100% { opacity: 0.45; transform: scale(1); }
  50%     { opacity: 0.75; transform: scale(1.08); }
}
.ceo-photo-inner {
  position: relative;
  border-radius: calc(var(--r3) - 3px);
  overflow: hidden;
  background: var(--bg3);
}
.ceo-photo-inner img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.ceo-photo-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,15,0.85) 0%, transparent 38%);
}
.ceo-badge {
  position: absolute; left: 1.4rem; bottom: 1.4rem; right: 1.4rem;
  z-index: 2; display: flex; align-items: center; justify-content: space-between;
}
.ceo-badge-name { color: #fff; }
.ceo-badge-name strong { display: block; font-family: var(--ff-display); font-size: 1.15rem; }
.ceo-badge-name span { font-size: 0.72rem; color: var(--blue2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ceo-pin {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--g-red); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff; box-shadow: var(--sh-red); flex-shrink: 0;
}
.ceo-quote-mark {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
  font-family: var(--ff-display); font-size: 3.5rem; line-height: 1;
  color: rgba(255,255,255,0.22);
}

/* Message card */
.ceo-msg-card { padding: 2.6rem 2.8rem; }
.ceo-msg-pull {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.25rem,2vw,1.6rem); line-height: 1.4;
  color: var(--t1); margin: 0 0 1.8rem;
  padding-left: 1.4rem; border-left: 3px solid var(--red2);
}
.ceo-msg-pull em { color: var(--red2); font-style: normal; }
.ceo-msg-body p { font-size: 0.98rem; margin-bottom: 1.15rem; }
.ceo-msg-body p:last-child { margin-bottom: 0; }
.ceo-msg-body strong { color: var(--t1); }
.ceo-sign-row {
  display: flex; align-items: center; gap: 1.2rem;
  margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--border);
}
.ceo-sign-info strong { display: block; color: var(--t1); font-size: 0.98rem; }
.ceo-sign-info span { font-size: 0.78rem; color: var(--t2); }

/* ============================================================
   ORGANIZATION STRUCTURE — Interactive chart
   ============================================================ */
.org-chart { max-width: 980px; margin: 0 auto; position: relative; }

.org-node {
  width: fit-content; margin: 0 auto;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.9rem; border-radius: 50px;
  position: relative; z-index: 2;
}
.org-node .on-ico {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.org-node strong { display: block; color: var(--t1); font-size: 0.98rem; }
.org-node span { font-size: 0.74rem; color: var(--t2); }
.org-node.top    .on-ico { background: var(--g-gold); color: #1a1305; box-shadow: 0 0 24px rgba(255,208,96,0.45); }
.org-node.exec   .on-ico { background: var(--g-blue); color: #fff; box-shadow: 0 0 24px rgba(41,121,255,0.4); }
.org-node.bottom .on-ico { background: var(--g-red);  color: #fff; box-shadow: 0 0 24px rgba(232,41,28,0.4); }

/* Vertical connector with animated flow dot */
.org-link {
  width: 2px; height: 3rem; margin: 0 auto;
  background: linear-gradient(to bottom, var(--gold), var(--blue2));
  position: relative; z-index: 1;
}
.org-link.b2 { background: linear-gradient(to bottom, var(--blue2), var(--red2)); }
.org-link span {
  position: absolute; left: 50%; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  animation: org-flow 2.2s linear infinite;
}
@keyframes org-flow {
  0%   { top: -4px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}

/* Branch bus + departments */
.org-bus-wrap { position: relative; padding-top: 1px; }
.org-bus {
  position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(to right, transparent, var(--border2) 10%, var(--border2) 90%, transparent);
}
.org-departments {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2.6rem 1.6rem; padding-top: 2.4rem; position: relative;
}
.org-dept {
  position: relative; padding: 1.6rem 1.4rem; border-radius: var(--r2);
  text-align: center;
}
.org-dept::before {
  content: ''; position: absolute; top: -2.4rem; left: 50%;
  width: 2px; height: 2.4rem; transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--border2), var(--border));
}
.org-dept .od-ico {
  width: 50px; height: 50px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 1rem;
}
.org-dept h4 { font-size: 0.92rem; color: var(--t1); margin-bottom: 0.4rem; line-height: 1.35; }
.org-dept p { font-size: 0.78rem; margin: 0; line-height: 1.55; }

.org-converge { display: flex; flex-direction: column; align-items: center; margin-top: 0.5rem; }
.org-converge .org-link { height: 3.2rem; background: linear-gradient(to bottom, var(--border2), var(--green)); }
.org-converge i { font-size: 1.3rem; color: var(--green); margin-top: -0.3rem; }

/* ============================================================
   PARENT TRUST
   ============================================================ */
.ptrust-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem; align-items: start;
}
.ptrust-list { display: flex; flex-direction: column; gap: 1rem; }
.ptrust-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.4rem; border-radius: var(--r);
}
.ptrust-row .pr-check {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,209,122,0.14); border: 1px solid rgba(34,209,122,0.32);
  color: var(--green); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-top: 2px;
}
.ptrust-row h4 { font-size: 0.95rem; color: var(--t1); margin-bottom: 0.25rem; }
.ptrust-row p { font-size: 0.82rem; margin: 0; }

.ptrust-panel-wrap { position: relative; position: sticky; top: 100px; }
.ptrust-glow {
  position: absolute; inset: -30px; border-radius: var(--r3);
  background: radial-gradient(circle at 50% 20%, rgba(255,208,96,0.28), transparent 65%);
  filter: blur(36px); opacity: 0.55; z-index: -1; pointer-events: none;
  animation: pp-glow-pulse 5s ease-in-out infinite;
}
@keyframes pp-glow-pulse { 0%,100% { opacity:0.4; transform:scale(1); } 50% { opacity:0.7; transform:scale(1.06); } }
.ptrust-panel {
  padding: 2.4rem 2.1rem 2rem; position: relative; overflow: visible;
  border: 1px solid rgba(255,208,96,0.22);
  background: linear-gradient(160deg, rgba(255,208,96,0.06), rgba(255,255,255,0.045) 40%);
}
.ptrust-panel::before {
  content: ''; position: absolute; top: 0; left: 2.1rem; right: 2.1rem; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--g-gold); box-shadow: 0 0 20px rgba(255,208,96,0.5);
}
.pp-seal {
  position: absolute; top: -22px; right: 2rem; width: 52px; height: 52px; border-radius: 50%;
  background: var(--g-gold); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #1a1300; box-shadow: 0 8px 26px rgba(255,208,96,0.55), 0 0 0 5px var(--bg2);
  transform: rotate(-8deg); transition: transform 0.4s var(--ease2, ease);
}
.ptrust-panel:hover .pp-seal { transform: rotate(2deg) scale(1.08); }
.ptrust-panel .pp-eyebrow { color: var(--gold); background: rgba(255,208,96,0.1); border-color: rgba(255,208,96,0.28); }
.ptrust-panel h3 { font-size: 1.32rem; color: var(--t1); margin-bottom: 0.5rem; }
.pp-sub { font-size: 0.83rem; color: var(--t3); margin-bottom: 1.8rem; }
.pp-commit { display: flex; flex-direction: column; gap: 0.7rem; }
.pp-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0.9rem; border-radius: var(--r);
  border: 1px solid transparent; transition: all 0.3s ease;
}
.pp-item:hover { background: rgba(255,255,255,0.045); border-color: var(--border); }
.pp-item .icon-box { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; }
.pp-item .icon-box i { font-size: 1.3rem; }
.pp-item:hover .icon-box { transform: rotate(-6deg) scale(1.08); }
.pp-text { display: flex; flex-direction: column; gap: 0.15rem; }
.pp-item .pp-num {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; color: var(--gold); line-height: 1.1;
}
.pp-item .pp-lbl { font-size: 0.82rem; color: var(--t2); line-height: 1.5; }
.pp-foot {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border); font-size: 0.74rem; color: var(--t3); font-style: italic;
}
.pp-foot i { color: var(--gold); font-size: 0.9rem; font-style: normal; }

/* ============================================================
   VISION & MISSION
   ============================================================ */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.vm-card {
  position: relative; padding: 2.6rem 2.4rem; border-radius: var(--r3);
  overflow: hidden;
}
.vm-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  filter: blur(50px); opacity: 0.3; z-index: 0;
}
.vm-card.vision::before { background: var(--gold); }
.vm-card.mission::before { background: var(--blue2); }
.vm-card .icon-box { margin-bottom: 1.6rem; position: relative; z-index: 1; }
.vm-card h3 { font-size: 1.1rem; color: var(--t2); font-weight: 600; margin-bottom: 1rem; position: relative; z-index: 1; }
.vm-card blockquote {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.15rem,1.8vw,1.42rem); line-height: 1.5;
  color: var(--t1); margin: 0; position: relative; z-index: 1;
}

/* ============================================================
   GLOBAL IMPACT
   ============================================================ */
.impact-grid {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 1.2rem;
}
.impact-card {
  padding: 2rem 1.2rem; border-radius: var(--r2); text-align: center;
}
.impact-card .imp-val {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1; margin-bottom: 0.5rem;
}
.impact-card .imp-val.r { color: var(--red2); }
.impact-card .imp-val.b { color: var(--blue2); }
.impact-card .imp-val.g { color: var(--gold); }
.impact-card .imp-val.gr{ color: var(--green); }
.impact-card .imp-lbl { font-size: 0.8rem; color: var(--t2); line-height: 1.4; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
  .snap-grid { grid-template-columns: 1fr; }
  .ceo-grid { grid-template-columns: 1fr; }
  .ceo-photo-wrap { max-width: 360px; margin: 0 auto; }
  .pillars-grid { grid-template-columns: repeat(2,1fr); }
  .impact-grid { grid-template-columns: repeat(3,1fr); }
  .ptrust-grid { grid-template-columns: 1fr; }
  .ptrust-panel-wrap { position: static; }
}
@media(max-width:900px) {
  .org-departments { grid-template-columns: repeat(2,1fr); }
  .vm-grid { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .about-hero-chips { gap: 0.6rem; }
  .snap-cards { grid-template-columns: 1fr 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .ceo-msg-card { padding: 2rem 1.4rem; }
  .org-departments { grid-template-columns: 1fr; gap: 2.2rem; }
  .org-bus { display: none; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .org-node { padding: 0.9rem 1.4rem; }
}
@media(max-width:440px) {
  .snap-cards { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .ceo-sign-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}