/* ============================================================
   about.css — styles specific to about.html
   Loaded in addition to styles.css
   ============================================================ */

/* ---- Page hero ---- */
.page-hero{padding:80px 0 90px;position:relative}
.about-hero{border-bottom:1px solid var(--line)}
.page-hero-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:80px;align-items:center}
@media (max-width:980px){.page-hero-grid{grid-template-columns:1fr;gap:56px}}
.page-hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px, 5.5vw, 64px);
  line-height:1.02;letter-spacing:-0.035em;
  margin-bottom:28px;color:var(--ink);
}
.page-hero-title em{font-style:italic;color:var(--accent);font-weight:300}
.page-hero-sub{
  font-size:18px;line-height:1.6;color:var(--ink-dim);
  max-width:580px;margin-bottom:36px;
}

.about-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.stat-block{
  background:var(--bg-1);padding:28px 24px;
  transition:background 0.2s;
}
.stat-block:hover{background:var(--bg-2)}
.stat-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.2em;
  text-transform:uppercase;margin-bottom:12px;
}
.stat-value{
  font-family:var(--display);font-weight:500;
  font-size:22px;letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:6px;line-height:1.1;
}
.stat-sub{font-size:12px;color:var(--ink-dim);line-height:1.4}

/* ---- Mission section ---- */
.about-mission{
  padding:110px 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
@media (max-width:768px){.about-mission{padding:72px 0}}
.mission-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start}
@media (max-width:980px){.mission-grid{grid-template-columns:1fr;gap:40px}}
.mission-lede{
  font-size:17px;line-height:1.65;color:var(--ink-dim);
  margin-bottom:24px;
}
.mission-pullquote{
  margin-top:40px;padding:32px 36px;
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg, rgba(79,240,194,0.04), transparent);
  position:relative;
}
.pullquote-mark{
  position:absolute;top:-8px;left:24px;
  font-family:var(--display);font-size:72px;line-height:1;
  color:var(--accent);opacity:0.5;font-weight:400;
}
.mission-pullquote p{
  font-family:var(--display);font-weight:400;
  font-size:22px;line-height:1.35;letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:16px;font-style:italic;
}
.pullquote-attr{
  font-family:var(--mono);font-size:11px;
  color:var(--ink-mute);letter-spacing:0.15em;
  text-transform:uppercase;
}

/* ---- Who we serve grid ---- */
.about-serve{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.about-serve{padding:72px 0}}
.serve-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
  margin-top:56px;
}
@media (max-width:980px){.serve-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:640px){.serve-grid{grid-template-columns:1fr}}
.serve-card{
  background:var(--bg-1);
  border:1px solid var(--line-bright);
  padding:32px 28px;
  position:relative;
  transition:all 0.25s ease;
}
.serve-card:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--bg-2)}
.serve-icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);color:var(--accent);
  background:rgba(79,240,194,0.05);
  margin-bottom:22px;border-radius:2px;
}
.serve-icon svg{width:22px;height:22px}
.serve-card h3{
  font-family:var(--display);font-weight:500;
  font-size:22px;line-height:1.2;letter-spacing:-0.02em;
  margin-bottom:12px;color:var(--ink);
}
.serve-card p{font-size:14px;color:var(--ink-dim);line-height:1.55;margin-bottom:20px}
.serve-tags{display:flex;flex-wrap:wrap;gap:6px}
.serve-tags span{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-dim);letter-spacing:0.1em;
  padding:4px 10px;border:1px solid var(--line);
  text-transform:uppercase;border-radius:2px;
}

