/* ==========================================================================
   HERO — used on the landing page (full split hero) and as a lighter
   page-header on interior pages
   ========================================================================== */

.hero{
  min-height:100svh; display:grid; grid-template-columns:1.1fr .9fr; align-items:center;
  padding:0 48px; position:relative;
}
.hero-copy{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(42px, 7vw, 92px); line-height:1.02; letter-spacing:.01em; margin:22px 0 8px; }
.hero .tagline{
  font-family:'Newsreader', serif; font-style:italic; font-size:19px; color:var(--ink-dim);
  max-width:480px; margin-top:18px; line-height:1.5;
}

.scrollcue{
  position:absolute; bottom:42px; left:48px; display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; color:var(--ink-dim);
}
.scrollcue .stem{ width:1px; height:34px; background:var(--line); position:relative; overflow:hidden; }
.scrollcue .stem::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent);
  animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.stage{ position:relative; height:440px; display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease); }
.stage-tile{
  width:340px; height:340px; border-radius:16px; background:var(--bg-soft); box-shadow:var(--shadow-out);
  display:flex; align-items:center; justify-content:center; padding:26px;
}
.stage-tile svg{ width:100%; height:100%; }

/* lighter header used on interior pages (bloch-NDA, bloch-SLR, contact) */
.page-header{ padding:150px 48px 40px; max-width:920px; margin:0 auto; }
.page-header h1{ font-size:clamp(34px, 5vw, 56px); line-height:1.08; margin:16px 0 20px; }
.page-header .lede{ color:var(--ink-dim); font-size:16.5px; line-height:1.75; max-width:680px; }

@media (max-width:880px){
  .hero{ grid-template-columns:1fr; padding:110px 22px 60px; text-align:left; }
  .stage{ height:280px; margin-top:16px; }
  .stage-tile{ width:240px; height:240px; }
  .page-header{ padding:110px 22px 30px; }
}