/* ═══════════════════════════════════════════════
   SSU SITE FOUNDATION
   Shared CSS loaded by every page. Single source of truth for
   the box-sizing reset and design tokens. Page-specific styles
   (html/body backgrounds, components, layout) remain inline.
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* SSU Brand Palette */
  --elgouna:    #142137;   /* primary background */
  --alexandria: #374151;   /* secondary background */
  --medford:    #616E74;   /* tertiary / muted surfaces */
  --ahmed:      #72A2B6;   /* teal accent, borders, hover, muted labels */
  --malek:      #D8E7EE;   /* pale blue, lightest text / subtle fills */
  --northcoast: #F0EDE8;   /* warm off-white, primary light */
  --deveney:    #FF499C;   /* hot pink, primary CTA accent */
  --richie:     #BC3DA9;   /* magenta, hover states, gradient partner */
  --cheryl:     #873FB6;   /* violet, secondary accent, highlights */
  --romeo:      #FFD02A;   /* warm gold, rare warm accent */

  /* Semantic aliases */
  --navy:         var(--elgouna);
  --navy-2:       var(--alexandria);
  --navy-3:       #2a3545;
  --pink:         var(--deveney);
  --white:        var(--northcoast);
  --muted:        rgba(114,162,182,0.55);
  --border:       rgba(114,162,182,0.14);
  --gold:         var(--romeo);
  --deep-blue:    #1B2D42;

  /* Legacy aliases */
  --navy-1:       var(--elgouna);
  --hot-pink:     var(--deveney);
  --rose:         var(--richie);
  --purple:       var(--cheryl);
  --purple-light: #9B6FD4;
  --purple-dim:   rgba(135,63,182,0.35);
  --border-mid:   rgba(114,162,182,0.14);
  --border-strong:rgba(114,162,182,0.28);
  --border-light: rgba(114,162,182,0.08);
  --steel:        var(--ahmed);
  --yellow:       var(--romeo);
  --gold-dark:    #c49a18;

  /* Typography tokens (desktop) */
  --t-display:    clamp(48px, 7vw, 80px);
  --t-h1:         clamp(36px, 4.8vw, 56px);
  --t-h2:         clamp(28px, 3.2vw, 42px);
  --t-h3:         clamp(22px, 2.4vw, 32px);
  --t-h4:         clamp(18px, 1.6vw, 22px);
  /* Body tier — fluid (clamp scales between 700px and 1400px viewport).
     Caps kept at body-sized maxes (≤17px) so text never feels heavy on wide screens.
     Labels (--t-label, --t-micro) stay fixed: tracked uppercase UI affordances. */
  --t-h5:         clamp(15px, 13px + 0.286vw, 17px);
  --t-lead:       clamp(14px, 10px + 0.571vw, 17px);
  --t-body:       clamp(14px, 12px + 0.286vw, 16px);
  --t-body-sm:    clamp(13px, 10px + 0.429vw, 16px);
  --t-caption:    clamp(12px, 10px + 0.286vw, 14px);
  --t-tiny:       clamp(11px, 10px + 0.143vw, 13px);
  --t-label:      11px;
  --t-micro:      10px;
  --lh-display:   1.0;
  --lh-h:         1.08;
  --lh-body:      1.75;
  --lh-tight:     1.4;
  --ls-display:   -0.03em;
  --ls-h:         -0.02em;
  --ls-label:     0.18em;
  --ls-caps:      0.22em;

  /* Fluid spacing scale — sections breathe with the viewport.
     min  → preferred (vw-scaled) → max
     Used for section padding, grid gaps, and large rhythm.
     Below 540px viewport, mobile @media overrides take over. */
  --pad-y-sm:     clamp(32px, 4vw, 56px);    /* compact sections (cards, process panes) */
  --pad-y:        clamp(56px, 8vw, 100px);   /* default section vertical padding */
  --pad-y-lg:     clamp(72px, 10vw, 120px);  /* taller sections (hero, CTA) */
  --pad-y-xl:     clamp(96px, 14vw, 180px);  /* extra-tall bridge sections */
  --pad-x:        clamp(20px, 4vw, 56px);    /* section horizontal padding */
  --pad-x-wide:   clamp(28px, 4.5vw, 64px);  /* slightly wider gutters (who-left) */
  --gap-section:  clamp(32px, 5vw, 80px);    /* large grid/flex gaps */
  --gap-md:       clamp(16px, 2.5vw, 32px);  /* medium gaps */
}