/* ---- Values ---- */
.about-values{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-1);
}
@media (max-width:768px){.about-values{padding:72px 0}}
.values-grid{
  display:flex;flex-direction:column;
  margin-top:56px;max-width:960px;
}
.value-item{
  display:grid;grid-template-columns:120px 1fr;gap:48px;
  padding:36px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.value-item:last-child{border-bottom:none}
@media (max-width:768px){
  .value-item{grid-template-columns:1fr;gap:16px;padding:28px 0}
}
.value-num{
  font-family:var(--display);font-weight:300;
  font-size:72px;line-height:1;color:var(--accent);
  letter-spacing:-0.04em;opacity:0.9;
}
@media (max-width:768px){.value-num{font-size:40px}}
.value-content h3{
  font-family:var(--display);font-weight:500;
  font-size:26px;line-height:1.2;letter-spacing:-0.02em;
  margin-bottom:12px;color:var(--ink);
}
.value-content p{font-size:16px;color:var(--ink-dim);line-height:1.65;max-width:640px}

/* ---- Stack ---- */
.about-stack{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.about-stack{padding:72px 0}}
.stack-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:24px;
  margin-top:56px;
}
@media (max-width:768px){.stack-grid{grid-template-columns:1fr}}
.stack-item{
  border:1px solid var(--line-bright);
  background:linear-gradient(145deg, var(--bg-1), var(--bg-2));
  padding:36px 32px;
  position:relative;overflow:hidden;
}
.stack-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.stack-label{
  font-family:var(--mono);font-size:10px;
  color:var(--accent);letter-spacing:0.2em;
  text-transform:uppercase;margin-bottom:14px;
}
.stack-item h3{
  font-family:var(--display);font-weight:500;
  font-size:26px;letter-spacing:-0.02em;
  margin-bottom:14px;line-height:1.15;color:var(--ink);
}
.stack-item p{font-size:15px;color:var(--ink-dim);line-height:1.6;margin-bottom:20px}
.stack-meta{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;border-top:1px solid var(--line)}
.stack-meta span{
  font-family:var(--mono);font-size:11px;
  color:var(--ink);letter-spacing:0.08em;
  padding:5px 10px;
  background:rgba(79,240,194,0.06);
  border:1px solid rgba(79,240,194,0.25);
  border-radius:2px;
}

/* ---- Operators section ---- */
.about-operators{
  padding:110px 0;border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 800px 500px at 75% 40%, rgba(79,240,194,0.06), transparent 65%),
    var(--bg-1);
}
@media (max-width:768px){.about-operators{padding:72px 0}}
.operators-grid{
  display:grid;grid-template-columns:1.2fr 0.8fr;gap:80px;align-items:center;
}
@media (max-width:980px){.operators-grid{grid-template-columns:1fr;gap:56px}}
.operators-lede{
  font-size:18px;line-height:1.6;color:var(--ink-dim);
  margin-bottom:22px;
}
.operators-body{
  font-size:15px;line-height:1.65;color:var(--ink-dim);
  margin-bottom:18px;
}
.operators-signoff{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.signoff-line{
  width:60px;height:2px;background:var(--accent);
  margin-bottom:20px;
}
.signoff-text{
  font-family:var(--display);font-weight:500;
  font-size:20px;letter-spacing:-0.015em;
  color:var(--ink);line-height:1.3;
}
.signoff-text span{
  display:block;font-family:var(--mono);font-size:11px;
  color:var(--ink-mute);letter-spacing:0.2em;
  text-transform:uppercase;margin-top:6px;font-weight:400;
}

/* Idaho map card */
.operators-visual{display:flex;justify-content:center}
.map-card{
  width:100%;max-width:400px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-0));
  border:1px solid var(--line-bright);
  position:relative;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(79,240,194,0.15);
}
.map-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.map-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.25);
}
.map-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.2em;text-transform:uppercase;
}
.map-status{
  font-family:var(--mono);font-size:10px;
  color:var(--accent);letter-spacing:0.2em;
  display:flex;align-items:center;gap:8px;
}
.map-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);
  animation:pulse 2s infinite;
}
.map-inner{
  padding:24px;display:flex;justify-content:center;
  background:var(--bg-0);
  position:relative;
}
.idaho-map{width:100%;max-width:280px;height:auto}
.map-footer{
  display:flex;justify-content:space-between;
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,0.25);
}
.map-footer > div{display:flex;flex-direction:column;gap:4px}
.fkey{
  font-family:var(--mono);font-size:9px;
  color:var(--ink-mute);letter-spacing:0.2em;text-transform:uppercase;
}
.fval{
  font-family:var(--mono);font-size:11px;
  color:var(--ink);letter-spacing:0.05em;
}

/* ============================================================
   Credit Union highlighted card
   ============================================================ */
.serve-card-highlighted{
  border-color:var(--accent);
  background:linear-gradient(145deg, rgba(79,240,194,0.06), var(--bg-1));
  box-shadow:0 0 0 1px var(--accent), 0 20px 40px -15px rgba(79,240,194,0.2);
  position:relative;
}
.serve-card-highlighted:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--accent), 0 28px 50px -15px rgba(79,240,194,0.3);
}
.serve-flag{
  position:absolute;top:-10px;right:20px;
  background:var(--accent);color:var(--bg-0);
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:4px 10px;letter-spacing:0.15em;text-transform:uppercase;
  border-radius:2px;
}
.serve-card-highlighted .serve-icon{
  background:rgba(79,240,194,0.12);
}

