/* Shared typography roles. This file is the final typography authority. */
:root{
--type-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--type-display:clamp(40px,4.5vw,72px);
--type-section:clamp(30px,3vw,40px);
--type-card:clamp(22px,2vw,26px);
--type-body:16px;--type-label:12px;--type-action:15px;
}
body:is([data-page-kind="home"],[data-page-kind="intro"]),body[data-page-kind="service"],body[data-page-kind="blog"],body[data-page-kind="article"],body[data-page-kind="contact"]{font-family:var(--type-family)}
:is(.d8-home,.ds-hero,.ds-services,.commerce-page,.commerce-section,.contact-layout) :is(h1,h2,h3,h4,p,a,button,input,select,textarea,summary,label){font-family:var(--type-family)!important}
:is(.d8-intro h1,.ds-slide h1,.commerce-article>h1,.page-headline h1.title){font-size:var(--type-display)!important;line-height:1.15!important;letter-spacing:-.045em!important;font-weight:700!important}
:is(.d8-home h2,.commerce-section h2,.ds-service-copy h3,.ds-journal-intro h2,.contact-section-heading h3,.contact-location .contact-section-heading h3){font-size:var(--type-section)!important;line-height:1.3!important;letter-spacing:-.035em!important;font-weight:700!important}
body[data-page-kind="service"] .wpb-content-wrapper h2.title{font-family:var(--type-family)!important;font-size:var(--type-section)!important;line-height:1.3!important;letter-spacing:-.035em!important;font-weight:700!important}
:is(.d8-home h3,.ds-journal-copy h3,.commerce-steps h3,.commerce-article section h2,.contact-info-grid h4){font-size:var(--type-card)!important;line-height:1.35!important;letter-spacing:-.025em!important;font-weight:700!important}
:is(.d8-home p,.ds-slide p,.ds-service-copy p,.ds-journal-intro p,.commerce-intro,.commerce-article section p,.commerce-steps p,.contact-layout p,.contact-map address){font-size:var(--type-body)!important;line-height:1.75!important;letter-spacing:-.015em!important;font-weight:400}
:is(.ds-eyebrow,.commerce-eyebrow,.d8-intro .ds-eyebrow,.ds-journal-copy .ds-eyebrow){font-family:var(--type-family)!important;font-size:var(--type-label)!important;line-height:1.5!important;letter-spacing:.06em!important;font-weight:600!important}
:is(.d8-home,.ds-services,.contact-layout) :is(summary,form>h4,form>h4 label){font-size:16px!important;line-height:1.5!important;font-weight:600!important;letter-spacing:-.015em!important}
body a.button,body .callback-row>.button,.d8-contact form input[type=submit],.contact-layout input[type=submit]{font-family:var(--type-family)!important;font-size:var(--type-action)!important;font-weight:600!important;letter-spacing:-.01em!important}
:is(.d8-contact,.contact-layout) :is(input[type=tel],select,textarea){font-size:16px!important;line-height:1.5!important}
:is(.d8-contact,.contact-layout) .contact-consent{font-size:13px!important;line-height:1.6!important}
.ds-service-lead{font-weight:600!important}
@media(max-width:767px){:root{--type-body:15px;--type-label:11px;--type-action:14px}}

/* The inquiry and FAQ panels share the same title and body roles. */
.d8-contact .d8-faq h3{font-family:var(--type-family)!important;font-size:var(--type-section)!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.035em!important}
.d8-contact .d8-faq summary{font-family:var(--type-family)!important;font-size:16px!important;font-weight:600!important;line-height:1.5!important;letter-spacing:-.015em!important}
.d8-contact .d8-faq p{font-family:var(--type-family)!important;font-size:var(--type-body)!important;font-weight:400!important;line-height:1.75!important;letter-spacing:-.015em!important}

