/* ==========================================================
   About page — extra styles layered on top of index.css
   (index.css provides the shared design: header, hero look,
   cards, buttons, footer, reveal animations)
   ========================================================== */

/* ===== Page banner (same look as the homepage hero) ===== */
.banner{position:relative;color:#fff;background:linear-gradient(135deg,#061a35 0%,#0d2d57 55%,#17609a 100%);overflow:hidden;isolation:isolate;min-height:440px;display:flex;align-items:center;padding-bottom:60px}
.banner::before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(135deg,#061a35 0%,#0d2d57 55%,#17609a 100%)}
.banner.has-photo::before{background:linear-gradient(135deg,rgba(7,30,61,.55),rgba(7,30,61,.2)),var(--photo) center/cover no-repeat;animation:kenburns 12s ease-out both}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(60% 70% at 85% 30%,rgba(79,163,220,.28),transparent 70%),
   radial-gradient(40% 50% at 10% 100%,rgba(255,138,42,.16),transparent 70%),
   linear-gradient(90deg,rgba(7,30,61,.86) 0%,rgba(7,30,61,.55) 55%,rgba(7,30,61,.1) 100%)}
.banner .art{position:absolute;right:-30px;bottom:30px;width:min(640px,60%);opacity:.95;z-index:-2;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35));animation:float 9s ease-in-out infinite}
.banner .wrap{position:relative}
.banner .content{max-width:660px;padding-block:70px 40px;animation:bannerIn .9s var(--ease) both}
@keyframes bannerIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.banner .eyebrow{color:var(--signal)}
.banner h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:18px}
.banner .banner-text{font-size:1.15rem;color:#cfe0f1;max-width:54ch}
.crumbs{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);font-size:.84rem;color:#d6e6f5}
.crumbs a{text-decoration:none;color:#fff;font-weight:600}
.crumbs a:hover{color:var(--signal)}
.crumbs span{opacity:.55}
.banner .hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:2;color:#fff;pointer-events:none}
.banner .hero-wave svg{width:100%;height:100%}

/* ===== Story ===== */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.story p{color:var(--muted)}
.story p+p{margin-top:16px}
.story .tagline{margin-top:28px;padding:6px 0 6px 20px;border-left:4px solid var(--signal);font-family:var(--head);font-weight:600;color:var(--navy);font-size:1.12rem;line-height:1.45;position:relative}
.story .tagline::after{content:"";position:absolute;left:-4px;top:0;width:4px;height:0;background:var(--sea);transition:height 1.1s var(--ease) .5s}
.in .tagline::after{height:100%}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.panel .row b{display:block;font-family:var(--head);font-size:1.25rem;color:#fff;line-height:1.2;margin-bottom:4px}
.panel .row span{color:#b9d0e6;font-size:.92rem}

/* ===== Mission & vision ===== */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:52px}
.mv article{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:42px 38px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mv article::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--signal),#ffa24f)}
.mv article:last-child::before{background:linear-gradient(90deg,var(--sea),var(--sea-l))}
.mv article::after{content:"";position:absolute;width:220px;height:220px;right:-90px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,42,.14),transparent 70%)}
.mv article:last-child::after{background:radial-gradient(circle,rgba(31,122,184,.16),transparent 70%)}
.mv article:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.mv-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;margin-bottom:24px;background:var(--signal-soft);position:relative;z-index:1}
.mv-icon.alt{background:var(--sky)}
.mv-icon svg{width:32px;height:32px;fill:none;stroke:var(--signal-d);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv-icon.alt svg{stroke:var(--sea)}
.js .mv-icon svg *{stroke-dasharray:1;stroke-dashoffset:1}
.js .in .mv-icon svg *{animation:drawIcon 1.4s ease forwards .5s}
.mv h3{font-size:1.5rem;margin-bottom:12px;position:relative;z-index:1}
.mv p{color:var(--muted);position:relative;z-index:1}

/* ===== Values (cards reuse the homepage "why" card style) ===== */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}

/* ===== Team ===== */
.team-note{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.team-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--signal),var(--sea))}
.team-note svg{width:110px;height:auto;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(7,30,61,.18))}
.team-note p{color:var(--muted);max-width:68ch;font-size:1.02rem}

/* ===== Band buttons ===== */
.band .actions{display:flex;gap:14px;flex-wrap:wrap}

/* ===== Directional reveal (slide in from left / right) ===== */
.js .reveal.rl{transform:translateX(-56px)}
.js .reveal.rr{transform:translateX(56px)}
.js .reveal.rl.in,.js .reveal.rr.in{transform:none}

/* facts bar sits on the banner edge, like the homepage */
.banner + .facts{margin-top:-34px}

/* ===== Responsive ===== */
@media (max-width:1020px){
  .story{grid-template-columns:1fr;gap:44px}
  .values{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .banner{min-height:380px}
  .banner .content{padding-block:50px 30px}
  .mv{grid-template-columns:1fr}
  .mv article{padding:32px 26px}
  .values{grid-template-columns:1fr}
  .team-note{grid-template-columns:1fr;padding:28px;text-align:left}
  .panel .row{grid-template-columns:1fr}
  .js .reveal.rl,.js .reveal.rr{transform:translateY(30px)}
  .js .reveal.rl.in,.js .reveal.rr.in{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .banner .content{animation:none}
  .js .mv-icon svg *{stroke-dashoffset:0}
  .story .tagline::after{height:100%}
}

/* ===== Fixes ===== */
.fact b .count{display:inline;margin:0;font-size:inherit;color:inherit;line-height:inherit}
.story .panel p{color:#c4d8ec}
.crumbs{display:flex;width:fit-content}
@media (max-width:860px){.banner .art{width:100%;right:-20%;opacity:.22}}