/* Mobile-first refinement across all portfolio routes. */
@media(max-width:650px){html{scroll-padding-top:100px!important}html body{font-size:14px!important;overflow-x:clip}.wrap{width:100%!important;padding:0 5%!important}main{min-width:0}html body main h1,html body .recruiter-hero h1{font-size:clamp(32px,8.4vw,46px)!important;line-height:1.15!important;letter-spacing:-.055em!important;overflow-wrap:normal!important}html body main h2,html body .section-head h2{font-size:clamp(26px,6.7vw,33px)!important;line-height:1.25!important;letter-spacing:-.045em!important}html body main h3{font-size:22px!important;line-height:1.35!important}html body main p,html body main li{font-size:13px!important;line-height:1.9!important}.section{padding:48px 0!important}.section-head{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin-bottom:27px!important}.section-head>p{margin-bottom:0!important}.page-hero{padding:43px 0 30px!important}.page-hero .eyebrow{margin-top:18px}.recruiter-hero{padding:40px 0 45px!important;min-height:0!important;gap:30px!important}.recruiter-hero h1{margin:20px 0 24px!important}.recruiter-hero figure{width:92%!important;max-width:360px!important;margin:auto!important}.recruiter-hero figure:before{inset:15px -10px 0 15px!important}.recruiter-hero figcaption{gap:15px;flex-wrap:wrap}.hero-actions{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:15px!important}.profile-facts{display:flex!important;flex-wrap:wrap!important;gap:10px!important}.profile-facts>span{padding:0!important;font-size:9px!important}.audience-routes,.digital-grid,.profile-detail-grid,.service-offers,.campaign-visual-grid,.campaign-detail-grid,.depth-grid,.partnership-grid,.process-grid,.tool-grid,.sector-grid,.project-meta,.media-grid,.record-grid,.projects,.feature-case-pair{grid-template-columns:1fr!important;gap:18px!important}.audience-routes a{padding:23px!important}.live-grid{grid-template-columns:1fr!important;gap:20px!important}.live-grid article img{max-height:280px;object-fit:cover}.live-copy{padding:23px!important}.live-links{display:flex;flex-wrap:wrap;gap:8px 16px!important}.live-links a{min-height:44px;display:inline-flex;align-items:center}.feature,.case-intro,.entertainment-feature,.home-about,.contact-panel,.contact-layout{grid-template-columns:1fr!important;gap:25px!important}.feature{padding:40px 0!important}.project-meta{padding:22px!important;gap:20px!important}.project-meta>div{border:0!important;padding:0!important}.project-meta p{margin:5px 0 0}.case-navigation{display:flex!important;flex-wrap:wrap!important;gap:9px!important;padding:0!important}.case-navigation a{padding:11px 16px!important;font-size:10px!important;min-height:44px!important}.statement,.case-focus{padding:30px 23px!important;margin:20px 0!important}.shinchat-spotlight{padding:32px 23px!important;grid-template-columns:1fr!important;gap:30px!important}.shinchat-responsibilities{gap:22px!important}.shinchat-channels{flex-wrap:wrap;gap:8px!important}.geo-result{padding:30px 23px!important}.geo-metrics{gap:24px!important}.geo-metrics strong{font-size:37px!important}.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.proof-grid article{padding:20px 15px!important}.proof-grid strong{font-size:32px!important}.proof-grid p,.proof-grid span{font-size:10px!important}.company-logo-grid{gap:12px!important}.career-detail summary{display:grid!important;grid-template-columns:1fr 24px!important;gap:12px!important;padding:23px 18px!important}.career-date{grid-column:1/-1!important}.career-position{min-width:0}.career-position strong{font-size:19px!important;line-height:1.35!important}.career-toggle{grid-column:2;grid-row:2}.career-description{padding:0 18px 23px!important}.skill-chips{flex-wrap:wrap;gap:7px!important}.journey-timeline{gap:14px!important}.page-directory summary{min-height:48px!important}.page-directory a{min-height:46px!important}.lesson-card,.service-offers article,.digital-grid>a,.profile-detail-grid article{padding:25px!important}.contact-email{font-size:clamp(16px,4.2vw,24px)!important;overflow-wrap:anywhere}.contact-panel{padding:25px!important}.contact-note{padding:24px!important}.detail-row{gap:15px!important;flex-wrap:wrap}.modern-footer{padding:35px 24px 20px!important;margin-top:45px!important}.footer-invitation{grid-template-columns:1fr!important;gap:24px!important}.footer-invitation h2{font-size:32px!important}.footer-contact{justify-content:space-between!important;width:100%!important}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:25px 20px!important}.footer-identity{grid-column:1/-1}.footer-columns>div>a{min-height:44px!important;display:flex!important;align-items:center}.footer-bottom{flex-wrap:wrap!important;gap:14px!important}.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}.next-project{gap:14px!important;padding:32px 0!important;flex-wrap:wrap}.next-project strong{font-size:28px!important;overflow-wrap:anywhere}.scroll-accent{left:-10px!important;top:48px!important}.choreo-heading:after{margin-top:12px!important}.writing-word{white-space:normal!important}html body .pill,html body .menu{min-height:46px!important}.text-link{min-height:44px;display:inline-flex!important;align-items:center}.text-link:after{bottom:7px!important}.tool-chips,.tool-tags{flex-wrap:wrap;word-break:normal}.back-top{width:42px!important;height:42px!important;right:13px!important;bottom:calc(13px + env(safe-area-inset-bottom))!important}.visual-story{margin-bottom:35px!important}.visual-story img{width:100%!important;height:auto!important;min-height:0!important}.hero-actions .pill{padding:14px 20px!important}}
@media(max-width:380px){html body header .brand-mark{width:155px!important}.proof-grid{grid-template-columns:1fr!important}.footer-columns{grid-template-columns:1fr!important}.footer-identity{grid-column:auto}.company-logo-grid figcaption{overflow-wrap:anywhere}.hero-actions{gap:10px!important}}
@media(hover:none){.soft-hover:hover:before{box-shadow:none}.choreo-card{transition-delay:0ms!important}}
/* Phone composition: compact navigation, balanced rhythm, and readable cards. */
@media(max-width:650px){html body header,html body header.is-scrolled{top:8px!important;height:66px!important;margin:8px -3px 0!important;padding:0 13px!important;gap:12px!important;border-radius:14px!important}html body header .brand-mark{width:180px!important;height:30px!important}html body header .brand-mark img{width:100%!important;max-width:100%!important;height:auto!important}html body header button.menu{min-height:42px!important;padding:9px 13px!important;font-size:10px!important}html body header nav.open{top:75px!important;max-height:calc(100dvh - 100px);overflow-y:auto;padding:10px!important;border-radius:14px!important}html body header nav a{min-height:47px!important;font-size:12px!important}.recruiter-hero{padding:36px 0 38px!important}.recruiter-hero>div{min-width:0}.recruiter-hero .eyebrow{font-size:9px!important;letter-spacing:.14em!important}html body .recruiter-hero h1{font-size:clamp(31px,8.1vw,43px)!important;line-height:1.16!important;margin:18px 0 23px!important}.recruiter-hero .profile-title{font-size:10px!important;letter-spacing:.07em!important}.recruiter-hero p{font-size:13px!important;line-height:1.85!important}.hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:23px!important}.hero-actions .pill{justify-content:center!important;text-align:center!important;display:flex!important;min-height:50px!important;border-radius:12px!important}.hero-actions .text-link{justify-self:center}.profile-facts{justify-content:center!important;gap:8px 16px!important;padding-top:18px!important;margin-top:18px!important}.recruiter-hero figure{width:100%!important;max-width:340px!important;padding-bottom:12px!important}.recruiter-hero figure img{aspect-ratio:1/1.12!important;border-radius:22px!important;object-position:center 23%!important}.recruiter-hero figure:before{display:none!important}.recruiter-hero figcaption{font-size:9px!important;justify-content:space-between!important}.platform-ticker{border-radius:10px!important;margin-bottom:25px!important;padding:12px 0!important}.platform-ticker-track>span{font-size:8px!important;gap:22px!important}.page-directory{margin:0 0 28px!important;border-radius:12px!important}.page-directory summary{font-size:11px!important}.section{padding:44px 0!important}.section-head{margin-bottom:24px!important}.section-head .eyebrow{font-size:9px!important}html body .section-head h2{font-size:clamp(25px,6.6vw,30px)!important}.live-grid article,.digital-grid>a,.service-offers article,.lesson-card,.profile-detail-grid article{border-radius:15px!important}.collection-art{padding:25px!important;border-radius:15px!important}.feature-case-copy{min-width:0}.feature-case-copy h3{font-size:27px!important}.featured-result{flex-wrap:wrap!important;gap:12px!important}.collection-caption{gap:15px!important;padding:17px 3px!important}.collection-caption h3{font-size:19px!important}.company-logo-grid .logo-surface{height:110px!important;padding:14px!important}.company-logo-grid figcaption{min-height:100px!important;font-size:10px!important}.company-logo-grid figcaption small{font-size:8px!important}.company-logo-grid .destination-label{display:block;min-height:35px;padding:10px 8px;font-size:9px}.proof-grid article{padding:22px 17px!important}.proof-grid strong{font-size:30px!important}.shinchat-intro .pill{display:flex!important;justify-content:center!important;text-align:center!important;font-size:10px!important;padding:14px 17px!important}.shinchat-intro .text-link{display:flex!important;justify-content:center}.freelance-grid article{padding:23px!important}.freelance-grid h3{font-size:21px!important;margin:18px 0 12px!important}.project-meta{border-radius:14px!important}.media-grid img,.record-grid img{max-height:420px!important;height:auto!important}.modern-footer{border-radius:18px!important}.footer-columns h3{font-size:10px!important;margin-bottom:8px!important}.footer-invitation h2{line-height:1.18!important}.footer-bottom{font-size:9px!important}.section-sweep{height:1px!important}.scroll-accent{height:24px!important}.section-in-view .scroll-accent{height:35px!important}}
@media(max-width:360px){html body header .brand-mark{width:150px!important}html body .recruiter-hero h1{font-size:29px!important}.company-logo-grid{grid-template-columns:1fr!important}.company-logo-grid .logo-surface{height:145px!important}.company-logo-grid figcaption{min-height:90px!important}.profile-facts{justify-content:flex-start!important}}

