/* Final polish: type rhythm + interaction states (28 Oct 2026). Loaded last; safe to remove. */
html{text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,.display,.rv-title{text-wrap:balance;font-feature-settings:"kern" 1}
p,li,blockquote{text-wrap:pretty}
.lede,.intro p,.about p,.faq-i p,.al-b,.rv p,.why p,.areas p{max-width:64ch}
.display{letter-spacing:-.028em}
.display em,.display i{letter-spacing:-.01em}
.eyebrow,.kicker{font-feature-settings:"tnum" 1}
.display+p,.display+.lede{margin-top:clamp(14px,1.6vw,22px)}
.sec-head{row-gap:clamp(14px,2vw,24px)}

/* links */
a{text-underline-offset:.22em;text-decoration-thickness:1px}
.text-link,.link-call{transition:color .25s var(--ease),border-color .25s var(--ease)}
.text-link:hover{color:var(--sky);border-color:var(--sky)}
.text-link:active,.link-call:active,.nav a:active{opacity:.7}

/* buttons: press feedback uses the independent `scale` property so the magnetic transform is untouched */
.btn,.btn-small,.vis-fam,button{transition:transform .5s var(--ease),scale .18s var(--ease),background-color .25s,box-shadow .25s,color .25s}
.btn:active,.btn-small:active,.vis-fam:active,.vis-tabs label:active{scale:.97}
.btn:hover{box-shadow:0 10px 28px -12px rgba(5,164,232,.65)}

/* cards */
.rv,.al,.faq-i{transition:border-color .35s var(--ease),background-color .35s var(--ease),translate .35s var(--ease)}
@media (hover:hover){.rv:hover{translate:0 -2px}}
.vis-swatch:active i{transform:scale(.96)}
.vis-swatch i{transition:transform .25s var(--ease),box-shadow .2s}

/* spacing / alignment */
@media (max-width:1100px){.hero-ctas>span{flex-wrap:wrap;width:auto}}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-small,.vis-fam,.rv,.al,.faq-i,.vis-swatch i,button{transition:none!important}
  .btn:active,.btn-small:active,.vis-fam:active,.vis-tabs label:active{scale:1}
  .rv:hover{translate:none}
}
.vis-head p:not(.vis-kicker){max-width:60ch}

/* brand: Julian's logo green as the eyebrow accent (AA: #24692B on white 6.4:1, #6CC24A on navy 6.6:1) */
:root{--leaf:#6CC24A;--leaf-ink:#24692B}
.eyebrow{color:var(--leaf-ink)}
.eyebrow.light,.services .eyebrow,.selemix .eyebrow,.reviews .eyebrow,.foot .eyebrow{color:var(--leaf)}
.brand-logo{height:48px}
.nav.scrolled .brand-logo{height:40px}
@media (max-width:760px){.brand-logo,.nav.scrolled .brand-logo{height:36px}}
.fg-brand .foot-logo,.foot-logo{height:auto;width:min(210px,60vw)}