/* Naytra — HERO Variant B: black brand card + statement (Hahn & Co composition).
   Static — no intro animation, no live feed. Warm neutral ground; a floating black
   card holds the Naytra lockup on the left; the positioning statement sits on the
   right. TEMPORARY comparison copy below the real hero. Depends on tokens + base. */

.herob{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding:120px clamp(24px,6vw,80px);
  background:var(--sunk);color:var(--ink);   /* warm system ground */
}

.herob__inner{width:100%;max-width:var(--content-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(36px,6vw,90px);align-items:center}

/* Left — floating black brand card, lockup anchored bottom-left */
.herob__card{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;
  background:var(--ground);color:var(--on-ground);display:flex;align-items:flex-end;
  padding:clamp(22px,3vw,34px);
  box-shadow:0 46px 90px -34px rgba(20,15,9,.55)}
.herob__lockup{display:inline-flex;align-items:center;gap:14px}
.herob__mark{width:clamp(26px,3vw,36px);height:auto;flex:none;display:block;fill:currentColor}
.herob__word{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;line-height:1;
  font-size:clamp(30px,3.6vw,48px);color:currentColor}

/* Right — the positioning statement (our system: Fraunces, light) */
.herob__title{font-family:var(--font-serif);font-weight:340;
  font-size:clamp(32px,4.4vw,60px);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin:0;max-width:20ch;text-wrap:balance}
.herob__body{font-family:var(--font-sans);font-weight:400;
  font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:var(--ink-2);
  margin:clamp(20px,2.4vw,30px) 0 0;max-width:44ch}

@media (max-width:820px){
  .herob{padding:110px 22px}
  .herob__inner{grid-template-columns:1fr;gap:44px}
  .herob__card{max-width:360px}
}