/* ============================================================
   ABOUT.CSS — styles only used on about.html.
   Load after base.css.
   ============================================================ */

/* ============ ABOUT HERO ============ */
.about-hero{ padding: 60px 0 30px; background: linear-gradient(180deg, var(--sky), #fff 80%); position:relative; overflow:hidden;}
.about-hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
.about-hero h1{ font-size: clamp(32px,4.2vw,48px); font-weight:800; margin-top:12px; }
.about-hero p.lede{ margin-top:16px; font-size:16.5px; color: var(--muted); line-height:1.6; max-width:480px; }
.about-chip-row{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
.about-chip{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color: var(--navy); }
.about-chip svg{ width:18px; height:18px; color: var(--royal); }
.mascot-stage-sm{ height:360px; }

/* ============ OUR STORY ============ */
.story-section{ }
.story-grid{ position:relative; display:grid; grid-template-columns: 0.85fr 1.15fr; gap:54px; align-items:center; }
.story-note{ position:absolute; top:-46px; right:0; font-size:19px; line-height:1.25; text-align:right; color: var(--navy); z-index:2; }
.story-note .accent{ color: var(--royal); }
.story-note svg{ width:76px; height:11px; color: var(--royal); margin:3px 0 0 auto; display:block; }
@media (max-width: 900px){ .story-note{ display:none; } }
.story-visual{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow); height: 340px; }
.story-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-badges{ margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; }
.story-badge{ background: var(--sky); border:1px solid var(--line); border-radius: var(--radius-m); padding:16px 18px; flex:1; min-width:150px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.story-badge:hover{ transform: translateY(-4px); box-shadow: var(--shadow-s); }
.story-badge-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.story-badge-head svg{ width:17px; height:17px; color: var(--royal); flex-shrink:0; }
.story-badge b{ display:block; font-family:'Manrope'; font-size:14.5px; color: var(--navy); }
.story-badge span{ font-size:12.5px; color: var(--muted); }

/* ============ OUR VALUES ============ */
.values-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.values-quote{ font-size:19px; color: var(--royal); text-align:right; position:relative; max-width:280px; }
.values-quote svg{ width:100%; height:12px; color: var(--gold); margin-top:2px; }
.values-panel{ margin-top:26px; background: var(--sky-2); border:1px solid var(--line); border-radius: var(--radius-l); padding: 22px; }
.values-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.values-grid .value-card:nth-child(1){ transition-delay:0ms; }
.values-grid .value-card:nth-child(2){ transition-delay:70ms; }
.values-grid .value-card:nth-child(3){ transition-delay:140ms; }
.values-grid .value-card:nth-child(4){ transition-delay:210ms; }
.value-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-m); padding:22px 18px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.value-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-s); border-color:#c9d9f5; }
.value-card svg.icon{ width:24px; height:24px; color: var(--royal); margin-bottom:14px; }
.value-card h4{ font-size:15.5px; }
.value-card p{ font-size:13px; color: var(--muted); margin-top:7px; line-height:1.5; }

/* ============ THE TEAM ============ */
.team-grid{ margin-top:44px; display:grid; grid-template-columns: 0.78fr 1.22fr; gap: 36px; align-items:center; }
.team-photo{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow); height: 400px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-content{
  background: linear-gradient(155deg, var(--sky-2), var(--sky)); border:1px solid var(--line);
  border-radius: var(--radius-l); padding: 36px 30px; height: 400px; display:flex; flex-direction:column; justify-content:center;
}
.team-content h3{ font-size:24px; font-weight:800; }
.team-content p{ margin-top:12px; font-size:14.5px; color: var(--muted); line-height:1.6; }
.team-mini-grid{ margin-top:22px; display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.team-mini{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-s); padding:14px 12px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.team-mini:hover{ transform: translateY(-3px); box-shadow: var(--shadow-s); }
.team-mini-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.team-mini-icon{
  width:26px; height:26px; border-radius:50%; background: var(--sky-2); color: var(--royal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.team-mini-icon svg{ width:14px; height:14px; }
.team-mini b{ font-size:13.5px; color: var(--navy); }
.team-mini span{ font-size:12px; color: var(--muted); display:block; }

/* ============ RESPONSIVE (about only) ============ */
@media (max-width: 980px){
  .about-hero-grid, .story-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: 1fr; }
  .team-photo{ height: 260px; }
  .team-content{ height: auto; padding: 32px 26px; }
  .team-mini-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .values-grid{ grid-template-columns: 1fr; }
  .values-head-row{ flex-direction:column; align-items:flex-start; }
  .values-quote{ text-align:left; max-width:none; }
  .mascot-stage-sm{ height: 320px; }
}
@media (max-width: 420px){
  .mascot-stage-sm{ height: 260px; }
  .team-mini-grid{ grid-template-columns: 1fr; }
  .story-visual{ height: 220px; }
  .team-photo{ height: 200px; }
}