/* ── ABOUT PAGE ── */
.about-intro-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; }
.portrait-col { position:sticky; top:90px; }
.portrait-frame { border-radius:20px; overflow:hidden; background:var(--bg2); aspect-ratio:3/4; max-height:520px; box-shadow:var(--shadow2); position:relative; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:top; }
.portrait-overlay { position:absolute; bottom:0; left:0; right:0; padding:24px; background:linear-gradient(to top,rgba(26,26,23,.85) 0%,transparent 100%); }
.portrait-overlay strong { display:block; font-family:var(--disp); font-size:1.4rem; color:#fff; }
.portrait-overlay span { font-size:12px; color:rgba(255,255,255,.65); }
.avail-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); color:#fff; padding:6px 14px; border-radius:50px; font-size:12px; margin-top:10px; backdrop-filter:blur(8px); }
.avail-dot { width:7px; height:7px; background:#4CAF50; border-radius:50%; flex-shrink:0; animation:pulseDot 2s infinite; }

.about-lead { font-family:var(--disp); font-size:1.6rem; line-height:1.45; color:var(--ink); margin-bottom:22px; }
.about-body { font-size:.975rem; color:var(--muted); line-height:1.9; margin-bottom:20px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:28px 0; }
.info-chip { padding:14px 16px; background:var(--bg2); border-radius:var(--r); border:1px solid var(--border); }
.info-chip small { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.info-chip span { font-size:13.5px; font-weight:500; color:var(--ink); }
.info-chip a { color:var(--sage); }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
.val-card { padding:28px 24px; background:var(--card); border:1px solid var(--border); border-radius:16px; transition:all .3s; }
.val-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow2); }
.val-icon { width:48px; height:48px; border-radius:12px; background:var(--sage-pal); display:flex; align-items:center; justify-content:center; color:var(--sage); font-size:20px; margin-bottom:16px; }
.val-card h3 { font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.val-card p { font-size:.875rem; color:var(--muted); line-height:1.75; }

.skills-section { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:40px; }
.skills-tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.s-tab { padding:8px 18px; border-radius:6px; border:1.5px solid var(--border); background:transparent; font-size:13px; color:var(--muted); cursor:pointer; transition:all .2s; font-family:var(--sans); }
.s-tab.act { border-color:var(--sage); color:var(--sage); background:var(--sage-pal); font-weight:500; }
.skill-group { display:none; }
.skill-group.act { display:block; }

.certs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
.cert-card { padding:24px; background:var(--card); border:1px solid var(--border); border-radius:14px; display:flex; align-items:flex-start; gap:14px; transition:all .3s; }
.cert-card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.cert-icon { width:44px; height:44px; border-radius:10px; background:var(--sage-pal); display:flex; align-items:center; justify-content:center; color:var(--sage); font-size:18px; flex-shrink:0; }
.cert-card h4 { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.cert-card span { font-size:12px; color:var(--muted); }

.cta-strip { background:var(--sage); border-radius:20px; padding:52px 48px; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:3rem; }
.cta-strip h3 { font-family:var(--disp); font-size:1.8rem; color:#fff; }
.cta-strip p { font-size:.9rem; color:rgba(255,255,255,.65); margin-top:6px; }
.btn-wht {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all .25s;
  text-decoration: none;
  letter-spacing: .01em;
}
.btn-wht:hover {
  background: #fff;
  color: var(--sage);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
/* First button (Start a Project) — solid white for maximum visibility */
.cta-strip-btns .btn-wht:first-child {
  background: #fff;
  color: var(--sage);
  border-color: #fff;
}
.cta-strip-btns .btn-wht:first-child:hover {
  background: var(--sage2);
  color: #fff;
  border-color: var(--sage2);
}

/* ── ABOUT EXTRA RESPONSIVE ── */
@media(max-width:860px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .portrait-col { position: static; }
  .portrait-frame { max-height: 360px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .skills-tabs { gap: 6px; }
  .s-tab { padding: 7px 14px; font-size: 12px; }
}
@media(max-width:600px) {
  .values-grid { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: 1fr; }
  .cta-strip { flex-direction: column; padding: 28px 20px; gap: 1.5rem; }
  .cta-strip h3 { font-size: 1.4rem; }
  .info-grid { grid-template-columns: 1fr; }
  .skills-section { padding: 20px; }
  .portrait-frame { max-height: 300px; }
}

/* ── CTA STRIP BUTTONS — clearly visible on sage green ── */
.about-cta-primary {
  background: #fff;
  color: var(--sage) !important;
  border: 2px solid #fff;
  font-weight: 600;
}
.about-cta-primary:hover {
  background: var(--ink);
  color: #fff !important;
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.about-cta-secondary {
  background: rgba(255,255,255,.15);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.75);
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.about-cta-secondary:hover {
  background: #fff;
  color: var(--sage) !important;
  border-color: #fff;
  transform: translateY(-2px);
}