/* index.css */

/* Base */
:root{
  --ink:#0a0a0a; --ink-2:#222; --muted:#666; --line:#e8e8e8;
  --card:#fff; --bg:#fff;
  --pink:#ffbbea;
  --black:#000001; 
}

/* Name styling */
h1.name {
  font-family: 'Antonio', sans-serif;
  text-align: center;
  font-size: 4rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  line-height: 0.65; 
  font-weight: bold;
}

@media (max-width: 600px) {
  h1.name {
    font-size: 4rem;  
    line-height: 1.2;  
  }
}

.logo-row {
  align-items: center; 
}

.headshot-img {
  margin: 2rem auto 1rem auto;
}

.tagline {
  text-align: center;
  font-family: 'TT Bricks Trial', sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  color: #ffbbea;   
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-style: italics;
  background-color: #000001;
  border-radius: 0.25rem;
}

.button.primary {
  background: #ffbbea;; 
  color: #000001;
  font-weight: 700;
  border: none;
}

.button.primary:hover {
  background: #ffbbea;
  color: #000001;
}

a:hover {
  color: #C0737A;
  text-decoration: underline;
}

/* ===== Hero ===== */
.hero {
  background: radial-gradient(1200px 500px at 20% 10%, #ffbbea 0%, rgba(255,187,234,0.15) 35%, rgba(255,187,234,0.04) 60%, transparent 75%), #0a0a0a;
  padding: 3.5rem 0 2.5rem;
  color: #fff;
}
.hero .name {
  font-family: 'Antonio', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  margin: 0.5rem 0 0.75rem;
  text-align: left;
}
.hero .tagline {
  font-family: 'TT Bricks Trial', sans-serif;
  font-size: 1.35rem;
  color: #ffbbea;
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: rgba(255,187,234,0.08);
}
.hero .blurb {
  max-width: 48ch;
}
.hero-headshot {
  max-width: 260px;
  width: 80%;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Pills */
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}
.pill.success { background: rgba(57,255,169,0.12); border-color: rgba(57,255,169,0.35); }

/* CTA buttons */
.cta-row .button { margin-right: 0.5rem; margin-bottom: 0.5rem; }
.button.primary { background: #ffbbea; }
.button.primary:hover { background: #ffbbea; }
.button.secondary { background: #111; border: 1px solid #333; }
.button.secondary:hover { background: #222; }
.button.tertiary { background: #000001; color: #ffbbea; border: 1px solid #2a2a2a; }
.button.tertiary:hover { background: #161616; }
.button.wide { min-width: 220px; }

/* ===== Highlights ===== */
.highlights { padding: 2.5rem 0 0.5rem; }
.card-lite {
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.card-title {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
.card-copy {
  margin: 0;
  font-style: italic;
}
.kpi-row { margin-top: 0.75rem; }
.kpi-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}
.kpi-list li { background: #f7f7f7; padding: 0.5rem 0.75rem; border-radius: 8px; }

/* ===== Logo strip ===== */
.logo-strip { padding: 1rem 0 0.5rem; }
.logo-img { max-height: 70px; width: auto; transition: filter 0.25s ease, transform 0.25s ease; }
.logo-img.grayscale { filter: grayscale(100%) contrast(1.1); opacity: 0.9; }
.logo-img.grayscale:hover { filter: none; transform: translateY(-2px); opacity: 1; }

/* Ensure tagline badge contrast w/ dark background */
.tagline { background-color: transparent; }

/* Footer with LinkedIn + Email */
.site-footer{
  border-top:1px solid var(--line); padding:1.5rem 0 2rem; margin-top:1rem; text-align:center;
}
.footer-line{margin:0 0 .75rem; font-weight:700}
.footer-cta{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.footer-btn{
  background: var(--pink); color:#000001; border:none; font-weight:700; display:inline-flex; align-items:center; gap:.4rem;
}
.footer-btn .icon{display:inline-block}
.footer-btn:hover{background:#ff5aa9; color:#000001}
.footer-btn.hollow{
  background:#fff; color:#000001; border:1px solid #333; display:inline-flex; align-items:center; gap:.4rem;
}
.footer-btn.hollow:hover{background:#f9f9f9}

.orgs-header {
  padding: 2.25rem 0 0.75rem;
  text-align: center;
}

.orgs-title {
  font-family: "Antonio", sans-serif;
  font-size: 2rem;
  color: var(--pink);
  margin-bottom: .35rem;
  font-weight: 700;
}

.orgs-subtitle {
  font-size: 1.05rem;
  color: #555;
  max-width: 650px;
  margin: 0 auto;
  opacity: .9;
}