/* The supplied INBORN PROFESSIONAL artwork is used intact at every brand mark. */
.brand-logo{display:block;width:130px;height:auto;aspect-ratio:711/246;object-fit:contain;flex-shrink:0;filter:brightness(0)}
.logo-white{filter:brightness(0) invert(1)}
.header-home{display:grid;gap:5px;line-height:1;min-height:44px}
.header-home .header-brand-row{display:flex;align-items:center;gap:10px;font-size:21px;margin:0;letter-spacing:0}
.header-brand-row .brand-logo{width:100px;filter:brightness(0) invert(1)}
.header-home .header-brand-row b{font-weight:300}.header-home .header-brand-row i{padding:0;font-size:16px}
.header-home .header-series{margin:0;font-size:8px;letter-spacing:.14em}
.site-header.is-fixed .header-brand-logo,.site-header.hero-product:not(.is-fixed) .header-brand-logo{filter:brightness(0)}
.site-header.on-dark.is-fixed .header-brand-logo{filter:brightness(0) invert(1)}
.hero .hero-inborn{display:block;left:var(--space);top:20%;width:46vw;max-width:780px;font-size:0;line-height:1;letter-spacing:0;transform:none}
.hero-inborn .brand-logo{width:100%;filter:brightness(0) invert(1)}
.hero.is-product-slide .hero-inborn{width:26vw;max-width:400px;top:17%;font-size:0}
.hero.is-product-slide .hero-official-logo{filter:brightness(0)}
.hero-outro small{display:flex;align-items:center;justify-content:center;gap:20px}
.hero-outro small .brand-logo{width:125px}
.menu-top #menu-title{display:flex;align-items:center;gap:20px;line-height:1.5}
.menu-top .brand-logo{width:105px}
.story-marquee{padding:26px 0 30px}
.marquee-track>span{display:flex;align-items:center;gap:.24em;font-size:clamp(24px,3.6vw,58px);line-height:1.15}
.marquee-track .marquee-logo{width:3.6em;margin-right:.15em}
.salon-brief>.eyebrow{display:flex;align-items:center;gap:17px}
.salon-brief>.eyebrow .brand-logo{width:105px}
.choice-product figcaption .brand-logo{width:96px}
.treatment-brand-line{display:flex;align-items:center;gap:.25em;margin-top:.1em}
.treatment-brand-line .brand-logo{width:min(26vw,360px)}
.studio-word{width:min(50svh,48vw);font-size:0;line-height:1;top:11%;transform:translateX(34.5992%) rotate(90deg)}
.studio-word .brand-logo{width:100%}
.project-ribbon strong{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.project-ribbon .brand-logo{width:clamp(110px,14vw,200px);height:auto;object-fit:contain}
.care-timeline h4 .brand-logo{width:180px;margin:17px 0}
.menu-label h3{display:flex;align-items:center;gap:18px}
.menu-label h3 .brand-logo{width:120px}
.footer-word{width:min(100%,900px);font-size:0;line-height:1;margin:45px 0}
.footer-word .brand-logo{width:100%}
.footer-top>p{display:flex;align-items:center;gap:24px}
.footer-top>p>.brand-logo{width:115px}
.footer-bottom>p{display:flex;align-items:center;gap:17px}
.footer-bottom>p>.brand-logo{width:80px}
.mobile-menu-link small .brand-logo{width:58px}
.motion-ready .hero.motion-near .hero-official-logo{will-change:transform,opacity}
@media(min-width:701px) and (max-height:800px){
 .hero .hero-inborn{top:clamp(88px,16svh,128px);width:min(46vw,67svh)}
 .hero.is-product-slide .hero-inborn{top:18%;width:min(26vw,42svh)}
}
@media(max-width:700px){
 .header-home .header-brand-row{gap:8px;font-size:18px}.header-brand-row .brand-logo{width:82px}
 .header-home .header-brand-row i{font-size:14px}.header-home .header-series{font-size:7px}
 .hero .hero-inborn{left:20px;top:112px;width:min(68vw,38svh);max-width:none;transform-origin:0 0;transform:translateX(34.5992%) rotate(90deg)}
 .hero.is-product-slide .hero-inborn{visibility:hidden}
 .hero-outro small{gap:13px;font-size:10px}.hero-outro small .brand-logo{width:95px}
 .menu-top #menu-title{gap:12px;font-size:8px}.menu-top .brand-logo{width:88px}
 .story-marquee{padding:22px 0 25px}.marquee-track>span{font-size:26px}.marquee-track .marquee-logo{width:3.4em}
 .salon-brief>.eyebrow{gap:13px;font-size:9px}.salon-brief>.eyebrow .brand-logo{width:85px}
 .choice-product figcaption .brand-logo{width:80px}
 .treatment-brand-line .brand-logo{width:min(52vw,230px)}
 .studio-word{left:14px;top:88px;width:min(46svh,63vw)}
 .project-ribbon strong{gap:9px 12px}.project-ribbon .brand-logo{width:110px;height:auto}
 .care-timeline h4 .brand-logo{width:160px}
 .menu-label h3{gap:14px;font-size:19px}.menu-label h3 .brand-logo{width:108px}
 .footer-word{margin:34px 0 30px}.footer-top>p{align-items:flex-start;flex-direction:column;gap:13px}
 .footer-top>p>.brand-logo{width:105px}.footer-bottom>p>.brand-logo{width:72px}
}
@media(max-width:700px) and (max-height:720px){.hero .hero-inborn{top:96px;width:min(62vw,35svh)}}
@media(max-width:700px) and (max-height:620px){.hero:not(.is-product-slide) .hero-description{display:none}}

/* One monochrome treatment per surface. Preserve the supplied logo geometry. */
.brand-pair .professional-mark,.brand-pair img{filter:brightness(0)}
.brand-pair,.section-heading h2{color:#000}
.hero-lockup{color:#fff;mix-blend-mode:normal}
.hero-col img{filter:brightness(0) invert(1);mix-blend-mode:normal}
.hero.is-product-slide .hero-lockup{color:#000}
.hero.is-product-slide .hero-col img{filter:brightness(0);mix-blend-mode:normal}
.hero.is-product-slide .hero-outro small .brand-logo{filter:brightness(0)}
.hero.is-product-slide .hero-outro small{color:#000}
.footer-top>p,.footer-bottom>p{color:#fff}

/* Let the cinematic title own the opening. The header enters after scrolling. */
.site-header{transition:opacity .45s ease,transform .45s ease,background .35s,color .35s,visibility 0s}
.site-header:not(.is-fixed){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px)}
.site-header.is-fixed{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);color:#000}
.site-header.on-dark.is-fixed{color:#fff}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}