/* InnovatePGH homepage demo — page styles.
   All colors, type, spacing, borders, and motion come from design-system tokens. */

/* ---------- layout primitives ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.section-eyebrow{margin:0 0 var(--space-4)}
.section-title{max-width:24ch}

/* ---------- reveal motion (confident, no bounce) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:var(--border-width-rule) solid transparent;border-radius:var(--radius-none);
  font-family:var(--font-brand);font-weight:var(--weight-bold);font-size:var(--text-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:var(--space-4) var(--space-8);text-decoration:none;transition:var(--transition-control);cursor:pointer}
.btn:active{transform:scale(var(--press-scale))}
.btn-inverse{background:var(--ivp-white);color:var(--ivp-black);border-color:var(--ivp-white)}
.btn-inverse:hover{background:var(--ivp-blue);border-color:var(--ivp-blue);color:var(--ivp-white)}
.btn-ghost{background:transparent;color:var(--ivp-white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:var(--ivp-white);color:var(--ivp-white)}

/* text CTA with CSS-drawn chevron */
.text-cta{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-bold);font-size:var(--text-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ivp-black)}
.chev{width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:var(--transition-control)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface-page);border-bottom:var(--rule-hairline)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--space-8)}
.logo-link{border-bottom:none;display:inline-flex;padding:var(--logo-clearspace) 0}
.logo-img{height:34px;width:auto}
.site-nav{display:flex;align-items:center;gap:var(--space-8)}
.site-nav a{border-bottom:none;color:var(--text-primary);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:var(--space-2) 0;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;border-bottom:var(--border-width-rule) solid var(--ivp-blue);transition:right var(--duration-normal) var(--ease-standard)}
.site-nav a:hover::after,.site-nav a[aria-current]::after{right:0}
.site-nav a:hover{color:var(--ivp-black)}
.nav-cta{border:var(--border-width-rule) solid var(--ivp-black);padding:var(--space-2) var(--space-5) !important}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ivp-black);color:var(--ivp-white) !important}
.nav-toggle{display:none}
.nav-burger{display:none}

/* ---------- hero ---------- */
.hero{background:var(--surface-inverse);color:var(--text-inverse);padding-top:var(--space-24);padding-bottom:var(--space-24)}
.hero-accent{width:64px;border-top:var(--border-width-bar) solid var(--ivp-blue);margin-bottom:var(--space-8)}
.hero-eyebrow{color:var(--text-inverse-secondary)}
.hero-title{color:var(--ivp-white);font-size:clamp(40px,7vw,var(--text-6xl));letter-spacing:var(--tracking-display);line-height:var(--leading-tight);max-width:18ch;margin:0 0 var(--space-8)}
.hero-lede{color:var(--text-inverse-secondary);font-size:var(--text-lg);font-weight:var(--weight-light);line-height:var(--leading-relaxed);max-width:56ch;margin:0 0 var(--space-10)}
.hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* ---------- stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-10);margin-top:var(--space-12)}
.stat{border-top:var(--rule-ink);padding-top:var(--space-5)}
.stat-value{font-weight:var(--weight-bold);font-size:var(--text-5xl);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
.stat-label{margin-top:var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}

/* stagger the stat reveals */
.stat-grid .stat:nth-child(2){transition-delay:80ms}
.stat-grid .stat:nth-child(3){transition-delay:160ms}
.stat-grid .stat:nth-child(4){transition-delay:240ms}

/* ---------- two paths ---------- */
.paths{background:var(--surface-subtle);}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-8)}
.path-card{display:block;background:var(--surface-card);border:var(--rule-hairline);border-top:var(--border-width-bar) solid var(--card-accent);padding:var(--space-10);text-decoration:none;color:var(--text-primary);border-bottom-color:var(--border-hairline);transition:var(--transition-control)}
.path-card:hover{border-color:var(--ivp-black);border-top-color:var(--card-accent)}
.path-card h3{margin:0 0 var(--space-4)}
.path-card p{font-weight:var(--weight-light);color:var(--text-secondary);margin:0 0 var(--space-8)}
.path-card:hover .chev{transform:rotate(45deg) translate(2px,-2px)}
.path-grid .path-card:nth-child(2){transition-delay:80ms}

/* ---------- programs ---------- */
.programs .section-title{color:var(--ivp-white)}
.program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-10);margin-top:var(--space-12)}
.program{border-left:var(--border-width-rule) solid rgba(255,255,255,.25);padding-left:var(--space-5)}
.program h4{color:var(--ivp-white);margin:0 0 var(--space-3)}
.program p{color:var(--text-inverse-secondary);font-size:var(--text-sm);font-weight:var(--weight-light);margin:0}
.program-grid .program:nth-child(2){transition-delay:80ms}
.program-grid .program:nth-child(3){transition-delay:160ms}
.program-grid .program:nth-child(4){transition-delay:240ms}
.program-footnote{margin-top:var(--space-12);color:var(--text-inverse-secondary);font-size:var(--text-sm);font-weight:var(--weight-light);max-width:64ch}

/* ---------- narrative ---------- */
.narrative-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}
.narrative-body{font-weight:var(--weight-light);color:var(--text-primary);font-size:var(--text-base);line-height:var(--leading-relaxed)}
.narrative-grid > div:nth-child(2){transition-delay:80ms}

/* ---------- footer ---------- */
.site-footer{border-top:var(--rule-strong)}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-16);padding-top:var(--space-16);padding-bottom:var(--space-12)}
.footer-logo{height:28px;width:auto;margin-bottom:var(--space-5)}
.footer-tag{font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-secondary);max-width:34ch}
.footer-nav{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.footer-nav a{border-bottom:none;color:var(--text-primary);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.footer-nav a:hover{color:var(--ivp-blue)}
.footer-contact .ivp-eyebrow{margin-bottom:var(--space-3)}
.footer-mail{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-primary);border-bottom-color:var(--ivp-blue)}
.footer-mail:hover{color:var(--ivp-blue)}
.footer-lockups{padding-bottom:var(--space-12)}
.footer-lockups .ivp-eyebrow{margin-bottom:var(--space-5)}
.lockup-row{display:flex;gap:var(--space-16);align-items:center;flex-wrap:wrap}
.lockup-row img{height:44px;width:auto}
.footer-bar{background:var(--surface-inverse);color:var(--text-inverse-secondary);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:var(--space-4) 0}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .program-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .header-inner{height:64px}
  .logo-img{height:28px}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;align-items:center}
  .nav-burger span{display:block;width:20px;border-top:2px solid var(--ivp-black);transition:var(--transition-control)}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface-page);border-bottom:var(--rule-strong);flex-direction:column;align-items:flex-start;padding:var(--space-6) var(--gutter);gap:var(--space-6)}
  .nav-toggle:checked ~ .site-nav{display:flex}
  .hero{padding-top:var(--space-16);padding-bottom:var(--space-16)}
  .section{padding-top:var(--space-16);padding-bottom:var(--space-16)}
  .path-grid{grid-template-columns:1fr}
  .narrative-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .stat-value{font-size:var(--text-4xl)}
  .footer-main{grid-template-columns:1fr;gap:var(--space-10)}
}