/* Cursor/Astro overrides to match original screenshots */

/* Desktop: keep header visible on scroll (mobile unchanged) */
@media (min-width: 1024px) {
  .header {
    position: sticky !important;
    top: 0 !important;
  }
  /* Keep header on a single line */
  .logo-text {
    white-space: nowrap !important;
    font-size: 1.1rem !important;
  }
  .desktop-nav {
    gap: 2.25rem !important;
    margin: 0 2.5rem !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .nav-link {
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.04em !important;
  }
  .header-right {
    gap: 1.1rem !important;
  }
}

/* Hero portrait: .hero-image-entrance starts at opacity:0 and only fades in via CSS animation.
   On viewports >1024px there is no fallback rule (unlike max-width:1024), so if the animation
   doesn’t run the photo stays invisible. Force the post-animation state so the image always shows. */
.hero-image-entrance {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* 1) Hero headline gradient + slightly open spacing (no typewriter cursor) */
.hero h1 .hero-headline-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.04em;
  word-spacing: 0.14em;
}

/* 3) Make "View demo" CTA prominent like original */
.project-cta {
  margin-top: 1.5rem;
  align-self: flex-start;
  padding: 0.9rem 2.25rem;
  border-radius: 16px;
  font-size: 1rem;
  box-shadow: var(--shadow-md), 0 0 24px rgba(127, 255, 212, 0.18);
}
.project-cta:hover {
  box-shadow: var(--shadow-lg), 0 0 32px rgba(127, 255, 212, 0.28);
}

/* Work tile: "As seen in" logo row */
.as-seen-in{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  margin-top: 0;
  display:flex;
  align-items:center;
  gap: 0.6rem;
  opacity: 0.95;
  z-index: 2;
}
.as-seen-in-label{
  font-size: 0.75rem;
  color: var(--vp-c-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.as-seen-in-link{
  display:inline-flex;
  align-items:center;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: var(--transition-base);
}
.as-seen-in-link:hover{
  border-color: rgba(127,255,212,0.28);
  box-shadow: 0 0 18px rgba(127,255,212,0.12);
  transform: translateY(-2px);
}
.as-seen-in-logo{
  height: 18px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: none;
  opacity: 0.9;
}

/* Avoid overlap on narrow screens */
@media (max-width: 768px) {
  .as-seen-in{
    position: static;
    margin-top: 1.25rem;
    justify-content: flex-start;
  }
}

/* Publications: “With …” badges — logo sizing matches work tile Fast Company mark */
#publications .project-card.card-base {
  overflow: visible !important;
}
#publications .project-card {
  position: relative;
}
#publications .project-content {
  position: relative;
}
#publications .project-title {
  white-space: pre-line;
}
@media (min-width: 769px) {
  #publications .publication-card--collab .project-title {
    padding-right: 11rem;
  }
}
#publications .publication-collab .as-seen-in-link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  overflow: visible;
  max-width: none;
}
#publications .publication-collab .as-seen-in-link--wordmark {
  padding: 0.38rem 0.85rem 0.38rem 0.9rem;
}
#publications .publication-collab .collab-wordmark.collab-wordmark-modulate {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
/* Match Caltech + Modulate lockups to the same rendered footprint */
#publications .publication-collab .as-seen-in-logo.collab-logo-caltech,
#publications .publication-collab .as-seen-in-logo.collab-logo-modulate {
  height: 18px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.92;
}
#publications .publication-collab .as-seen-in-logo.collab-logo-caltech {
  filter: none;
}
/* Navy wordmark reads on dark cards; keep gradient hues */
#publications .publication-collab .as-seen-in-logo.collab-logo-modulate {
  filter: brightness(1.35) contrast(1.05);
}

