/* =========================================================
   KUMBR Studio — Legal Pages (Terms & Privacy)
   Minimal, clean, premium typography
   CSS-driven animations (no GSAP dependency for visibility)
   ========================================================= */

/* Header — dark text on light bg */
.header--legal .nav-logo-dark{display:block}
.header--legal .nav-logo-white{display:none}
.header--legal .menu-btn-label{color:var(--dark)}
.header--legal .menu-line{background:var(--dark)}

/* Page wrapper */
.page-legal{overflow-x:hidden}

/* ── HERO ── */
.lg-hero{
    position:relative;
    background:#f4f4f2;
    padding:clamp(160px,20vh,240px) 0 clamp(60px,8vh,100px);
    overflow:hidden;
}
.lg-hero-inner{
    max-width:900px;
    margin:0 auto;
    padding:0 var(--pad);
}

/* Hero animations — pure CSS keyframes (no JS dependency) */
@keyframes lgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lgSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes lgSlideUpSm{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes lgLineExpand{from{width:0}to{width:60px}}

.lg-hero-ey{
    font-family:var(--font-body);font-size:10px;font-weight:300;
    letter-spacing:.4em;text-transform:uppercase;
    color:var(--gold);
    margin-bottom:clamp(24px,3vh,40px);
    animation:lgFadeIn .8s ease .3s both;
}
.lg-hero-title{
    font-family:var(--font);
    font-size:clamp(40px,6vw,80px);
    font-weight:700;line-height:1;
    letter-spacing:-.04em;
    color:var(--dark);
    margin:0;
    animation:lgSlideUp 1.2s cubic-bezier(.16,1,.3,1) .45s both;
}
.lg-hero-title em{
    font-weight:300;font-style:italic;
    color:var(--gold);
}
.lg-hero-meta{
    margin-top:clamp(20px,3vh,36px);
    font-family:var(--font-body);font-size:12px;font-weight:300;
    letter-spacing:.08em;
    color:rgba(0,0,0,.3);
    animation:lgSlideUpSm 1s ease .7s both;
}

/* Accent line below hero */
.lg-hero-line{
    height:2px;
    background:var(--gold);
    margin-top:clamp(40px,5vh,60px);
    border-radius:2px;
    animation:lgLineExpand .8s cubic-bezier(.16,1,.3,1) .8s both;
}

/* ── CONTENT ── */
.lg-content{
    background:#f4f4f2;
    padding:clamp(60px,8vh,100px) 0 clamp(100px,14vh,180px);
}
.lg-content-inner{
    max-width:740px;
    margin:0 auto;
    padding:0 var(--pad);
}

/* Section blocks — scroll reveal */
.lg-section{
    margin-bottom:clamp(48px,6vh,72px);
    opacity:0;transform:translateY(24px);
    transition:opacity .9s ease, transform .9s ease;
}
.lg-section.lg-visible{
    opacity:1;transform:translateY(0);
}
.lg-section:last-child{margin-bottom:0}

.lg-section-title{
    font-family:var(--font);
    font-size:clamp(22px,2.5vw,32px);
    font-weight:700;line-height:1.1;
    letter-spacing:-.03em;
    color:var(--dark);
    margin:0 0 clamp(16px,2vh,24px);
}

.lg-section-subtitle{
    font-family:var(--font);
    font-size:clamp(16px,1.4vw,20px);
    font-weight:600;line-height:1.2;
    letter-spacing:-.02em;
    color:var(--dark);
    margin:clamp(24px,3vh,36px) 0 clamp(10px,1.5vh,16px);
}

.lg-text{
    font-family:var(--font-body);
    font-size:clamp(14px,1vw,16px);
    font-weight:300;line-height:1.85;
    color:rgba(0,0,0,.5);
    margin:0 0 16px;
}
.lg-text:last-child{margin-bottom:0}

.lg-text a{
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:rgba(180,154,106,.3);
    transition:text-decoration-color .3s var(--ease);
}
.lg-text a:hover{
    text-decoration-color:var(--gold);
}

/* Lists */
.lg-list{
    list-style:none;
    padding:0;margin:0 0 16px;
}
.lg-list li{
    font-family:var(--font-body);
    font-size:clamp(14px,1vw,16px);
    font-weight:300;line-height:1.85;
    color:rgba(0,0,0,.5);
    padding-left:20px;
    position:relative;
    margin-bottom:4px;
}
.lg-list li::before{
    content:'';
    position:absolute;left:0;top:11px;
    width:6px;height:6px;
    border:1px solid var(--gold);
    border-radius:50%;
}

/* Divider between sections */
.lg-divider{
    width:40px;height:1px;
    background:rgba(0,0,0,.08);
    margin:clamp(48px,6vh,72px) 0;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
    .lg-hero{padding:clamp(120px,16vh,180px) 0 clamp(40px,5vh,60px)}
    .lg-hero-title{font-size:clamp(32px,9vw,48px)}
    .lg-hero-ey{font-size:9px;letter-spacing:.3em}
    .lg-content{padding:clamp(40px,6vh,60px) 0 clamp(60px,8vh,100px)}
    .lg-section-title{font-size:clamp(20px,5vw,28px)}
}

@media(max-width:480px){
    .lg-hero-title{font-size:clamp(28px,8vw,38px)}
    .lg-hero-meta{font-size:11px}
    .lg-section-title{font-size:clamp(18px,5vw,24px)}
}