/* ═══════════════════════════════════════════════
   NAV — fixed top bar shared across all main content pages
   ═══════════════════════════════════════════════ */

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; padding: 20px 56px; background: rgba(20,33,55,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(114,162,182,0.16); }
.nav-logo { font-family: 'Tiny5', monospace; font-size: 15px; color: #F0EDE8; letter-spacing: 0.08em; }
.nav-logo span { color: #F0EDE8; }
.nav-links { display: flex; gap: 40px; list-style: none; margin-left: auto; margin-right: 32px; }
.nav-links a { color: var(--malek); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--deveney); }
.nav-cta { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #F0EDE8; background: var(--deveney); padding: 11px 28px; text-decoration: none; font-weight: 700; transition: background 0.2s; }
.nav-cta:hover { background: #a83590; }

/* ═══════════════════════════════════════════════
   FOOTER — used on index, about, projects, contact, project pages
   Blog files have a similar footer with a gradient background (kept inline)
   Utility pages have their own simpler footer (kept inline)
   ═══════════════════════════════════════════════ */

footer { background: var(--elgouna); border-top: 1px solid var(--border-mid); font-family: 'DM Sans', sans-serif; }
.footer-main { display: flex; }
.footer-left { width: 50%; border-right: 1px solid rgba(114,162,182,0.1); padding: var(--pad-y) var(--pad-x); }
.footer-right { width: 50%; padding: var(--pad-y) var(--pad-x); }
.footer-logo { margin-bottom: 40px; line-height: 0; }
.footer-logo img { height: 28px; width: auto; display: block; }
.footer-nav-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.footer-nav-grid a { font-size: 13px; font-weight: 500; color: rgba(216,231,238,0.55); text-decoration: none; transition: color 0.2s; }
.footer-nav-grid a:hover { color: var(--deveney); }
.footer-contact-bar { padding: var(--pad-y-sm) var(--pad-x); border-top: 1px solid rgba(114,162,182,0.1); display: flex; align-items: center; gap: 24px; }
.footer-email { font-size: 13px; color: rgba(216,231,238,0.5); text-decoration: none; transition: color 0.2s; }
.footer-email:hover { color: var(--deveney); }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border: 1px solid rgba(114,162,182,0.14); display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: border-color 0.25s, color 0.25s; }
.footer-social a:hover { border-color: var(--deveney); color: var(--deveney); }
.footer-nl-label { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(114,162,182,0.35); margin-bottom: 20px; text-align: center; }
.footer-nl-title { font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.0; color: var(--white); margin-bottom: 16px; }
.footer-nl-sub { font-size: 14px; color: rgba(216,231,238,0.45); margin-bottom: 32px; }
.footer-nl-sub em { font-style: italic; color: rgba(216,231,238,0.65); }
.footer-nl-btn { display: inline-block; padding: 11px 24px; background: transparent; border: 1px solid var(--border-strong); color: var(--white); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.2s; }
.footer-nl-btn:hover { border-color: var(--deveney); color: var(--deveney); }
.footer-bottom { border-top: 1px solid rgba(114,162,182,0.1); padding: 24px var(--pad-x); display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-size: 11px; color: rgba(216,231,238,0.25); letter-spacing: 0.06em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 11px; color: rgba(216,231,238,0.3); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--deveney); }

/* ═══════════════════════════════════════════════
   BUTTON SYSTEM — 4 tiers, single source of truth
   All tiers share the same type DNA: 11px / 700 / 0.14em / uppercase.
   Tiers differ in shape (fill / border / arrow), not type.
   ═══════════════════════════════════════════════ */

/* TIER 1 — PRIMARY (filled action button, pink default) */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--deveney);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--richie); }

/* Size modifiers */
.btn-primary.btn-sm    { padding: 11px 24px; }
.btn-primary.btn-lg    { padding: 20px 56px; }
.btn-primary.btn-block { width: 100%; padding: 20px 24px; text-align: center; }