/* Unified premium navigation for desktop and phone. */
html body header,html body header.is-scrolled{border:1px solid #deddd8!important;border-radius:22px!important;background:linear-gradient(125deg,#ffffffed 0%,#f7f6f2f5 65%,#efeee9f2 100%)!important;box-shadow:0 8px 28px #22252a08,inset 0 1px 0 #fff!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
html body header.is-scrolled{box-shadow:0 12px 32px #22252a12,inset 0 1px 0 #fff!important}
html body header .logo{border-right:0!important;padding-right:12px!important}
html body header nav a{font-size:11px!important;letter-spacing:.015em!important;text-transform:none!important;color:#55575b!important;border-radius:10px!important;padding:11px 13px!important}
html body header nav a:hover,html body header nav a[aria-current="page"]{background:#eae9e4!important;color:#171d19!important;box-shadow:none!important;border-color:transparent!important}
html body header nav a:after{bottom:5px!important;left:14px!important;right:14px!important;background:#638a70!important}
html body header a.contact-link{border-radius:13px!important;min-height:46px!important;padding:7px 8px 7px 18px!important;gap:17px!important;font-size:11px!important;text-transform:none!important;letter-spacing:0!important;background:linear-gradient(135deg,#4e5053,#242629)!important;border-color:#35373a!important;box-shadow:inset 0 1px 0 #ffffff35,0 3px 7px #20222612!important}
html body header a.contact-link span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ffffff13;border:1px solid #ffffff1c;font-size:17px;transition:transform .35s}
html body header a.contact-link:hover span{transform:rotate(45deg)}
html body header a:focus-visible,html body header button:focus-visible{outline:2px solid #638a70!important;outline-offset:4px!important}
@media(min-width:651px) and (max-width:1150px){html body header nav a{padding:10px 8px!important;font-size:10px!important}}
@media(max-width:650px){html body header,html body header.is-scrolled{height:70px!important;padding:0 16px!important;border-radius:19px!important;gap:10px!important}html body header .brand-mark{width:176px!important}html body header .logo{padding:0!important}html body header button.menu{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;border-radius:12px!important;min-width:80px!important;min-height:42px!important;padding:10px 12px!important;background:linear-gradient(135deg,#fafafa,#e5e4e0)!important;color:#292b2e!important;border:1px solid #d8d7d1!important;box-shadow:inset 0 1px 0 #fff,0 2px 3px #00000005!important;text-transform:none!important;letter-spacing:0!important;font-size:11px!important}html body header button.menu:after{content:'';width:13px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .3s}html body header button.menu[aria-expanded="true"]:after{transform:rotate(-45deg)}html body header nav.open{top:80px!important;border-radius:19px!important;background:#faf9f6!important;padding:12px!important;gap:4px!important;box-shadow:0 18px 45px #24302818!important;animation:header-menu-enter .25s ease-out!important}html body header nav a{min-height:50px!important;font-size:14px!important;padding:12px 16px!important;justify-content:space-between!important;border-bottom:1px solid #e9e7e1!important;border-radius:9px!important}html body header nav a:before{display:none!important}html body header nav a:after{content:'↗'!important;display:block!important;position:static!important;width:auto!important;height:auto!important;transform:none!important;background:none!important;font-size:16px!important;color:#81858b!important}html body header nav a:last-child{border-bottom:0!important}}
@media(max-width:360px){html body header .brand-mark{width:148px!important}html body header{padding:0 12px!important}html body header button.menu{min-width:75px!important}}
@keyframes header-menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html body header nav.open{animation:none!important}html body header button.menu:after,html body header a.contact-link span{transition:none!important}}

/* Screen-aware typography: readable detail with restrained hierarchy. */
html body main :is(p,li){font-size:clamp(14px,1.05vw,16px)!important;line-height:1.8!important;color:#595b60!important;letter-spacing:0!important}
html body main :is(h1,h2,h3){overflow-wrap:break-word!important;text-wrap:balance}
html body main h1,html body main .recruiter-hero h1{font-size:clamp(38px,5.1vw,74px)!important;line-height:1.12!important;letter-spacing:-.055em!important}
html body main h2,html body main .section-head h2{font-size:clamp(30px,3.45vw,48px)!important;line-height:1.2!important;letter-spacing:-.045em!important}
html body main h3{font-size:clamp(21px,2vw,28px)!important;line-height:1.3!important;letter-spacing:-.035em!important}
html body main .eyebrow{font-size:11px!important;line-height:1.7!important;letter-spacing:.12em!important;color:#656a70!important}
html body main :is(p,li){text-wrap:pretty}html body main p{max-width:68ch}
html body main :is(small,figcaption),html body main .project-meta span{font-size:12px!important;line-height:1.65!important;color:#62666c!important}
html body main .company-logo-grid figcaption{font-size:13px!important;line-height:1.5!important;color:#30343a!important}
html body main .company-logo-grid figcaption small,html body main .company-logo-grid .destination-label{font-size:11px!important;color:#62666c!important}
html body main :is(.text-link,.live-links a,.freelance-grid a,.case-navigation a){font-size:12px!important;line-height:1.6!important}
html body main .profile-title,html body main .profile-facts>span{font-size:12px!important;color:#63676c!important;line-height:1.6!important}
html body header nav a{font-size:12px!important;letter-spacing:0!important}
html body .modern-footer .footer-columns>div>a{font-size:13px!important;line-height:1.7!important}html body .modern-footer .footer-bottom{font-size:11px!important}
@media(min-width:651px) and (max-width:1150px){html body header nav a{font-size:11px!important;padding:10px 8px!important}}
@media(max-width:650px){html body main h1,html body main .recruiter-hero h1{font-size:clamp(30px,8.2vw,44px)!important;line-height:1.15!important;letter-spacing:-.045em!important}html body main h2,html body main .section-head h2{font-size:clamp(26px,6.8vw,34px)!important;line-height:1.23!important}html body main h3{font-size:22px!important;line-height:1.32!important}html body main :is(p,li),html body main .recruiter-hero p{font-size:14px!important;line-height:1.8!important}html body main .eyebrow{font-size:10px!important;letter-spacing:.1em!important}html body main .profile-title{font-size:11px!important}html body main .profile-facts>span{font-size:11px!important}html body main .company-logo-grid figcaption{min-height:110px!important;font-size:12px!important}html body main .company-logo-grid figcaption small,html body main .company-logo-grid .destination-label{font-size:11px!important}html body header nav a{font-size:14px!important}html body main .proof-grid :is(p,span){font-size:12px!important}html body main .hero-actions .pill{font-size:13px!important}html body main .recruiter-hero figcaption{font-size:11px!important}.writing-word{white-space:normal!important}.footer-columns h3{font-size:12px!important}}

html body main .shinchat-spotlight :is(p,li,small){color:#c7cbd2!important}html body main .shinchat-spotlight .eyebrow{color:#b7c1cf!important}

/* Compact phone typography with a clear, comfortable reading scale. */
@media(max-width:650px){
html body main h1,html body main .recruiter-hero h1{font-size:clamp(28px,7.5vw,36px)!important;line-height:1.2!important;letter-spacing:-.04em!important}
html body main h2,html body main .section-head h2{font-size:clamp(24px,6.1vw,29px)!important;line-height:1.28!important;letter-spacing:-.035em!important}
html body main h3{font-size:20px!important;line-height:1.35!important;letter-spacing:-.025em!important}
html body main :is(p,li),html body main .recruiter-hero p{font-size:14px!important;line-height:1.7!important}
html body main .eyebrow{font-size:10px!important;letter-spacing:.08em!important}
html body main .profile-title{font-size:10px!important;line-height:1.6!important}
html body main .profile-facts>span{font-size:10px!important;line-height:1.6!important}
html body main :is(small,figcaption){font-size:11px!important;line-height:1.6!important}
html body main .company-logo-grid figcaption{font-size:12px!important;min-height:100px!important}
html body main :is(.text-link,.live-links a,.freelance-grid a,.case-navigation a){font-size:12px!important}
html body header nav a{font-size:13px!important}
html body main .hero-actions .pill{font-size:12px!important;min-height:48px!important}
html body main .recruiter-hero h1{margin:16px 0 20px!important}
html body main .recruiter-hero{padding:30px 0 34px!important;gap:24px!important}
html body main .section{padding:38px 0!important}
html body main .section-head{gap:14px!important;margin-bottom:22px!important}
html body main .geo-metrics strong,html body main .proof-grid strong{font-size:32px!important}
html body .modern-footer .footer-invitation h2{font-size:28px!important;line-height:1.25!important}
html body .modern-footer .footer-columns>div>a{font-size:12px!important}
}