/* ==========================================================================
   히어로 — 상간소송 원고 랜딩페이지 (법무법인 정서)
   ========================================================================== */
/* ---------- 히어로 ---------- */
/* 왼쪽 글자 + 오른쪽 인물. 인물 하단 = 화면 하단. 스크롤하면 인물은 제자리에 남고(패럴랙스) 아래부터 배경으로 녹아 사라짐 */
.hero{position:relative;height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));min-height:640px;overflow:hidden}
.hero__in{position:relative;height:100%;max-width:calc(var(--wrap) + 48px);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.hero__copy{position:relative;z-index:3;height:100%;max-width:760px;display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.hero__tag{font-size:15px;font-weight:500;color:var(--gold-2);letter-spacing:.02em;margin-bottom:26px}
.hero__tag::before{content:"[";margin-right:.9em}.hero__tag::after{content:"]";margin-left:.9em}
.hero h1{font-family:var(--serif);font-weight:200;white-space:nowrap;font-size:clamp(34px,3.6vw,52px);line-height:1.5;letter-spacing:-.04em}
.hero h1 b{font-weight:200;color:var(--gold-2);white-space:nowrap}
.hero__stat{margin-top:128px;display:flex;align-items:center;gap:22px}
.hero__stat strong{font-family:var(--serif);font-weight:200;font-size:56px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero__stat strong small{font-size:22px}
.hero__stat strong small.hero__pre{margin-right:10px}
.hero__stat strong small:last-child{margin-left:4px}
.hero__num{display:inline-block;font-weight:600;min-width:3ch;background:linear-gradient(120deg,#efe3d2,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stat p{font-size:16px;line-height:1.55;color:var(--tx-2);padding-left:22px;border-left:1px solid var(--line-2)}
.hero__cta{margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__cta p{font-size:14px;line-height:1.6;color:var(--mute);padding-left:6px}
.hero__note{display:grid;grid-template-columns:auto auto;column-gap:.4em;justify-content:start}
/* 인물: 오른쪽 하단 = 화면 하단. 스크롤하면 제자리에서 서서히 어두워지며 배경색에 묻힘 */
.hero__person{position:absolute;z-index:1;right:max(0px,calc((100% - var(--wrap))/2 - 40px));bottom:0;height:calc(100% - 24px);aspect-ratio:1123/1800}
.hero__person img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:bottom center;filter:brightness(calc(1 - var(--p,0)*1.4)) contrast(.86) saturate(.95)}
/* 스크롤 양만큼 아래부터 배경색이 차오름 → 하단 경계가 보이지 않음 */
/* 스크롤: 검정 덧칠 대신 사진 자체를 아래부터 투명하게 → 뒤 골드 빛 위에 사각형 경계가 생기지 않음 */
.hero__person img{-webkit-mask-image:linear-gradient(180deg,#000 calc(85% - var(--p,0)*120%),rgba(0,0,0,calc(1 - var(--p,0)*2.4)) 100%);mask-image:linear-gradient(180deg,#000 calc(85% - var(--p,0)*120%),rgba(0,0,0,calc(1 - var(--p,0)*2.4)) 100%)}
.hero__glow{opacity:calc(1 - var(--p,0)*1.6)}
/* 인물 뒤 장식: 골드 빛 + 얇은 원 */
.hero__glow{position:absolute;z-index:0;left:50%;top:40%;width:195%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(227,201,170,.42) 0%,rgba(218,194,163,.24) 30%,rgba(218,194,163,.08) 52%,transparent 70%)}
.hero__name{position:absolute;z-index:3;right:max(24px,calc((100% - var(--wrap))/2));bottom:48px;padding:18px 24px;border-radius:14px;background:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.92) 100%);opacity:calc(1 - var(--p,0)*1.6)}
.hero__name small{display:block;font-size:13px;color:var(--gold-2)}
.hero__name b{font-family:var(--serif);font-size:22px;font-weight:200}
.hero__name b span{font-size:15px;margin-left:6px;color:var(--tx-2)}