/* Color modifier — gold variant for high-stakes CTAs */
.btn-primary.btn-gold       { background: var(--gold); color: var(--alexandria); }
.btn-primary.btn-gold:hover { background: var(--gold-dark); }

/* TIER 2 — SECONDARY (outlined action button) */
.btn-secondary {
  display: inline-block;
  padding: 13px 28px;
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--deveney); color: var(--deveney); }

/* TIER 3 — GHOST (inline text + forward arrow) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.btn-ghost::after { content: "→"; transition: transform 0.2s; }
.btn-ghost:hover { color: var(--deveney); }
.btn-ghost:hover::after { transform: translateX(4px); }

/* TIER 4 — META (back / utility link) */
.btn-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.btn-meta::before { content: "←"; transition: transform 0.2s; }
.btn-meta:hover { color: var(--white); }
.btn-meta:hover::before { transform: translateX(-4px); }

/* ═══════════════════════════════════════════════
   MOBILE HAMBURGER + OVERLAY MENU
   Hidden on desktop. Mobile: [Logo] [Let's Talk] [Hamburger].
   Tap opens full-screen slide-down panel.
   ═══════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  background: none !important;
  border: none !important;
  padding: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.nav-hamburger-bar {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--white) !important;
  border-radius: 0 !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease !important;
  transform-origin: center !important;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) {
  opacity: 0 !important;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}
.nav-hamburger:focus-visible {
  outline: 2px solid var(--pink) !important;
  outline-offset: 2px !important;
}

.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99 !important;
  background: var(--navy) !important;
  transform: translateY(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  visibility: hidden !important;
  overflow-y: auto !important;
}
.mobile-menu.active {
  transform: translateY(0) !important;
  visibility: visible !important;
}
.mobile-menu-inner {
  min-height: 100% !important;
  padding: 96px 24px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 48px !important;
  box-sizing: border-box !important;
}
.mobile-menu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.mobile-menu-links li {
  list-style: none !important;
}
.mobile-menu-links a {
  display: block !important;
  padding: 18px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid rgba(240,237,232,0.08) !important;
  transition: color 0.2s !important;
}
.mobile-menu-links li:first-child a {
  border-top: 1px solid rgba(240,237,232,0.08) !important;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:active {
  color: var(--pink) !important;
}
.mobile-menu-links a:focus-visible {
  outline: 2px solid var(--pink) !important;
  outline-offset: 4px !important;
}
.mobile-menu-cta {
  display: block !important;
  width: 100% !important;
  padding: 20px 24px !important;
  background: var(--pink) !important;
  color: var(--white) !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}
.mobile-menu-cta:hover,
.mobile-menu-cta:focus-visible {
  background: var(--richie) !important;
}
.mobile-menu-cta:focus-visible {
  outline: 2px solid var(--pink) !important;
  outline-offset: 2px !important;
}
body.menu-open {
  overflow: hidden !important;
}
body.menu-open .nav-cta {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
   Tokens at :root drive the scale. Source of truth — uses
   !important deliberately to override legacy per-selector rules.
   ═══════════════════════════════════════════════ */

/* DISPLAY, hero titles */
.hero-headline, .hero-title {
  font-size: var(--t-display) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--ls-display) !important;
  font-weight: 700 !important;
}
/* H1, page-hero titles + CTA headline */
.hero-name, .about-hero-title, .projects-hero-title,
.cta-headline, .cta-headline-italic {
  font-size: var(--t-h1) !important;
  line-height: 1.02 !important;
  letter-spacing: var(--ls-display) !important;
  font-weight: 700 !important;
}
/* H2, section headlines */
.bridge-quote, .who-bridge-quote, .who-headline,
.outcomes-headline, .work-headline, .engage-headline,
.process-intro-title, .faq-headline,
.story-headline, .values-headline, .believe-headline,
.contact-headline {
  font-size: var(--t-h2) !important;
  line-height: var(--lh-h) !important;
  letter-spacing: var(--ls-h) !important;
  font-weight: 700 !important;
}
/* H3, subsection heads */
.ws-headline, .work-title, .feature-title,
.article-feature-title, .value-col-title, .process-pane-title {
  font-size: var(--t-h3) !important;
  line-height: var(--lh-h) !important;
  letter-spacing: var(--ls-h) !important;
  font-weight: 700 !important;
}
/* H4, card titles */
.outcome-title, .engage-p-title, .next-name {
  font-size: var(--t-h4) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}