/* 1) Indentation/text alignment inside tiles (don't let .section p center them) */
.project-content .project-title,
.project-content .project-company,
.project-content .project-date,
.project-content .project-description{
  text-align: left !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Ensure project images always render (guard against global img resets) */
.project-image img{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Portrait or tall photos: fill the tile like landscape shots (opt-in per JSON imageFit: cover) */
.project-image img[data-image-fit="cover"] {
  object-fit: cover !important;
}

/* 3) Mentorship read-more link should look like green "Read more →" */
.mentorship-intro .read-more-link{
  color: var(--mint);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mentorship-intro .read-more-link:hover{
  color: #5dffb8;
  text-shadow: 0 0 10px rgba(127,255,212,.35);
}

/* Glimpse + MirWork on dark backgrounds only (trusted pills override below) */
.glimpse-logo,
.mirwork-logo{
  filter: invert(1) brightness(0.9) contrast(1.05) drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important;
  opacity: 0.78 !important;
}

/* Product mentorship: center hero line + badge; keep body copy and later headings left */
#mentorship.mentorship-section .mentorship-heading {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#mentorship.mentorship-section .mentorship-cta-heading {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(92vw, 38rem) !important;
  line-height: 1.22 !important;
  text-wrap: balance;
}
#mentorship.mentorship-section .mentorship-hero-badge {
  align-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 320px !important;
}
#mentorship.mentorship-section .mentorship-hero-badge .badge-text h4,
#mentorship.mentorship-section .mentorship-hero-badge .badge-text p {
  text-align: center !important;
}
#mentorship.mentorship-section > h3:not(.testimonials-heading):not(.mentorship-cta-heading) {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
#mentorship.mentorship-section > h3.testimonials-heading {
  text-align: center !important;
}
#mentorship.mentorship-section .trusted-section h3 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#mentorship.mentorship-section .mentorship-intro,
#mentorship.mentorship-section .mentorship-intro .description-text {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}
#mentorship.section p.description-text {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* Trusted-by: 3 columns, centered; uniform pills */
.logos-container {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.company-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem 1.1rem !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.25rem 1rem !important;
  box-sizing: border-box !important;
}
/* One solid pill color everywhere (no rgba drift) so logos blend consistently */
.company-logos .logo-item.logo-pill {
  width: 100% !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 0.85rem !important;
  background: #f4f6f5 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  isolation: isolate !important;
}
.company-logos .logo-item.logo-pill .logo-image {
  max-height: 28px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
}
/* PNG/SVG marks on light pill (assets use transparency; no matte boxes) */
.company-logos .logo-item.logo-pill .amazon-logo,
.company-logos .logo-item.logo-pill .deshaw-logo,
.company-logos .logo-item.logo-pill .rewiring-america-logo,
.company-logos .logo-item.logo-pill .playstudios-logo {
  filter: none !important;
  mix-blend-mode: normal !important;
}
.company-logos .logo-item.logo-pill .playstudios-logo {
  max-height: 40px !important;
}
.company-logos .logo-item.logo-pill .amazon-logo {
  max-height: 28px !important;
}
.company-logos .logo-item.logo-pill .rewiring-america-logo {
  max-height: 24px !important;
}
.company-logos .logo-item.logo-pill .deshaw-logo {
  max-height: 26px !important;
}
/* Light SVG marks on white pill → dark ink */
.company-logos .logo-item.logo-pill .glimpse-logo,
.company-logos .logo-item.logo-pill .mirwork-logo {
  filter: brightness(0) saturate(100%) opacity(0.88) !important;
  opacity: 1 !important;
}

/* 6) Testimonials: single-card carousel layout (no scroll strip) */
.testimonials-carousel{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}
.testimonial-track{ position: relative; }
.testimonial-slide{ display:none; }
.testimonial-slide.is-active{ display:block; }
.testimonial-pagination{
  display:flex;
  justify-content:center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.testimonial-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(127,255,212,.22);
  opacity: 0.6;
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}
.testimonial-dot.is-active{
  background: var(--mint);
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 18px rgba(127,255,212,.35);
}

/* 7) Footer icon links row */
.footer-social-section{
  display:flex;
  justify-content:center;
  gap: 2rem;
}
.social-icon-link{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(127,255,212,.12);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.social-icon-link:hover{
  transform: translateY(-3px);
  border-color: rgba(127,255,212,.35);
  box-shadow: 0 10px 32px rgba(0,0,0,.35), 0 0 22px rgba(127,255,212,.14);
  background: rgba(255,255,255,.09);
}

/* Trusted logos strip: no outer glass panel */
.company-logos:before {
  display: none !important;
}
.logo-item:not(.logo-pill) {
  width: 180px;
  height: 64px;
}
.logo-image {
  opacity: 1 !important;
}

/* (removed scroll-strip layout; see carousel layout above) */

/* 8) Netlify honeypot should never appear */
.netlify-honeypot {
  display: none !important;
}

@media (max-width: 768px) {
  .testimonials-carousel { padding: 0 1rem 3rem; }
  .company-logos .logo-item.logo-pill {
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
  }
  .logo-item:not(.logo-pill) {
    width: 150px;
    height: 56px;
  }
  .footer-social-section{ gap: 1.25rem; }
  .social-icon-link{ width: 52px; height: 52px; border-radius: 14px; }
}