/* ==========================================================
   VM AGENCY — TYPOGRAPHY SYSTEM
========================================================== */
:root{
    --font-family:"Manrope",sans-serif;
    --font-size-display:clamp(2.25rem,3.7vw + .25rem,3.625rem);
    --font-size-h1:clamp(2.25rem,3.7vw + .25rem,3.625rem);
    --font-size-h2:clamp(1.875rem,2.8vw + .25rem,3rem);
    --font-size-h3:clamp(1.25rem,1.5vw + .5rem,2rem);
    --font-size-h4:clamp(1.0625rem,.6vw + .875rem,1.25rem);
    --font-size-body-lg:clamp(1rem,.65vw + .8rem,1.25rem);
    --font-size-body:clamp(.9375rem,.35vw + .875rem,1.125rem);
    --font-size-small:clamp(.8125rem,.2vw + .75rem,.875rem);
    --font-size-caption:.75rem;
    --line-height-heading:1.12;
    --line-height-body:1.7;
    --line-height-compact:1.4;
    --letter-spacing-heading:-.035em;
}
/* ==========================================================
   BASE TYPOGRAPHY
========================================================== */
html{
    font-size:16px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
body{
    font-family:var(--font-family);
    font-size:var(--font-size-body);
    font-weight:400;
    line-height:var(--line-height-body);
}
h1,h2,h3,h4,h5,h6{
    margin-top:0;
    font-family:var(--font-family);
    color:var(--color-black,#000);
}
h1,h2,h3{
    letter-spacing:var(--letter-spacing-heading);
}
/* ==========================================================
   TITLES
========================================================== */
.title-xl{
    font-size:var(--font-size-display);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.045em;
}
.title-lg{
    font-size:var(--font-size-h2);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.035em;
}
.title-md{
    font-size:var(--font-size-h3);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.025em;
}
.title-sm{
    font-size:var(--font-size-h4);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.015em;
}
/* ==========================================================
   BODY TEXT
========================================================== */
.text-lg{
    font-size:var(--font-size-body-lg);
    font-weight:400;
    line-height:var(--line-height-body);
}
.text{
    font-size:var(--font-size-body);
    font-weight:400;
    line-height:var(--line-height-body);
}
.text-sm{
    font-size:var(--font-size-small);
    font-weight:500;
    line-height:1.5;
}
.text-caption{
    font-size:var(--font-size-caption);
    font-weight:500;
    line-height:1.5;
}
/* ==========================================================
   EYEBROWS — SECTION LABELS
========================================================== */
.eyebrow{
    font-size:var(--font-size-small);
    font-weight:700;
    line-height:1.4;
    letter-spacing:.12em;
    text-transform:uppercase;
}
/* ==========================================================
   RESPONSIVE FINE-TUNING
========================================================== */
@media(max-width:576px){
    :root{
        --line-height-body:1.65;
    }
    .title-xl{
        line-height:1.08;
    }
    .title-lg{
        line-height:1.15;
    }
    .title-md{
        line-height:1.25;
    }
}
@media(max-width:360px){
    .title-xl{
        letter-spacing:-.04em;
    }
}