/* Home section titles share the portfolio statement typography. */
body:is([data-page-kind=home],[data-page-kind=intro]){--home-section-title:clamp(34px,3.8vw,52px)}
body:is([data-page-kind=home],[data-page-kind=intro]) :is(.d8-statement h2,.home-services .d8-how h2,.home-method .home-section-intro h2,.d8-contact h2,.d8-contact .d8-faq h3,.client-banner-copy h3){font-family:var(--type-family)!important;font-size:var(--home-section-title)!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.035em!important}
@media(max-width:767px){body:is([data-page-kind=home],[data-page-kind=intro]){--home-section-title:32px}}

/* Shared eyebrow/title rhythm for peer home sections. */
body:is([data-page-kind=home],[data-page-kind=intro]){--home-heading-gap:24px}
body:is([data-page-kind=home],[data-page-kind=intro]) :is(.home-services .d8-how>div,.home-section-intro>div,.d8-contact>div,.client-banner-copy)>.ds-eyebrow{display:block;margin:0 0 var(--home-heading-gap)!important}
body:is([data-page-kind=home],[data-page-kind=intro]) :is(.home-services .d8-how>div,.home-section-intro>div,.d8-contact>div,.client-banner-copy)>.ds-eyebrow+:is(h2,h3){margin-top:0!important}
/* Latin capitals leave more visible space above the glyphs than Korean titles. */
body:is([data-page-kind=home],[data-page-kind=intro]) .client-banner-copy>.ds-eyebrow+h3{margin-top:-8px!important}
body:is([data-page-kind=home],[data-page-kind=intro]) .d8-home .client-banner-copy>.ds-eyebrow+h3{margin-top:-8px!important}

/* One responsive title hierarchy: opening > introduction > section > card. */
body:is([data-page-kind=home],[data-page-kind=intro]){--home-hero-title:clamp(48px,6.4vw,112px);--home-intro-title:clamp(36px,4.5vw,72px);--home-section-title:clamp(28px,3.3vw,52px)}
body:is([data-page-kind=home],[data-page-kind=intro]) .commerce-opening-copy h1{font-size:var(--home-hero-title)!important;line-height:1.25!important}
body:is([data-page-kind=home],[data-page-kind=intro]) .d8-intro h2{font-size:var(--home-intro-title)!important;line-height:1.3!important;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:767px){
 body:is([data-page-kind=home],[data-page-kind=intro]){--home-hero-title:clamp(32px,7.8vw,56px);--home-intro-title:clamp(26px,6.3vw,40px);--home-section-title:clamp(24px,5.8vw,34px)}
 body:is([data-page-kind=home],[data-page-kind=intro]) .commerce-opening-copy h1{letter-spacing:-.055em!important;line-height:1.4!important}
 body:is([data-page-kind=home],[data-page-kind=intro]) .d8-intro h2 br{display:none}
 .contact-brand-intro h2{font-size:clamp(32px,8vw,52px)!important}
 .single .project .project-content h1{font-size:clamp(30px,7vw,48px)!important;line-height:1.25!important;overflow-wrap:anywhere}
}
/* Mobile navigation: readable links and a menu above sticky WORK filters. */
@media(max-width:768px){
 body #mobile-menu > li > a{font-family:Pretendard,sans-serif!important;font-size:clamp(28px,7.7vw,36px)!important;font-weight:700!important;line-height:1.25!important;letter-spacing:-.025em!important;padding-top:10px!important;padding-bottom:10px!important}
 body.is-mobile-menu #masthead{z-index:1000!important}
 body.is-mobile-menu .work-toolbar{visibility:hidden!important;pointer-events:none!important}
}

@media(max-width:768px){
 body.is-mobile-menu #masthead{z-index:1000!important}
 body #masthead #mobile-menu > li > a,body #masthead #mobile-menu > li > a span{color:#171717!important}
 body #masthead #mobile-menu > li.current-menu-item > a,body #masthead #mobile-menu > li.current-menu-item > a span{color:#e7344c!important}
 body.dark-scheme #masthead .menu-slide-in-overlay .holder{background:#171717!important}
 body.dark-scheme #masthead #mobile-menu > li > a,body.dark-scheme #masthead #mobile-menu > li > a span{color:#fff!important}
}