/* H5, small card titles, accordion questions */
.who-item-title, .faq-question, .list-title {
  font-size: var(--t-h5) !important;
  line-height: var(--lh-tight) !important;
  font-weight: 700 !important;
}
.faq-q {
  font-size: var(--t-h5) !important;
  line-height: var(--lh-tight) !important;
  font-weight: 500 !important;
}
/* LEAD, intros */
.hero-sub, .cta-body, .story-lead, .about-lead {
  font-size: var(--t-lead) !important;
  font-weight: 400 !important;
}
/* BODY, default paragraphs */
.bridge-body, .who-bridge-body, .process-pane-body,
.work-body, .story-body, .value-col-body,
.outcomes-sub, .who-sub, .engage-sub, .contact-body {
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
}
/* BODY SMALL, cards + secondary */
.outcome-body, .engage-p-desc,
.faq-body, .faq-a, .ov-card-body,
.who-item-desc {
  font-size: var(--t-body-sm) !important;
  font-weight: 400 !important;
}
/* CAPTION, quotes, meta */
.ws-quote, .who-cta {
  font-size: var(--t-caption) !important;
  font-weight: 400 !important;
}
/* LABEL CAPS, eyebrows, tags */
.hero-eyebrow, .section-label, .who-bridge-label,
.bridge-eyebrow, .outcome-num,
.cta-eyebrow, .ws-case-link {
  font-size: var(--t-micro) !important;
  letter-spacing: var(--ls-caps) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* PROCESS tabs */
.process-tab-num {
  font-size: var(--t-label) !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.process-tab-label {
  font-size: var(--t-caption) !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* HERO stat bar */
.hero-stat-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--malek) !important;
}
.hero-stat-label {
  font-size: var(--t-micro) !important;
  letter-spacing: var(--ls-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* NAV + BUTTONS */
.nav-links a {
  font-size: var(--t-label) !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* All button tiers + legacy aliases share the same type spec */
.btn-primary, .btn-secondary, .btn-ghost, .btn-meta,
.nav-cta, .btn-cta, .cta-btn, .mobile-menu-cta,
.btn-ask, .btn-outline, .footer-nl-btn,
.who-cta, .ws-case-link, .next-cta,
.post-back, .hero-back, .legal-back {
  font-size: var(--t-label) !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* FOOTER */
.footer-nav-grid a {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.footer-email { font-size: var(--t-caption) !important; }
.footer-copy, .footer-legal a {
  font-size: var(--t-label) !important;
  letter-spacing: 0.06em !important;
}
.footer-nl-label {
  font-size: var(--t-micro) !important;
  letter-spacing: var(--ls-caps) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════
   HERO ENTRANCE ANIMATION
   Subtle fade-up on page load. Eyebrow first, headline next, supporting
   content (body/CTAs) last. Same staggered timing across every page.
   Covers both class naming conventions (hero-eyebrow/hero-label,
   hero-headline/hero-h1/thank-h1).
   ═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow,
.hero-label {
  animation: fadeUp 0.7s ease both;
}
.hero-headline,
.hero-h1,
.thank-h1 {
  animation: fadeUp 0.7s 0.1s ease both;
}
.hero-right,
.hero-sub,
.hero-sub-grid,
.hero-cta-row,
.process-list {
  animation: fadeUp 0.7s 0.2s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-label,
  .hero-headline, .hero-h1, .thank-h1,
  .hero-right, .hero-sub, .hero-sub-grid, .hero-cta-row, .process-list {
    animation: none;
  }
}

@media (max-width: 540px) {
  .nav-hamburger {
    display: inline-flex !important;
  }
  /* Nav email button: right-aligned, vertically centered, canonical sm size.
     Every height-affecting property locked so no override can change size. */
  nav > .btn-primary {
    margin-left: auto !important;
    align-self: center !important;
    padding: 11px 24px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border: 0 !important;
    box-sizing: content-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
@media (min-width: 541px) {
  .mobile-menu {
    display: none !important;
  }
}