/* ============================================================
   Founder Story — timeline
   ============================================================ */
.about-story{
  padding:120px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 600px at 20% 20%, rgba(255,77,109,0.04), transparent 60%),
    radial-gradient(ellipse 900px 600px at 80% 80%, rgba(79,240,194,0.07), transparent 60%),
    var(--bg-0);
  position:relative;overflow:hidden;
}
@media (max-width:768px){.about-story{padding:80px 0}}
.story-inner{max-width:920px;margin:0 auto}
.about-story .section-title{margin-bottom:56px}

.story-timeline{
  display:flex;flex-direction:column;
  gap:0;
  margin:0 auto;
}

.story-stage{
  background:linear-gradient(145deg, var(--bg-1), var(--bg-2));
  border:1px solid var(--line-bright);
  padding:40px 44px;
  position:relative;
  overflow:hidden;
}
@media (max-width:768px){.story-stage{padding:32px 26px}}

.story-stage-before{
  border-top:2px solid var(--crit);
  background:linear-gradient(145deg, rgba(255,77,109,0.04), var(--bg-1));
}
.story-stage-work{
  border-top:2px solid var(--warn);
  background:linear-gradient(145deg, rgba(255,138,92,0.04), var(--bg-1));
}
.story-stage-after{
  border-top:2px solid var(--accent);
  background:linear-gradient(145deg, rgba(79,240,194,0.08), var(--bg-1));
  box-shadow:0 0 0 1px var(--accent), 0 30px 60px -20px rgba(79,240,194,0.15);
}

.stage-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.25em;
  text-transform:uppercase;margin-bottom:14px;
}
.story-stage-before .stage-label{color:var(--crit)}
.story-stage-work .stage-label{color:var(--warn)}
.story-stage-after .stage-label{color:var(--accent)}

.story-stage h3{
  font-family:var(--display);font-weight:500;
  font-size:28px;line-height:1.2;letter-spacing:-0.025em;
  margin-bottom:14px;color:var(--ink);
}
.story-stage h3 em{font-style:italic;color:var(--accent);font-weight:400}
.story-stage p{
  font-size:16px;line-height:1.65;color:var(--ink-dim);
  margin-bottom:22px;
}
.story-stage p strong{color:var(--ink);font-weight:500}
.story-stage-after p em{font-style:italic;color:var(--accent);font-weight:400;font-family:var(--display);font-size:17px}

.stage-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.stage-tags span{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;padding:6px 12px;
  border-radius:2px;
  background:rgba(79,240,194,0.06);
  border:1px solid var(--line-bright);
  color:var(--ink);
}
.stage-tags .tag-bad{
  background:rgba(255,77,109,0.08);
  border-color:rgba(255,77,109,0.3);
  color:#ffb3c1;
}
.stage-tags .tag-good{
  background:rgba(79,240,194,0.1);
  border-color:rgba(79,240,194,0.4);
  color:var(--accent);
  font-weight:500;
}

.story-arrow{
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0;
  color:var(--ink-mute);
  gap:8px;
}
.story-arrow svg{width:20px;height:40px;stroke:var(--line-bright)}
.story-arrow .arrow-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.25em;
}

/* Takeaway block at the end */
.story-takeaway{
  margin-top:56px;
  padding:36px 40px;
  border:1px solid var(--line-bright);
  background:linear-gradient(90deg, rgba(79,240,194,0.04), transparent);
  border-left:3px solid var(--accent);
  display:grid;grid-template-columns:60px 1fr;gap:28px;
  align-items:start;
}
@media (max-width:640px){
  .story-takeaway{grid-template-columns:1fr;gap:16px;padding:28px 24px}
}
.takeaway-mark{
  font-family:var(--display);font-weight:300;
  font-size:56px;line-height:1;
  color:var(--accent);
}
.story-takeaway p{
  font-size:16px;line-height:1.65;
  color:var(--ink-dim);
  margin-bottom:14px;
}
.story-takeaway p:last-child{margin-bottom:0}
.story-takeaway p strong{
  color:var(--ink);font-weight:500;
}